/* ==========================================================================
   Higjiena Kibernetike · KREN — stilet kryesore
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-800.woff2) format("woff2"); }

:root {
  --bg: #f6f6fb;
  --bg-2: #eef0f7;
  --surface: #ffffff;
  --surface-2: #f7f5ff;
  --border: rgba(28, 22, 70, 0.09);
  --border-strong: rgba(28, 22, 70, 0.18);
  --text: #16132b;
  --text-2: #3a3654;
  --muted: #625e7c;
  --brand: #6a3fd6;
  --brand-2: #5b4cf5;
  --brand-soft: rgba(106, 63, 214, 0.09);
  --accent: #0b9c86;
  --success: #12a067;
  --danger: #dc3450;
  --warning: #c48500;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 44px -18px rgba(40, 28, 110, 0.22);
  --container: 1200px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(130, 81, 223, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(11, 156, 134, 0.07), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
}
main { flex: 1; outline: none; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-2); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand); color: #fff; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(106,63,214,0.045), transparent); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head--center { text-align: center; margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.lead { font-size: 1.15rem; color: var(--muted); }
.muted { color: var(--muted); }
.text-gradient {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s;
  box-shadow: 0 10px 30px -10px rgba(130, 81, 223, 0.8);
}
.btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(130, 81, 223, 1); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.btn--sm { padding: 8px 14px; font-size: 0.9rem; }
.btn--lg { padding: 15px 28px; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.linklike { background: none; border: 0; color: var(--brand); padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent)); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { border-radius: 8px; background: #fff; padding: 3px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 1rem; }
.brand__text small { color: var(--muted); font-size: 0.75rem; }

.site-nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav__menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: 0.95rem; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.site-nav a:hover, .site-nav__menu-btn:hover { background: var(--brand-soft); color: var(--brand); }
.site-nav [aria-current="page"] { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(106,63,214,.35); }
.site-nav .nav-cta { background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-weight: 600; margin-left: 6px; }
.site-nav .nav-cta:hover { filter: brightness(1.1); }
.has-menu { position: relative; }
.site-nav__menu-btn svg { transition: transform .2s; }
.site-nav__menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 250px; padding: 8px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow);
  display: none;
}
.site-nav__menu.open { display: block; }
.site-nav__menu a { display: flex; width: 100%; border-radius: 10px; padding: 10px 12px; }
.ico { width: 1.4em; text-align: center; }

.nav-toggle { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--border-strong); border-radius: 12px; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 72px 0 0 0; background: var(--bg);
    padding: 16px; overflow-y: auto; display: none;
  }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .site-nav a, .site-nav__menu-btn { width: 100%; padding: 14px 16px; font-size: 1.05rem; border-radius: 12px; }
  .site-nav__menu { position: static; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; }
  .site-nav .nav-cta { margin: 8px 0 0; justify-content: center; }
  body.nav-open { overflow: hidden; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--bg-2); color: var(--muted); font-size: 0.95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding: 56px 0 32px; }
.site-footer h2 { font-size: 0.85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer address { font-style: normal; margin-bottom: 16px; }
.kren-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kren-logo img { background: #fff; border-radius: 10px; padding: 4px; }
.kren-logo span { display: flex; flex-direction: column; line-height: 1.2; }
.kren-logo strong { color: var(--text); font-size: 1.4rem; letter-spacing: .04em; }
.kren-logo small { font-size: .72rem; }
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-strong); }
.socials a:hover { background: var(--brand); border-color: var(--brand); text-decoration: none; }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 28px; border-top: 1px solid var(--border); font-size: 0.85rem; }
.site-footer__bottom p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }


/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
  color: var(--text); text-decoration: none; overflow: hidden;
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
a.card:hover { transform: translateY(-4px); border-color: rgba(130,81,223,.6); box-shadow: var(--shadow); color: var(--text); }
.card p { color: var(--muted); margin-bottom: 0; }
.card__media { margin: -24px -24px 20px; aspect-ratio: 16 / 9; overflow: hidden; background: #ece8fb; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.card:hover .card__media img { transform: scale(1.05); }
.card__icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 14px; background: var(--brand-soft); margin-bottom: 16px; }
.card__link { margin-top: auto; padding-top: 16px; color: var(--brand); font-weight: 600; font-size: .95rem; }
.badge { color: #fff !important; position: absolute; top: 14px; right: 14px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #062a24; z-index: 1; }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 540px; margin-bottom: 28px; }
.hero__media { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: 0 30px 80px -30px rgba(130,81,223,.6); background: #000; }
.hero__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; color: var(--muted); font-size: .9rem; }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust span::before { content: "✓"; color: var(--accent); font-weight: 700; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 24px; text-align: center; }
.stat strong { display: block; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .9rem; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Tips ---------- */
.tips { counter-reset: tip; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.tips li { counter-increment: tip; display: flex; gap: 16px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.tips li::before { content: counter(tip, decimal-leading-zero); font-weight: 800; font-size: 1.3rem; color: var(--brand); min-width: 2ch; }
.tips strong { display: block; margin-bottom: 2px; }
.tips p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- CTA banner ---------- */
.cta {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: clamp(28px, 5vw, 48px); border-radius: 24px;
  background: radial-gradient(600px 300px at 100% 0%, rgba(62,224,196,.18), transparent 60%), linear-gradient(135deg, #6a3fd6, #4b3bdc);
  border: 1px solid rgba(130,81,223,.5);
}
.cta h2 { margin-bottom: 8px; }
.cta { color: #fff; }
.cta h2 { color: #fff; }
.cta p { margin: 0; color: #ece6ff; }
.cta .btn { background: #fff; color: var(--brand); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Page header ---------- */
.page-head { padding: clamp(40px, 6vw, 72px) 0 24px; }
.page-head .lead { max-width: 760px; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--muted); }

/* ---------- Panels / prose ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(20px, 4vw, 36px); }
.prose { max-width: 780px; }
.prose h2 { margin-top: 1.6em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.callout { border-left: 4px solid var(--accent); background: rgba(62,224,196,.08); padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 24px 0; }
.callout--danger { border-color: var(--danger); background: rgba(255,93,115,.08); }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--brand-soft); color: #4f2db0; font-size: .85rem; margin: 0 6px 6px 0; }

/* ---------- Progress ---------- */
.progress { height: 10px; background: rgba(28,22,70,.08); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: inherit; transition: width .4s ease; }

/* ---------- Quiz ---------- */
.quiz { max-width: 820px; margin-inline: auto; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.level { text-align: left; cursor: pointer; font: inherit; }
.level .card__icon { font-size: 1.4rem; }
.level--easy .card__icon { background: rgba(52,211,153,.15); }
.level--medium .card__icon { background: rgba(255,200,87,.15); }
.level--hard .card__icon { background: rgba(255,93,115,.15); }
.quiz__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; color: var(--muted); font-size: .9rem; }
.quiz__question { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; margin: 24px 0; }
.options { display: grid; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.option:hover:not(:disabled) { border-color: var(--brand); background: var(--surface-2); }
.option:disabled { cursor: default; }
.option__key { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: rgba(28,22,70,.06); font-weight: 700; font-size: .9rem; }
.option.is-correct { border-color: var(--success); background: rgba(52,211,153,.12); }
.option.is-correct .option__key { background: var(--success); color: #fff; }
.option.is-wrong { border-color: var(--danger); background: rgba(255,93,115,.12); }
.option.is-wrong .option__key { background: var(--danger); color: #fff; }
.explain { margin-top: 20px; padding: 16px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.explain strong { display: block; margin-bottom: 4px; }
.explain.ok strong { color: var(--success); }
.explain.bad strong { color: var(--danger); }
.quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.result { text-align: center; }
.result__score { font-size: clamp(3rem, 10vw, 5rem); font-weight: 800; line-height: 1; margin: 12px 0; }
.result__badge { font-size: 4rem; }
.review { text-align: left; margin-top: 32px; display: grid; gap: 10px; }
.review details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.review summary { cursor: pointer; }
.review .ok { color: var(--success); }
.review .bad { color: var(--danger); }

/* ---------- Memory game ---------- */
.game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.game-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.game-stats span { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .9rem; }
.game-stats b { color: var(--brand); }
.memory { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; perspective: 1000px; max-width: 760px; margin-inline: auto; }
@media (max-width: 640px) { .memory { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.mcard { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s ease; border-radius: 14px; }
.mcard.is-flipped, .mcard.is-matched { transform: rotateY(180deg); }
.mcard img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; object-fit: cover; }
.mcard .front { transform: rotateY(180deg); }
.mcard.is-matched { cursor: default; }
.mcard.is-matched .front { box-shadow: 0 0 0 3px var(--success); }
.mcard.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: rotateY(180deg) translateX(-4px); } 75% { transform: rotateY(180deg) translateX(4px); } }

/* ---------- Modal ---------- */
.modal { border: 0; padding: 0; background: transparent; color: var(--text); max-width: min(520px, calc(100% - 32px)); }
.modal::backdrop { background: rgba(22, 19, 43, .45); backdrop-filter: blur(4px); }
.modal__box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 32px; text-align: center; box-shadow: var(--shadow); }

/* ---------- Handbook viewer ---------- */
.viewer { display: grid; grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.viewer__stage { position: relative; width: min(100%, 620px); }
.viewer__page { width: 100%; aspect-ratio: 1166 / 1654; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(40,28,110,.35); background: #fff; object-fit: contain; transition: opacity .2s; }
.viewer__btn { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(13,10,24,.85); color: #fff; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }
.viewer__btn:hover:not(:disabled) { background: var(--brand); }
.viewer__btn:disabled { opacity: .3; cursor: default; }
.viewer__btn--prev { left: -64px; }
.viewer__btn--next { right: -64px; }
@media (max-width: 780px) { .viewer__btn--prev { left: 8px; } .viewer__btn--next { right: 8px; } }
.viewer__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 12px; max-width: 100%; scroll-snap-type: x mandatory; }
.thumbs button { flex: none; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; scroll-snap-align: center; opacity: .6; }
.thumbs button[aria-current="true"] { border-color: var(--accent); opacity: 1; }
.thumbs img { width: 64px; height: 91px; object-fit: cover; border-radius: 4px; }
.print-pages { display: none; }

/* ---------- Gallery ---------- */
.gallery { columns: 3 280px; column-gap: 14px; }
.gallery button { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--surface); break-inside: avoid; }
.gallery img { width: 100%; transition: transform .4s ease, opacity .3s; }
.gallery button:hover img { transform: scale(1.04); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0,0,0,.92); }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 56px 16px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 112px); border-radius: 8px; }
.lightbox__close, .lightbox__nav { position: absolute; border: 0; background: rgba(255,255,255,.1); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--brand); }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__nav--prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: 12px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; color: #ccc; font-size: .9rem; }

/* ---------- Forms / inputs ---------- */
.field { display: grid; gap: 8px; }
.input {
  width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-strong);
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 1.1rem;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 110px; }
.input-wrap button { position: absolute; right: 8px; top: 50%; translate: 0 -50%; }
.search { margin-bottom: 24px; }

/* ---------- Password checker ---------- */
.meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 16px 0 8px; }
.meter span { height: 8px; border-radius: 999px; background: rgba(28,22,70,.1); transition: background .3s; }
.strength-label { font-weight: 700; font-size: 1.2rem; }
.checks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.checks li::before { content: "○"; color: var(--muted); }
.checks li.ok { color: var(--text); }
.checks li.ok::before { content: "✓"; color: var(--success); font-weight: 700; }
.checks li.bad { color: var(--text); }
.checks li.bad::before { content: "!"; color: var(--danger); font-weight: 800; }
.crack-time { font-size: 1.6rem; font-weight: 800; }
.generated { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 1.2rem; word-break: break-all; padding: 16px; background: var(--bg-2); border-radius: 12px; border: 1px dashed var(--border-strong); margin: 12px 0; }
.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Phishing game ---------- */
.message {
  background: #fff; color: #1d1d1f; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border-strong);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .97rem; line-height: 1.55;
}
.message__head { padding: 14px 18px; background: #f2f2f7; border-bottom: 1px solid #e3e3ea; display: grid; gap: 2px; font-size: .88rem; color: #555; }
.message__head b { color: #111; }
.message__body { padding: 18px; }
.message__body a { color: #0a58ca; text-decoration: underline; cursor: not-allowed; }
.message--sms { max-width: 420px; margin-inline: auto; background: #f2f2f7; padding: 16px; }
.message--sms .bubble { background: #e5e5ea; padding: 12px 14px; border-radius: 18px 18px 18px 4px; max-width: 90%; }
.message--sms .sender { text-align: center; font-size: .8rem; color: #777; margin-bottom: 10px; }
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.verdict .btn--safe { background: linear-gradient(135deg, #16a37a, #34d399); box-shadow: none; }
.verdict .btn--phish { background: linear-gradient(135deg, #d6334c, #ff5d73); box-shadow: none; }
.flags { margin: 12px 0 0; padding-left: 1.2em; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 28px; }
.checklist h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.check-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; margin-bottom: 8px; transition: border-color .15s, background .15s; }
.check-item:hover { border-color: var(--border-strong); }
.check-item input { width: 22px; height: 22px; accent-color: var(--success); margin-top: 2px; flex: none; cursor: pointer; }
.check-item small { display: block; color: var(--muted); }
.check-item:has(input:checked) { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.06); }
.check-item:has(input:checked) strong { text-decoration: line-through; text-decoration-color: rgba(28,22,70,.35); }
.sticky-progress { position: sticky; top: 84px; z-index: 5; }

/* ---------- Glossary ---------- */
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.term { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.term h3 { margin-bottom: 6px; color: var(--brand); }
.term p { margin: 0; color: var(--muted); font-size: .95rem; }
.letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.letters button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.letters button.active { background: var(--brand); border-color: var(--brand); }
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* ---------- Help page ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding: 4px 0 4px 48px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); font-weight: 700; }
.contact-card h3 { display: flex; gap: 10px; align-items: center; }
.big-number { font-size: 2rem; font-weight: 800; color: var(--danger); text-decoration: none; }
.accordion details { border-bottom: 1px solid var(--border); padding: 18px 0; }
.accordion summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--brand); }
.accordion details[open] summary::after { content: "–"; }
.accordion details > div { padding-top: 12px; color: var(--muted); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 96px 0; }
.notfound .code { font-size: clamp(5rem, 18vw, 10rem); font-weight: 800; line-height: 1; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Print (doracaku → PDF) ---------- */
@media print {
  @page { margin: 0; size: A4; }
  body { background: #fff; }
  .site-header, .site-footer, .consent, .page-head, .viewer, .no-print { display: none !important; }
  .print-pages { display: block; }
  .print-pages img { width: 100%; height: 100vh; object-fit: contain; break-after: page; }
}

/* Printimi i listës së kontrollit dhe faqeve të tjera me tekst */
@media print {
  body { color: #000; }
  .panel, .check-item, .term, .tips li { background: #fff !important; color: #000 !important; border-color: #bbb !important; }
  .check-item small, .muted { color: #444 !important; }
  .sticky-progress { position: static; }
  .btn, .cta { display: none !important; }
}

/* ---------- Video (YouTube, ngarkohet vetëm pas klikimit) ---------- */
.video-embed { position: relative; aspect-ratio: 16 / 9; }
.video-embed > img { width: 100%; height: 100%; object-fit: cover; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__soon {
  position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px;
  background: rgba(13, 10, 24, 0.85); border: 1px solid var(--border-strong); font-size: .9rem; font-weight: 600;
}
.video-embed__play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
}
.video-embed__play span {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 40px -8px rgba(130,81,223,.9);
  transition: transform .2s;
}
.video-embed__play:hover span { transform: scale(1.08); }

/* ==========================================================================
   Zgjerimi: Akademia, Pajisjet, Aplikacionet, Pasaporta
   ========================================================================== */
.site-nav__menu small { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: .75rem; }
.site-nav__menu { min-width: 280px; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; }
.nav-badge[hidden] { display: none; }
@media (max-width: 1060px) { .site-nav__menu small { display: none; } }

/* Toast */
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 16px;
  background: linear-gradient(135deg, #2b1d5c, #1a1338); border: 1px solid rgba(62,224,196,.5); color: #fff;
  box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.toast.show { transform: translate(-50%, 0); }
.toast a { color: #5ff0d6; font-weight: 600; white-space: nowrap; }

/* Hero slogan */
.hero h1 .line2 { display: block; font-size: .58em; margin-top: .35em; color: var(--text); font-weight: 700; line-height: 1.25; }

/* Generic content blocks */
.table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .95rem; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { color: var(--text); background: var(--surface-2); }
.table-wrap { overflow-x: auto; }

.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.dodont > div { border-radius: var(--radius); padding: 20px 22px; border: 1px solid var(--border); }
.dodont .do { background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.35); }
.dodont .dont { background: rgba(255,93,115,.07); border-color: rgba(255,93,115,.35); }
.dodont h3 { font-size: 1.1rem; }
.dodont ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dodont li { color: var(--text); }
@media (max-width: 760px) { .dodont { grid-template-columns: 1fr; } }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.meta-row .pill { margin: 0; }

/* Lesson / guide layout */
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.doc__toc { position: sticky; top: 96px; font-size: .9rem; }
.doc__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 2px solid var(--border); }
.doc__toc a { display: block; padding: 6px 12px; color: var(--muted); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.doc__toc a:hover { color: var(--brand); border-left-color: var(--brand); }
.doc__body > section { scroll-margin-top: 96px; margin-bottom: 40px; }
.doc__body h2 { font-size: 1.5rem; display: flex; gap: 10px; align-items: center; }
.doc__body p, .doc__body li { color: var(--text-2); }
.doc__body ul, .doc__body ol { padding-left: 1.3em; }
.doc__body li { margin-bottom: .45em; }
@media (max-width: 960px) {
  .doc { grid-template-columns: 1fr; }
  .doc__toc { position: static; }
  .doc__toc ol { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
  .doc__toc a { border: 1px solid var(--border); border-radius: 999px; margin: 0; padding: 4px 12px; }
}

.story { background: linear-gradient(135deg, rgba(130,81,223,.14), rgba(62,224,196,.06)); border: 1px solid rgba(130,81,223,.35); border-radius: var(--radius); padding: 24px; }
.story h3 { display: flex; gap: 8px; align-items: center; }

.objectives { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.objectives li { padding-left: 30px; position: relative; }
.objectives li::before { content: "🎯"; position: absolute; left: 0; }

.setup-steps { display: grid; gap: 14px; counter-reset: setup; }
.setup-step { counter-increment: setup; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px 20px 70px; position: relative; }
.setup-step::before { content: counter(setup); position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.setup-step h3 { margin-bottom: 4px; }
.setup-step .why { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.setup-step ol { margin: 0; padding-left: 1.2em; }
.setup-step ol li { color: var(--text-2); margin-bottom: 4px; }
@media (max-width: 520px) { .setup-step { padding: 64px 18px 18px; } }

.mini-quiz { display: grid; gap: 22px; }
.mini-quiz .q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.mini-quiz .q h3 { font-size: 1.05rem; margin-bottom: 14px; }
.mini-quiz .options { gap: 8px; }
.mini-quiz .option { padding: 12px 14px; }
.mini-quiz .explain { margin-top: 12px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Cards in index pages */
.card__emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 14px; }
.card .meta-row { margin-top: 14px; }
.card.is-done { border-color: rgba(52,211,153,.5); }
.card.is-done::after { content: "✓ E përfunduar"; position: absolute; top: 14px; right: 14px; font-size: .72rem; font-weight: 700; color: var(--success); }
.level-Fillestar { background: rgba(52,211,153,.15) !important; color: #0b6e47 !important; }
.level-Mesatar { background: rgba(255,200,87,.15) !important; color: #8a5a00 !important; }
.level-I-avancuar { background: rgba(255,93,115,.15) !important; color: #b0233a !important; }
.risk { font-weight: 700; font-size: .78rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.risk--i-ulet, .risk--low { background: rgba(18,160,103,.12); color: #0b6e47; }
.risk--mesatar, .risk--medium { background: rgba(196,133,0,.14); color: #8a5a00; }
.risk--i-larte, .risk--high { background: rgba(220,52,80,.12); color: #b0233a; }

/* Apps page */
.app-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.app-filter button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: .9rem; }
.app-filter button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.app-card .app-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.app-card h3 { margin-bottom: 2px; }
.app-card .age { font-size: 1.5rem; font-weight: 800; white-space: nowrap; }
.app-card details { margin-top: 12px; }
.app-card summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .92rem; }
.app-card ul { padding-left: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.avoid-card { border-color: rgba(255,93,115,.35); background: linear-gradient(180deg, rgba(255,93,115,.08), var(--surface)); }
.pegi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pegi-grid .term h3 { font-size: 1rem; }
.agreement { counter-reset: rule; list-style: none; padding: 0; display: grid; gap: 10px; }
.agreement li { counter-increment: rule; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); }
.agreement li::before { content: counter(rule); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); font-weight: 700; font-size: .85rem; }
.sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.sign-row div { border-top: 1px dashed var(--border-strong); padding-top: 8px; color: var(--muted); font-size: .9rem; }

/* Passport */
.passport { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .passport { grid-template-columns: 1fr; } }
.passport__card {
  border-radius: 24px; padding: 28px; position: relative; overflow: hidden;
  background: radial-gradient(500px 260px at 100% 0%, rgba(62,224,196,.22), transparent 60%), linear-gradient(135deg, #5a34c7, #2f2496); color: #fff;
  border: 1px solid rgba(130,81,223,.6); box-shadow: 0 30px 80px -30px rgba(130,81,223,.6);
}
.passport__card .rank { font-size: 3.4rem; line-height: 1; }
.passport__card h2 { margin: 12px 0 4px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.badge-tile { text-align: center; padding: 18px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.badge-tile .ico-lg { font-size: 2.2rem; display: block; margin-bottom: 8px; filter: grayscale(1) opacity(.35); }
.badge-tile strong { display: block; font-size: .92rem; }
.badge-tile small { color: var(--muted); font-size: .78rem; display: block; margin-top: 4px; }
.badge-tile.earned { border-color: rgba(62,224,196,.5); background: linear-gradient(180deg, rgba(62,224,196,.1), var(--surface)); }
.badge-tile.earned .ico-lg { filter: none; }
.certificate { display: none; }

@media print {
  body.print-cert > *:not(.certificate) { display: none !important; }
  body.print-cert .certificate {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 96vh; padding: 48px; color: #1a1033; border: 14px double #8251df; font-family: var(--font);
  }
  .certificate img { width: 90px; height: 90px; margin-bottom: 16px; }
  .certificate h1 { font-size: 2.6rem; color: #5b2fc4; margin: 0 0 8px; }
  .certificate .who { font-size: 2.2rem; font-weight: 800; border-bottom: 2px solid #8251df; padding: 0 40px 6px; margin: 24px 0; }
  .certificate p { color: #333 !important; font-size: 1.1rem; }
  .certificate .icons { font-size: 1.6rem; letter-spacing: 6px; margin: 16px 0; }
}

/* Logo e KREN në header */
.brand { gap: 14px; }
.brand img.brand__logo { height: 40px; width: auto; background: none; padding: 0; border-radius: 0; }
.brand__sep { width: 1px; height: 32px; background: var(--border-strong); }
.brand__text { font-weight: 700; font-size: .92rem; line-height: 1.15; letter-spacing: .01em; }
.kren-logo img { background: none !important; padding: 0 !important; border-radius: 0 !important; height: auto; }
@media (max-width: 380px) { .brand__sep, .brand__text { display: none; } }

/* ---------- Kryefaqja: këshilla e ditës, rrugët, çipat, pajisjet ---------- */
.tip-day { display: flex; gap: 18px; align-items: center; padding: 20px 24px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(62,224,196,.12), rgba(130,81,223,.12)); border: 1px solid rgba(62,224,196,.35); }
.tip-day__icon { font-size: 2.2rem; flex: none; }
.tip-day__text { margin: 0; font-size: 1.08rem; font-weight: 600; }
.tip-day > div:nth-child(2) { flex: 1; }
@media (max-width: 600px) { .tip-day { flex-wrap: wrap; } .tip-day .btn { margin-left: auto; } }

.path-card h3 { margin-bottom: 4px; }
.path-links { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
.path-links a { display: block; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: .93rem; }
.path-links a:hover { border-color: var(--brand); background: var(--brand-soft); }

.chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-cloud a { padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; transition: transform .15s, border-color .15s; }
.chip-cloud a:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); }

.device-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.device-row a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; text-align: center; transition: transform .15s, border-color .15s; }
.device-row a span { font-size: 2rem; }
.device-row a:hover { transform: translateY(-3px); border-color: var(--brand); }

/* ---------- Kontrolli i email-it ---------- */
.email-form { display: grid; gap: 12px; }
.email-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.email-form__row .input { flex: 1 1 260px; }
.em-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); cursor: pointer; }
.em-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.em-error { color: var(--danger); margin: 0; font-weight: 600; }
.em-loading { margin-top: 20px; display: flex; gap: 12px; align-items: center; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(28,22,70,.12); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#em-result > .panel:first-child { margin-top: 20px; }
.em-safe { border-color: rgba(52,211,153,.5); background: linear-gradient(180deg, rgba(52,211,153,.1), var(--surface)); }
.em-bad { border-color: rgba(255,93,115,.5); background: linear-gradient(180deg, rgba(255,93,115,.1), var(--surface)); }
.em-big { font-size: 3rem; line-height: 1; }
.em-summary { display: flex; gap: 18px; align-items: flex-start; }
.em-summary h2 { font-size: 1.5rem; margin-bottom: 8px; }
.em-plan { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.em-plan li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.em-plan__ico { font-size: 1.5rem; flex: none; }
.em-plan p { margin: 2px 0 0; color: var(--muted); font-size: .94rem; }
.em-list { display: grid; gap: 8px; }
.em-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.em-item summary { cursor: pointer; }
.em-item p { margin: 10px 0 0; }

/* ---------- Kërkimi ---------- */
.search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: none; color: var(--text); cursor: pointer; font-size: .9rem; }
.search-btn:hover { background: var(--brand-soft); color: var(--brand); }
.search-btn kbd { font-family: inherit; font-size: .72rem; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1060px) { .search-btn kbd, .search-btn .lbl { display: none; } .search-btn { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: 12px; } }
.search-dlg { border: 0; padding: 0; background: transparent; color: var(--text); width: min(680px, calc(100% - 24px)); margin-top: 8vh; }
.search-dlg::backdrop { background: rgba(22,19,43,.45); backdrop-filter: blur(4px); }
.search-dlg__box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.search-dlg__box .input { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; font-size: 1.15rem; padding: 18px 20px; }
.search-dlg__box .input:focus { box-shadow: none; }
.search-results { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow-y: auto; }
.search-results a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--text); text-decoration: none; }
.search-results a:hover, .search-results a:focus, .search-results a.sel { background: var(--brand-soft); outline: none; }
.search-results small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.search-results .empty { padding: 24px; }
.search-hint { padding: 10px 18px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); display: flex; justify-content: space-between; }

/* ---------- Mashtrimet ---------- */
.scam__head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.scam__head h2 { font-size: 1.4rem; margin-bottom: 6px; }
.scam__icon { font-size: 2.4rem; flex: none; }
.scam__example { background: #f2f2f7; color: #1d1d1f; border-radius: 14px; padding: 14px 18px; margin: 16px 0; font-family: system-ui, sans-serif; }
.scam__example p { margin: 4px 0 0; }
.scam details { margin-top: 8px; }
.scam summary { cursor: pointer; }

/* ---------- Sfida 30-ditore ---------- */
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.challenge { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, background .15s; }
.challenge:hover { border-color: var(--border-strong); }
.challenge input { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; accent-color: var(--success); cursor: pointer; }
.challenge__day { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.challenge__icon { font-size: 1.8rem; }
.challenge__task { color: var(--text-2); font-size: .95rem; }
.challenge small { color: var(--muted); }
.challenge.is-done { border-color: rgba(52,211,153,.5); background: linear-gradient(180deg, rgba(52,211,153,.08), var(--surface)); }

/* ---------- Fleta e punës & posteri (letër e bardhë) ---------- */
.sheet, .poster { background: #fff; color: #1a1033; border-radius: 12px; padding: clamp(20px, 5vw, 48px); max-width: 820px; margin: 0 auto; box-shadow: var(--shadow); font-size: 15px; }
.sheet h2 { font-size: 1.15rem; color: #5b2fc4; margin: 28px 0 10px; }
.sheet p, .sheet li { color: #1a1033; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #8251df; padding-bottom: 12px; }
.sheet__head img { height: 35px; width: auto; }
.sheet__fields { display: flex; flex-wrap: wrap; gap: 24px; margin: 16px 0; font-size: .95rem; }
.sheet__sort { list-style: decimal; padding-left: 1.4em; display: grid; gap: 10px; }
.sheet__sort .box { display: inline-block; width: 18px; height: 18px; border: 2px solid #1a1033; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.sheet__opts { list-style: none; padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
@media (max-width: 600px) { .sheet__opts { grid-template-columns: 1fr; } }
.sheet .lines { height: 64px; background: repeating-linear-gradient(transparent 0 30px, #bbb 30px 31px); margin-bottom: 8px; }
.sheet__key { margin-top: 32px; padding: 14px 18px; border: 2px dashed #8251df; border-radius: 10px; font-size: .9rem; }
.sheet__key h2 { margin-top: 0; }
.sheet__foot { text-align: center; color: #777 !important; font-size: .8rem; margin-top: 24px; }

.poster { max-width: 760px; text-align: center; border: 10px solid #8251df; }
.poster__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #5b2fc4; }
.poster__head img { height: 44px; width: auto; }
.poster__title { font-size: clamp(1.6rem, 5vw, 2.6rem); color: #1a1033; margin: 20px 0 4px; }
.poster__sub { font-size: 1.15rem; color: #5b2fc4; font-weight: 700; margin-bottom: 20px; }
.poster__rules { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; counter-reset: pr; }
.poster__rules li { counter-increment: pr; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f3efff; color: #1a1033; font-size: .92rem; }
.poster__rules li > span { font-size: 1.7rem; }
.poster__rules strong { display: block; font-size: 1.02rem; }
.poster__foot { margin: 20px 0 0; color: #1a1033; font-size: .95rem; }
@media (max-width: 600px) { .poster__rules { grid-template-columns: 1fr; } }

@media print {
  .sheet, .poster { box-shadow: none; border-radius: 0; max-width: none; padding: 0; }
  .poster { border: 10px solid #8251df; padding: 24px; min-height: 96vh; }
  .sheet__key { break-before: page; }
  .container { width: 100%; }
}

/* ==========================================================================
   Header modern (full width, simetrik, mega-menu) — tema e çelët
   ========================================================================== */
:root { --container: 1360px; --hdr-h: 74px; }
.hdr { position: sticky; top: 0; z-index: 50; }
.hdr__wrap { width: 100%; padding: 0 clamp(16px, 3vw, 44px); }
.hdr__top { background: linear-gradient(90deg, #4b2bb8, #6a3fd6 45%, #0b9c86); color: #fff; font-size: .82rem; }
.hdr__top .hdr__wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.hdr__note { margin: 0; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__top-right { display: flex; align-items: center; gap: 18px; }
.hdr__sos { color: #fff; text-decoration: none; white-space: nowrap; }
.hdr__sos:hover { color: #fff; text-decoration: underline; }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.18); }
.lang a { padding: 2px 10px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .75rem; letter-spacing: .05em; }
.lang a[aria-current="true"] { background: #fff; color: var(--brand); }
.lang a:not([aria-current="true"]):hover { background: rgba(255,255,255,.25); color: #fff; }

.hdr__bar { position: relative; background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); box-shadow: 0 6px 24px -18px rgba(40,28,110,.35); }
.hdr__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: var(--hdr-h); }
.hdr__brand { justify-self: start; display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
.hdr__brand img { height: 42px; width: auto; }
.hdr__logo-mark { display: none; }
.hdr__sep { width: 1px; height: 34px; background: var(--border-strong); }
.hdr__name { display: flex; flex-direction: column; line-height: 1.05; font-weight: 800; font-size: 1.02rem; color: var(--text); letter-spacing: -.01em; }
.hdr__name b { font-weight: 800; background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hdr__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.hdr__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.hdr__icon:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.hdr__cta { box-shadow: none; }

.hdr__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hdr__menu > li > a, .hdr__menu .site-nav__menu-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.hdr__menu > li > a:hover, .hdr__menu .site-nav__menu-btn:hover, .hdr__menu .site-nav__menu-btn[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); }
.hdr__menu [aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.hdr__menu .site-nav__menu-btn svg { transition: transform .2s; }
.hdr__menu .site-nav__menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr__mobile-only { display: none; }

/* Mega-menu */
.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 30px 50px -30px rgba(40,28,110,.35); }
.mega.open { display: block; animation: megaIn .18s ease; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__inner { max-width: 1100px; margin: 0 auto; padding: 28px 24px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mega__title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 12px; }
.mega__col a { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; color: var(--text); text-decoration: none; }
.mega__col a:hover, .mega__col a[aria-current="page"] { background: var(--brand-soft); }
.mega__col a:hover strong { color: var(--brand); }
.mega__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 1.3rem; }
.mega__col strong { display: block; font-size: .95rem; }
.mega__col small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.mega__foot { max-width: 1100px; margin: 0 auto; padding: 12px 36px 18px; display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--border); font-weight: 600; font-size: .9rem; }
.mega__foot a { text-decoration: none; }

.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1140px) {
  .hdr__grid { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; }
  /* backdrop-filter e "burgos" një element position:fixed, prandaj në celular e heqim */
  .hdr__bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .hdr__nav { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--hdr-h) - 36px); background: var(--surface); overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 40px; display: none; border-top: 1px solid var(--border); box-shadow: 0 20px 40px -20px rgba(40,28,110,.3); }
  .hdr__nav.open { display: block; }
  .hdr__menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .hdr__menu > li > a, .hdr__menu .site-nav__menu-btn { width: 100%; justify-content: space-between; padding: 14px 16px; border-radius: 12px; font-size: 1.05rem; }
  .hdr__mobile-only { display: block; }
  .mega { position: static; box-shadow: none; border: 0; background: transparent; }
  .mega__inner { grid-template-columns: 1fr; padding: 4px 0 8px 8px; gap: 4px; }
  .mega__title { margin-top: 8px; }
  .mega__foot { padding: 8px 12px; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .hdr__note { display: none; }
  .hdr__top .hdr__wrap { justify-content: flex-end; }
  .hdr__cta { display: none; }
  /* Në celular: simboli i KREN + emri i faqes (kursen hapësirë, por emri mbetet i dukshëm) */
  .hdr__logo-full { display: none; }
  .hdr__logo-mark { display: block; height: 38px !important; width: 38px !important; border-radius: 10px; }
  .hdr__brand { gap: 10px; }
  .hdr__sep { height: 30px; }
  .hdr__name { font-size: .95rem; }
}
@media (hover: hover) and (min-width: 1141px) {
  .has-mega:hover .mega { display: block; }
}

/* Footer i çelët */
.site-footer { background: #fff; border-top: 1px solid var(--border); }
.site-footer h2 { color: var(--text); }
.kren-logo img { height: 56px !important; width: auto !important; }

/* Rregullime të vogla për temën e çelët */
.passport__card .muted, .cta .muted { color: #e4dcff !important; }
.passport__card .input { background: rgba(255,255,255,.95); color: var(--text); }
.passport__card a { color: #fff; }
.video-embed__soon { color: #fff; }
.hero__media { box-shadow: 0 30px 70px -30px rgba(106,63,214,.45); }
.card { background: var(--surface); box-shadow: 0 1px 2px rgba(28,22,70,.04); }
a.card:hover { box-shadow: 0 24px 50px -24px rgba(106,63,214,.35); }
.stat { background: var(--surface); }
.tips li, .term, .panel, .check-item, .challenge, .em-item, .app-card { box-shadow: 0 1px 2px rgba(28,22,70,.04); }
.site-header, .site-header::before { display: none; }

/* Footer: 5 kolona simetrike */
.site-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr; gap: 32px; }
@media (max-width: 1100px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer__slogan { text-align: center; padding: 18px 0; border-top: 1px solid var(--border); font-weight: 700; background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-footer__brand .socials { margin-top: 16px; }

/* ---------- Hero: ilustrim i animuar (mburojë + çipa sigurie) ---------- */
.hero { padding-top: clamp(32px, 6vw, 72px); }
.hero-art {
  position: relative; aspect-ratio: 1 / .9; width: 100%; max-width: 620px; justify-self: center;
  border-radius: 32px; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 45%, #ffffff 0%, #f1ecff 45%, #e3f8f3 100%);
  border: 1px solid var(--border); box-shadow: 0 40px 80px -40px rgba(106,63,214,.45);
}
.hero-art__shield { position: absolute; left: 50%; top: 50%; width: 38%; translate: -50% -52%; filter: drop-shadow(0 24px 30px rgba(91,76,245,.35)); animation: float 6s ease-in-out infinite; }
.hero-art__ring { position: absolute; left: 50%; top: 48%; border-radius: 50%; translate: -50% -50%; border: 2px dashed rgba(106,63,214,.25); }
.hero-art__ring--1 { width: 62%; aspect-ratio: 1; animation: spin 40s linear infinite; }
.hero-art__ring--2 { width: 86%; aspect-ratio: 1; border-color: rgba(11,156,134,.22); animation: spin 60s linear infinite reverse; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.92); border: 1px solid var(--border); box-shadow: 0 14px 30px -14px rgba(40,28,110,.35);
  font-weight: 700; font-size: clamp(.72rem, 1.4vw, .9rem); color: var(--text); white-space: nowrap; animation: float 7s ease-in-out infinite;
}
.chip span { font-size: 1.15em; }
.chip::after { content: "✓"; margin-left: 4px; color: var(--success); font-weight: 800; }
.chip--1 { left: 6%; top: 12%; animation-delay: -1s; }
.chip--2 { right: 6%; top: 18%; animation-delay: -3s; }
.chip--3 { left: 4%; bottom: 26%; animation-delay: -2s; }
.chip--4 { right: 5%; bottom: 30%; animation-delay: -4s; }
.chip--5 { left: 50%; bottom: 7%; translate: -50% 0; animation-delay: -5s; }
.orb { position: absolute; font-size: clamp(1.2rem, 2.6vw, 1.8rem); animation: float 5s ease-in-out infinite; }
.orb--1 { left: 30%; top: 6%; } .orb--2 { right: 26%; top: 38%; animation-delay: -2s; } .orb--3 { left: 22%; bottom: 14%; animation-delay: -3s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) { .hero-art { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) { .hero-art *, .chip, .orb { animation: none !important; } }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }



/* Lojërat: kur shfaqet një pjesë e re, mos e fshih nën kokën ngjitëse */
#quiz-play, #quiz-result, #quiz-levels, .page-head, [id^="ph-"], .game-bar, .panel { scroll-margin-top: 126px; }

/* Kuizi në telefon: kartat e niveleve kompakte (të treja shihen pa skroll) */
@media (max-width: 640px) {
  .levels { gap: 10px; }
  .levels .level { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; }
  .levels .level .card__icon { width: 52px; height: 52px; margin: 0; grid-row: span 3; }
  .levels .level h3 { margin: 0; font-size: 1.1rem; }
  .levels .level p { font-size: .88rem; line-height: 1.35; margin: 2px 0 0; }
  .levels .level .pill { grid-column: 2; justify-self: start; margin: 6px 0 0 !important; font-size: .75rem; padding: 2px 10px; }
  .levels .level .card__link { grid-column: 1 / -1; padding-top: 10px; font-size: .9rem; }
  .quiz__question { margin: 16px 0; }
  .option { padding: 13px 14px; }
}

/* Telefon: koka e faqes më e shkurtër, që përmbajtja të shihet më shpejt */
@media (max-width: 640px) { .page-head { padding: 22px 0 10px; } .page-head h1 { font-size: 1.85rem; margin-bottom: 10px; } .page-head .lead { font-size: 1rem; line-height: 1.5; } .breadcrumb { margin-bottom: 6px; } }

/* Certifikata si imazh: pamje paraprake + printim A4 horizontal */
.cert-preview { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); background: #fff; }
.cert-preview[hidden] { display: none; }
@page cert { size: A4 landscape; margin: 0; }
@media print {
  body.print-cert .certificate { display: block !important; page: cert; border: 0 !important; padding: 0 !important; min-height: 0 !important; }
  body.print-cert .certificate #cert-img { display: block; width: 100% !important; height: auto !important; max-height: 100vh; object-fit: contain; margin: 0 auto; }
  body.print-cert { background: #fff !important; }
}

/* Statistikë me fjalë (p.sh. „Të gjitha“): në një rresht, madhësi që përshtatet */
.stat strong.stat__word { white-space: nowrap; font-size: clamp(1.45rem, 6.2vw, 2.6rem); }

/* ---------- Hero „full view“: në kompjuter gjithçka shihet në ekranin e parë ---------- */
@media (min-width: 901px) {
  .hero { min-height: calc(100svh - 110px); display: flex; align-items: center; padding: clamp(16px, 3vh, 40px) 0; box-sizing: border-box; }
  .hero > .hero__grid { width: min(100% - 48px, var(--container)); grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); }
  .hero .eyebrow { margin-bottom: clamp(6px, 1.2vh, 12px); }
  .hero h1 { font-size: min(4.6vw, 6.6vh, 3.8rem); margin-bottom: clamp(10px, 2vh, 20px); }
  .hero h1 .line2 { margin-top: .3em; }
  .hero .lead { font-size: min(1.15rem, 2.4vh); margin-bottom: clamp(14px, 2.6vh, 28px); }
  .hero .btn--lg { padding: clamp(10px, 1.6vh, 15px) clamp(20px, 2vw, 28px); }
  .hero__trust { margin-top: clamp(12px, 2.4vh, 28px); }
  .hero-art { width: min(100%, calc((100svh - 170px) / 0.9)); max-width: 600px; }
}

/* ==========================================================================
   Simetri në të gjitha faqet
   ========================================================================== */
/* 1) Kokat e faqeve dhe titujt e seksioneve në qendër */
.page-head .container { text-align: center; }
.page-head .lead { margin-inline: auto; }
.page-head .btn-row, .page-head .meta-row, .page-head .chip-cloud { justify-content: center; }
.page-head .panel { text-align: left; max-width: 760px; margin-inline: auto; }
.section-head { text-align: center; margin-inline: auto; }
.section-head .lead { margin-inline: auto; }

/* 2) Rrjetat me karta: rreshti i fundit i paplotë qëndron në mes, kartat në një rresht kanë lartësi të njëjtë */
.grid--3, .grid--4, .levels, .badges-grid, .pegi-grid, .challenge-grid, .glossary { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.grid--3 > * { flex: 0 1 calc((100% - 2 * 20px) / 3); min-width: 260px; }
.grid--4 > * { flex: 0 1 calc((100% - 3 * 20px) / 4); min-width: 220px; }
.levels > * { flex: 0 1 calc((100% - 2 * 16px) / 3); min-width: 220px; }
.badges-grid > * { flex: 0 1 calc((100% - 3 * 12px) / 4); min-width: 130px; }
.pegi-grid > * { flex: 0 1 calc((100% - 3 * 12px) / 4); min-width: 220px; }
.challenge-grid > * { flex: 0 1 calc((100% - 3 * 14px) / 4); min-width: 230px; }
.glossary > * { flex: 0 1 calc((100% - 2 * 14px) / 3); min-width: 290px; }
.grid--3 > [hidden], .grid--4 > [hidden], .glossary > [hidden] { display: none; }
@media (max-width: 640px) {
  .grid--3 > *, .grid--4 > *, .levels > *, .pegi-grid > *, .challenge-grid > *, .glossary > * { flex-basis: 100%; min-width: 0; }
  .badges-grid > * { flex-basis: calc((100% - 12px) / 2); min-width: 0; }
}

/* 3) Dy kolona me gjerësi të barabartë */
.two-col { grid-template-columns: 1fr 1fr; }
.two-col > .panel + .panel, .two-col > .panel:has(+ .panel) { align-self: stretch; }
.two-col > aside.panel { position: sticky; top: 130px; align-self: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } .two-col > aside.panel { position: static; } }

/* 4) Pasaporta: dy kuti të barabarta që nisin në të njëjtën lartësi */
.passport { grid-template-columns: 1fr 1fr; align-items: stretch; }
.passport__badges h2 { margin-top: 0; }
@media (max-width: 900px) { .passport { grid-template-columns: 1fr; } }

/* 5) Mësimet dhe udhëzuesit: përmbajtja në mes, me përmbajtjen (TOC) majtas dhe hapësirë të barabartë djathtas */
@media (min-width: 1200px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr) 220px; }
  .doc::after { content: ""; }
}

/* Rreshtat e filtrave dhe statistikat e lojërave në mes */
.letters, .app-filter, .game-stats { justify-content: center; }
.game-bar { justify-content: center; }

/* ---------- Menuja në kompjuter: zona e „hover“ mbulon edhe hapësirën deri te paneli (menuja nuk mbyllet rrugës) ---------- */
@media (min-width: 1141px) {
  .hdr__grid { align-items: stretch; }
  .hdr__brand, .hdr__actions { align-self: center; }
  .hdr__nav { display: flex; align-items: stretch; }
  .hdr__menu { align-items: stretch; }
  .hdr__menu > li { display: flex; align-items: center; }
  .hdr__menu > li.hdr__mobile-only { display: none; }
  .has-mega:hover > .site-nav__menu-btn { background: var(--brand-soft); color: var(--brand); }
}

/* ---------- Rregullat (tips): rreshta të plotë dhe simetrikë ---------- */
.tips { display: flex; flex-wrap: wrap; justify-content: center; }
.tips > li { flex: 0 1 calc((100% - 3 * 16px) / 4); min-width: 240px; }
/* 10 rregulla → 5 + 5 */
.tips:has(> li:nth-child(10):last-child) > li { flex-basis: calc((100% - 4 * 16px) / 5); min-width: 0; }
/* 6 ose 9 → 3 në rresht */
.tips:has(> li:nth-child(6):last-child) > li, .tips:has(> li:nth-child(9):last-child) > li { flex-basis: calc((100% - 2 * 16px) / 3); min-width: 0; }
.tips > li { flex-direction: column; gap: 8px; }
@media (max-width: 1100px) {
  .tips:has(> li:nth-child(10):last-child) > li { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 900px) {
  .tips:has(> li:nth-child(6):last-child) > li, .tips:has(> li:nth-child(9):last-child) > li { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
  .tips > li, .tips:has(> li:nth-child(10):last-child) > li, .tips:has(> li:nth-child(6):last-child) > li { flex-basis: 100%; min-width: 0; }
}

/* ---------- Menuja: urë e padukshme mbi panel + vonesë e shkurtër para mbylljes ---------- */
@media (hover: hover) and (min-width: 1141px) {
  .mega { display: block; visibility: hidden; opacity: 0; transition: opacity .15s ease .15s, visibility 0s linear .3s; }
  .has-mega:hover > .mega, .mega.open { visibility: visible; opacity: 1; transition-delay: 0s; }
  .hdr__menu:hover > .has-mega:not(:hover) > .mega:not(.open) { visibility: hidden; opacity: 0; transition: none; }
  /* (pa "urë" mbi panel: elementet e menysë zgjaten deri te paneli, ndërsa ura mbulonte lidhjet e tjera) */
}

/* ==========================================================================
   Kartat "tre në rresht" (rregullat e arta, hapat) dhe pllakat e temave
   ========================================================================== */
.trio { list-style: none; padding: 0; margin: 28px auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.trio > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 1px 2px rgba(28,22,70,.04); }
.trio > li > span { font-size: 1.7rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--brand-soft); margin-bottom: 4px; }
.trio strong { font-size: 1.02rem; color: var(--text); }
.trio small { color: var(--muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 760px) {
  .trio { grid-template-columns: 1fr; max-width: 520px; text-align: left; gap: 12px; }
  .trio > li { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; }
  .trio > li > span { grid-row: span 2; width: 52px; height: 52px; font-size: 1.5rem; margin: 0; }
}

.tile-grid { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile-grid > li { display: flex; }
.tile { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(28,22,70,.04); transition: transform .15s, border-color .15s, box-shadow .15s; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 18px 36px -20px rgba(106,63,214,.45); color: var(--text); text-decoration: none; }
.tile__num { position: absolute; top: 10px; left: 12px; font-size: .75rem; font-weight: 700; color: var(--muted); }
.tile__icon { font-size: 2rem; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, rgba(106,63,214,.12), rgba(11,156,134,.12)); margin-bottom: 4px; }
.tile--warn .tile__icon { background: linear-gradient(135deg, rgba(220,52,80,.12), rgba(106,63,214,.1)); }
.tile strong { font-size: .98rem; line-height: 1.3; }
.tile small { color: var(--muted); font-size: .8rem; }
.tile__go { margin-top: auto; padding-top: 6px; font-size: .82rem; font-weight: 700; color: var(--brand); }
@media (max-width: 1000px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 22px 10px 14px; }
  .tile__icon { width: 50px; height: 50px; font-size: 1.6rem; }
  .tile strong { font-size: .92rem; }
}
.section-title { text-align: center; margin: 8px 0 20px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); scroll-margin-top: 126px; }

/* ==========================================================================
   Mashtrimet e zakonshme
   ========================================================================== */
.scam-page { max-width: 1120px; }
.scam-list { display: grid; gap: 28px; }
.scam { padding: clamp(20px, 4vw, 40px); scroll-margin-top: 126px; }
.scam .scam__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.scam .scam__head h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0; max-width: 760px; }
.scam .scam__icon { font-size: 2.4rem; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(135deg, rgba(220,52,80,.12), rgba(106,63,214,.12)); }
.scam__count { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.scam__channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.scam__channels .pill { margin: 0; }
.scam__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.scam__cols h3 { font-size: 1.05rem; margin: 0 0 10px; }
.scam__how p { color: var(--text-2); }
.scam__how p:last-child { margin-bottom: 0; }
.scam .scam__example { margin: 0; background: #eef0f7; border: 1px solid var(--border); border-radius: 20px; padding: 16px; font-family: var(--font); }
.scam__example figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.scam__example figcaption b { color: var(--danger); background: rgba(220,52,80,.1); border-radius: 999px; padding: 3px 10px; letter-spacing: .04em; }
.scam__example blockquote { margin: 0; background: #fff; color: #1d1d1f; border-radius: 18px 18px 18px 4px; padding: 14px 16px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .95rem; line-height: 1.55; box-shadow: 0 1px 2px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.scam .dodont { margin: 24px 0 16px; }
.scam .dodont li { position: relative; padding-left: 20px; }
.scam .dodont li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.scam .dodont .dont li::before { background: var(--danger); }
.scam__victim { margin: 0; border: 1px solid rgba(220,52,80,.25); background: rgba(220,52,80,.04); border-radius: 14px; }
.scam__victim summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.scam__victim summary::-webkit-details-marker { display: none; }
.scam__victim summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--danger); }
.scam__victim[open] summary::after { content: "−"; }
.scam__victim ol { margin: 0; padding: 0 18px 16px 40px; display: grid; gap: 8px; }
.scam__nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-weight: 600; font-size: .92rem; }
.scam__nav a { text-decoration: none; }
@media (max-width: 760px) {
  .scam__cols { grid-template-columns: 1fr; }
  .scam__nav { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   Zona e mësuesit
   ========================================================================== */
.teach { max-width: 1120px; }
.plans { display: grid; gap: 14px; }
.plan { padding: 0; overflow: hidden; scroll-margin-top: 126px; }
.plan > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px 1fr auto 28px; align-items: center; gap: 14px; padding: 16px 20px; }
.plan > summary::-webkit-details-marker { display: none; }
.plan > summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--brand); text-align: center; }
.plan[open] > summary::after { content: "−"; }
.plan > summary:hover { background: var(--surface-2); }
.plan__icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 14px; background: var(--brand-soft); }
.plan__title strong { display: block; font-size: 1.08rem; color: var(--text); }
.plan__title small { color: var(--muted); font-size: .85rem; }
.plan__meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.plan__meta .pill { margin: 0; }
.plan__body { padding: 8px 24px 24px; border-top: 1px solid var(--border); }
.plan__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.plan__box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.plan__box h3 { font-size: 1rem; margin: 0 0 8px; }
.plan__box p:last-child, .plan__box ul:last-child { margin-bottom: 0; }
.plan__box ul { padding-left: 20px; margin: 0; display: grid; gap: 4px; }
.plan h3.plan__h { font-size: 1.05rem; margin: 22px 0 10px; text-align: center; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.timeline time { display: inline-block; text-align: center; font-weight: 700; font-size: .85rem; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 4px 8px; }
.timeline strong { display: block; margin-bottom: 2px; }
.timeline p { margin: 0; color: var(--text-2); font-size: .95rem; }
.plan__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 760px) {
  .plan > summary { grid-template-columns: 44px 1fr 24px; gap: 12px; padding: 14px; }
  .plan__icon { width: 44px; height: 44px; font-size: 1.35rem; }
  .plan__meta { display: none; }
  .plan__body { padding: 8px 14px 18px; }
  .plan__pair { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .timeline time { justify-self: start; }
  .plan__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Nën-menuja e faqeve (p.sh. Aplikacionet) + faqosja "para / pas"
   ========================================================================== */
.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 980px; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.subnav a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 640px) {
  .subnav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { scroll-snap-align: start; flex: none; }
}
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 700; text-decoration: none; transition: border-color .15s, transform .15s; }
.pager a:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; color: var(--brand); }
.pager small { color: var(--muted); font-weight: 600; font-size: 1.1rem; line-height: 1; }
.pager__next { text-align: right; align-items: flex-end; }
@media (max-width: 520px) { .pager { grid-template-columns: 1fr; } .pager__next { text-align: left; align-items: flex-start; } }

/* Kategoritë (5 pllaka): 5 në rresht në kompjuter, 3 + 2 në tablet, listë në celular */
.hub-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hub-grid > li { display: flex; flex: 0 1 calc((100% - 4 * 14px) / 5); min-width: 0; }
@media (max-width: 1100px) { .hub-grid > li { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 640px) {
  .hub-grid { gap: 10px; }
  .hub-grid > li { flex-basis: 100%; }
  .hub-grid .tile { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 2px; text-align: left; align-items: center; padding: 14px 16px; }
  .hub-grid .tile__icon { grid-row: span 3; width: 52px; height: 52px; font-size: 1.5rem; margin: 0; }
  .hub-grid .tile__go { padding-top: 2px; }
}

/* Mosha me një shikim */
.age-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.age-list a { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.age-list a:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.age-list__age { text-align: center; font-weight: 800; font-size: .95rem; color: var(--brand); background: var(--brand-soft); border-radius: 10px; padding: 8px 4px; white-space: nowrap; }
.age-list__name { min-width: 0; }
.age-list__name strong { display: block; font-size: .98rem; line-height: 1.3; }
.age-list__name small { display: block; color: var(--muted); font-size: .8rem; }
.age-list .risk { text-transform: capitalize; }
@media (max-width: 760px) { .age-list { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .age-list a { grid-template-columns: 64px 1fr; } .age-list .risk { grid-column: 2; justify-self: start; } }

/* Kartat e aplikacioneve */
.app-card { scroll-margin-top: 126px; }
.app-card:target { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.app-age { text-align: right; flex: none; }
.app-note { font-size: .85rem; margin: 10px 0 0; color: var(--muted); }

/* ---------- Zona e mësuesit: filtrat, kartat dhe dritarja e planit ---------- */
.filters { max-width: 900px; margin: 0 auto 28px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.filters .input { width: 100%; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.filters__label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.seg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.seg button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.seg button:hover { border-color: var(--brand); color: var(--brand); }
.seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.filters__count { margin: 0; color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) { .filters__label { flex-basis: 100%; margin: 4px 0 0; } }

.tcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.tcard { flex: 0 1 calc((100% - 2 * 18px) / 3); min-width: 0; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px rgba(28,22,70,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.tcard[hidden] { display: none; }
.tcard:hover { border-color: rgba(106,63,214,.45); box-shadow: 0 22px 44px -26px rgba(106,63,214,.45); transform: translateY(-2px); }
.tcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tcard__icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.7rem; border-radius: 16px; background: linear-gradient(135deg, rgba(106,63,214,.12), rgba(11,156,134,.12)); }
.tag { display: inline-block; font-size: .76rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.tag--l1 { background: rgba(18,160,103,.12); color: #0b6e47; }
.tag--l2 { background: rgba(196,133,0,.14); color: #8a5a00; }
.tag--l3 { background: rgba(220,52,80,.12); color: #b0233a; }
.tcard h3 { font-size: 1.12rem; margin: 4px 0 0; }
.tcard__text { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; color: var(--text-2); }
.tcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.tcard__actions .btn { justify-content: center; }
.teach .empty { text-align: center; }
@media (max-width: 1000px) { .tcard { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 640px) { .tcard { flex-basis: 100%; } }

html:has(dialog[open]) { overflow: hidden; }
.plan-dlg { width: min(920px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 40px 80px -30px rgba(20,12,60,.55); overflow: hidden; }
.plan-dlg[open] { display: flex; flex-direction: column; }
.plan-dlg::backdrop { background: rgba(22,19,43,.55); backdrop-filter: blur(4px); }
.plan-dlg__head { display: grid; grid-template-columns: 52px 1fr 44px; gap: 14px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.plan-dlg__head h2 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); margin: 0; }
.plan-dlg__head p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.plan-dlg__x { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 1.05rem; cursor: pointer; }
.plan-dlg__x:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.plan-dlg__body { overflow-y: auto; padding: 4px 22px 22px; overscroll-behavior: contain; }
.plan-dlg__body > .plan__box { margin-top: 16px; }
.plan-dlg__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }
.plan-dlg .plan__pair { align-items: stretch; }
@media (max-width: 640px) {
  .plan-dlg { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .plan-dlg__head { grid-template-columns: 44px 1fr 44px; padding: 12px 14px; gap: 10px; }
  .plan-dlg__head .plan__icon { width: 44px; height: 44px; font-size: 1.3rem; }
  .plan-dlg__body { padding: 4px 14px 18px; }
  .plan-dlg__foot { padding: 12px 14px; }
  .plan-dlg__foot .btn { flex: 1 1 0; justify-content: center; }
}

/* ---------- Lojërat dhe mjetet: kokë kompakte, loja shihet në pamjen e parë ---------- */
.page-head--game { padding: clamp(18px, 3vw, 34px) 0 6px; }
.page-head--game h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 8px; }
.page-head--game .lead { font-size: 1rem; line-height: 1.55; margin-bottom: 0; }
.page-head--game + .container, .page-head--game + section { margin-top: 18px; }

/* Hyrja e lojës: kolona "Fillo" + kolona me rregullat, me gjerësi të barabartë */
.url:has(.game-intro), .esc:has(.game-intro) { max-width: 1080px; }
.game-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; text-align: left; }
.game-intro[hidden] { display: none; }
.game-intro__start { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(20px, 3vw, 32px) 20px; border-radius: 18px; background: radial-gradient(120% 120% at 50% 0%, rgba(106,63,214,.1), rgba(11,156,134,.05) 60%, transparent); border: 1px dashed rgba(106,63,214,.3); }
.game-intro__start h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.game-intro__start p { margin: 0; }
.game-intro__start .btn-row { justify-content: center; margin: 6px 0 0; }
.game-intro__start > .btn { margin-top: 6px; }
.game-intro__art { font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.1; letter-spacing: .08em; margin: 0; }
.game-intro__info > h2, .game-intro__info > h3 { font-size: 1.15rem; margin-top: 0; }
.game-intro__info .esc-rules { margin-bottom: 0; }
@media (max-width: 820px) { .game-intro { grid-template-columns: 1fr; } }

/* ---------- Lidhjet brenda faqes: titulli ndalet poshtë kokës (header) dhe nuk mbulohet ---------- */
:where([id]) { scroll-margin-top: 132px; }
.doc__body > section { scroll-margin-top: 132px; }
.doc__toc { top: 132px; max-height: calc(100vh - 152px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.doc__toc a[aria-current="true"] { color: var(--brand); border-left-color: var(--brand); font-weight: 600; background: var(--brand-soft); border-radius: 0 8px 8px 0; }
.sticky-progress { top: 120px; }
@media (max-width: 960px) {
  .doc__toc { max-height: none; overflow: visible; }
  .doc__toc a[aria-current="true"] { border-radius: 999px; }
}
@media (max-width: 640px) { :where([id]), .doc__body > section { scroll-margin-top: 116px; } }

/* Celular: butonat e përgjigjes te "Dallo mashtrimin" mbeten gjithmonë të dukshëm poshtë ekranit */
@media (max-width: 640px) {
  .page-head--game .eyebrow { display: none; }
  .verdict:has(button:not(:disabled)) { position: sticky; bottom: 0; z-index: 6; margin-inline: -16px; padding: 16px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(246,246,251,0), var(--bg) 32%); }
}

/* ==========================================================================
   Footer (stil si kren-ks.eu, me ngjyrat e Higjienës Kibernetike: vjollcë + gurkali)
   ========================================================================== */
.ftr {
  position: relative; overflow: hidden; margin-top: 72px; border: 0; color: rgba(255,255,255,.74); font-size: .95rem;
  background:
    radial-gradient(900px 340px at 6% 0%, rgba(106,63,214,.5), transparent 62%),
    radial-gradient(760px 320px at 100% 100%, rgba(11,156,134,.3), transparent 62%),
    linear-gradient(180deg, #1c1552 0%, #0f0b2e 100%);
}
/* rrjetë e hollë "kibernetike" + vija e sipërme me ngjyrat e top bar-it */
.ftr::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.ftr::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #4b2bb8, #6a3fd6 45%, #0b9c86); }
.ftr > * { position: relative; }
.ftr a { color: rgba(255,255,255,.78); text-decoration: none; }
.ftr a:hover { color: #7ef0dc; text-decoration: none; }
.ftr h2 { position: relative; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; padding-bottom: 10px; }
.ftr h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #8b6cff, #2fd9bf); }

.ftr__grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr) 1.35fr; gap: 36px; padding: 64px 0 40px; }
.ftr__logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ftr__logo img { height: 46px; width: auto; }
.ftr__sep { width: 1px; height: 34px; background: rgba(255,255,255,.25); }
.ftr__name { display: flex; flex-direction: column; line-height: 1.05; font-weight: 800; font-size: 1.05rem; color: #fff; }
.ftr__name b { font-weight: 800; background: linear-gradient(90deg, #b9a4ff, #5ff0d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftr__brand p { margin: 0 0 20px; line-height: 1.6; max-width: 340px; }
.ftr__social { display: flex; flex-wrap: wrap; gap: 10px; }
.ftr__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: transform .15s, background .15s, border-color .15s; }
.ftr__social a:hover, .ftr__social a:focus-visible { color: #fff; background: linear-gradient(135deg, #6a3fd6, #0b9c86); border-color: transparent; transform: translateY(-2px); }
.ftr__social svg { width: 18px; height: 18px; fill: currentColor; }

.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__col a { display: inline-block; transition: color .15s, transform .15s; }
.ftr__col a:hover { transform: translateX(3px); }

.ftr__contact-info { display: grid; gap: 12px; }
.ftr__line { display: flex; gap: 10px; align-items: flex-start; margin: 0; line-height: 1.55; }
.ftr__line svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: #a991ff; }
.ftr__line strong { color: #fff; font-weight: 600; }
.ftr__map { position: relative; display: block; margin-top: 18px; height: 130px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); transition: border-color .15s, transform .15s; }
.ftr__map:hover { border-color: rgba(126,240,220,.6); transform: translateY(-2px); }
.ftr__map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ftr__pin { position: absolute; left: 56%; top: 34%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #2fd9bf; box-shadow: 0 0 0 4px rgba(47,217,191,.3); }
.ftr__pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(47,217,191,.7); animation: ftrPulse 2s ease-out infinite; }
@keyframes ftrPulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.ftr__map-label { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: rgba(15,11,46,.82); color: #fff; font-size: .82rem; line-height: 1.3; backdrop-filter: blur(4px); }
.ftr__map-label small { color: #7ef0dc; font-weight: 600; }

.ftr__slogan { text-align: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); font-weight: 700; background: linear-gradient(90deg, #c4b2ff, #7ef0dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftr__bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 0 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: rgba(255,255,255,.6); }
.ftr__bottom p { margin: 0; }
.ftr__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.ftr__links .linklike { color: rgba(255,255,255,.78); }
.ftr__links .linklike[hidden] { display: none; }

@media (max-width: 1100px) {
  .ftr__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .ftr__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .ftr__brand p { max-width: 560px; }
  .ftr__social { justify-content: center; }
  .ftr__contact { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .ftr__contact h2 { grid-column: 1 / -1; }
  .ftr__map { margin-top: 0; }
}
@media (max-width: 640px) {
  .ftr { margin-top: 56px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 48px 0 32px; }
  .ftr__col--wide { grid-column: 1 / -1; }
  .ftr__col--wide ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .ftr__contact { grid-template-columns: 1fr; row-gap: 16px; }
}

/* ---------- Kartat e aplikacioneve: rreshta të plotë (6 → 3 + 3, 8 → 4 + 4) ---------- */
.app-grid:has(> :nth-child(8):last-child) > * { flex-basis: calc((100% - 3 * 20px) / 4); min-width: 0; }
.app-grid:has(> :nth-child(6):last-child) > * { flex-basis: calc((100% - 2 * 20px) / 3); min-width: 0; }
@media (max-width: 1100px) { .app-grid:has(> :nth-child(8):last-child) > *, .app-grid:has(> :nth-child(6):last-child) > * { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .app-grid:has(> :nth-child(8):last-child) > *, .app-grid:has(> :nth-child(6):last-child) > * { flex-basis: 100%; } }
.app-grid .app-head h3 { font-size: 1.1rem; }

/* ---------- Marrëveshja e familjes: fushat para printimit + fleta ---------- */
.agree-form { margin-bottom: 24px; text-align: center; }
.agree-form h2 { font-size: 1.15rem; margin: 0 0 14px; }
.agree-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; text-align: left; }
.agree-fields label { display: grid; gap: 6px; font-weight: 600; font-size: .88rem; color: var(--text-2); }
.agree-note { font-size: .82rem; margin: 12px 0 0; }
@media (max-width: 700px) { .agree-fields { grid-template-columns: 1fr; } }
.agree-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(20px, 4vw, 36px); }
.agree-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--brand); }
.agree-sheet__head img { height: 40px; width: auto; }
.agree-sheet__head div { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.agree-sheet__head span { color: var(--muted); font-size: .8rem; }
.agree-sheet__title { text-align: center; font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 18px 0 14px; }
.agree-sheet__who { display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; gap: 10px 16px; margin: 0 0 18px; }
.agree-sheet__who div { min-width: 0; }
.agree-sheet__who dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.agree-sheet__who dd { margin: 2px 0 0; min-height: 1.6em; border-bottom: 1px dashed var(--border-strong); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 700px) { .agree-sheet__who { grid-template-columns: 1fr 1fr; } }
.agree-sheet .agreement li::before { color: #fff; }
.agree-sheet .sign-row { margin-top: 28px; }

/* ---------- Printimi: pa menu, pa nën-menu, pa footer; marrëveshja në një fletë A4 ---------- */
@media print {
  .hdr, .subnav, .pager, .skip-link, .toast, .search-dialog { display: none !important; }
  @page agree { size: A4 portrait; margin: 12mm 14mm; }
  .agree { page: agree; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .agree-sheet { border: 0; padding: 0; border-radius: 0; box-shadow: none !important; background: #fff !important; }
  .agree-sheet__head img { height: 34px; }
  .agree-sheet__title { margin: 10px 0 10px; font-size: 1.35rem; }
  .agree-sheet__who { grid-template-columns: 2fr 1fr 2fr 1fr; margin-bottom: 12px; }
  .agree-sheet__who dd { border-bottom-color: #999; }
  .agree-sheet .agreement { gap: 6px; }
  .agree-sheet .agreement li { padding: 7px 10px; font-size: .92rem; break-inside: avoid; border-color: #ccc !important; background: #fff !important; color: #000 !important; }
  .agree-sheet .agreement li::before { background: #6a3fd6 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; width: 24px; height: 24px; font-size: .8rem; }
  .agree-sheet .sign-row { margin-top: 36px; break-inside: avoid; }
  .agree-sheet .sign-row div { border-top: 1px solid #555; color: #333; }
}

/* Mësimet dhe udhëzuesit: adresat e gjata thyhen, faqja nuk del jashtë ekranit */
.doc > * { min-width: 0; }
.doc__body, .doc__toc, .panel, .card { overflow-wrap: break-word; }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); } }
.setup-steps { grid-template-columns: minmax(0, 1fr); }
.setup-step, main p, main li { overflow-wrap: break-word; }
@media (max-width: 640px) { .doc__body table { width: 100%; font-size: .88rem; } .doc__body th, .doc__body td { overflow-wrap: anywhere; padding: 8px; } }

/* ---------- Mësimet në tablet/celular: përmbajtja si rresht horizontal që qëndron poshtë kokës ---------- */
@media (max-width: 960px) {
  .doc__toc { position: sticky; top: 111px; z-index: 20; margin: 0 0 4px; padding: 8px 0; background: rgba(246,246,251,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); max-height: none; overflow: visible; }
  .doc__toc ol { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .doc__toc ol::-webkit-scrollbar { display: none; }
  .doc__toc li { flex: none; }
  .doc__toc a { white-space: nowrap; font-size: .85rem; background: var(--surface); }
  .doc__toc a[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
  .doc__body > section, .doc :where([id]) { scroll-margin-top: 176px; }
}
@media (max-width: 640px) { :where([id]) { scroll-margin-top: 124px; } .doc__body > section, .doc :where([id]) { scroll-margin-top: 176px; } }

/* ---------- Rreshta të plotë sipas numrit të kartave ---------- */
/* Pasaporta: 15 medalje → 5 + 5 + 5, ose 3 në rresht kur kolona është e ngushtë */
.badges-grid > * { flex-basis: calc((100% - 4 * 12px) / 5); min-width: 0; }
@media (max-width: 1280px) and (min-width: 901px) { .badges-grid > * { flex-basis: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 640px) { .badges-grid > * { flex-basis: calc((100% - 2 * 12px) / 3); padding: 14px 6px; } .badge-tile small { font-size: .72rem; } }
/* Sfida: 30 ditë → 5 në rresht (6 rreshta), 3 në tablet, 2 në tablet të vogël */
.challenge-grid > * { flex-basis: calc((100% - 4 * 14px) / 5); min-width: 0; }
@media (max-width: 1200px) { .challenge-grid > * { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 900px) { .challenge-grid > * { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 640px) { .challenge-grid > * { flex-basis: 100%; } }
/* 9 ose 3 karta → 3 në rresht deri në tablet */
@media (max-width: 1100px) and (min-width: 641px) {
  .grid--3:has(> :nth-child(9):last-child) > *, .grid--3:has(> :nth-child(3):last-child) > * { flex-basis: calc((100% - 2 * 20px) / 3); min-width: 0; }
}
/* 4 ose 8 karta → 4 në rresht, 2 në tablet */
.grid--4:has(> :nth-child(4):last-child) > *, .grid--4:has(> :nth-child(8):last-child) > * { min-width: 0; }
@media (max-width: 1000px) and (min-width: 641px) {
  .grid--4:has(> :nth-child(4):last-child) > *, .grid--4:has(> :nth-child(8):last-child) > * { flex-basis: calc((100% - 20px) / 2); }
}
/* Pajisjet në kryefaqe: 8 → një rresht, 4 + 4 në tablet dhe celular */
.device-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1100px) { .device-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .device-row { gap: 8px; } .device-row a { padding: 14px 4px; font-size: .78rem; } .device-row a span { font-size: 1.6rem; } }
.email-why { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { .email-why { grid-template-columns: 1fr !important; } }

/* Aplikacionet: 6 pllaka → 6 në rresht, 3 + 3 në tablet, listë në celular */
.hub-grid > li { flex-basis: calc((100% - 5 * 14px) / 6); }
@media (max-width: 1100px) { .hub-grid > li { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 640px) { .hub-grid > li { flex-basis: 100%; } }

/* PEGI: 5 mosha në një rresht, 8 ikona 4 + 4, këshilla në fund */
.pegi-sub { text-align: center; font-size: 1.05rem; margin: 8px 0 14px; }
.pegi-grid + .pegi-sub { margin-top: 32px; }
.pegi-grid--ages > * { flex-basis: calc((100% - 4 * 12px) / 5); min-width: 0; }
.pegi-grid--icons > * { flex-basis: calc((100% - 3 * 12px) / 4); min-width: 0; }
.pegi-tip { max-width: 820px; margin: 28px auto 0; text-align: center; }
.pegi-tip h3 { font-size: 1.05rem; }
.pegi-tip p { margin: 0; color: var(--text-2); }
@media (max-width: 1000px) {
  .pegi-grid--ages > * { flex-basis: 100%; }
  .pegi-grid--icons > * { flex-basis: calc((100% - 12px) / 2); }
}
@media (max-width: 640px) { .pegi-grid--icons > * { flex-basis: 100%; } }
@media (hover: none) { .url-keys { display: none; } }

/* ==========================================================================
   Fletët e punës: gati për A4 (fleta e nxënësit në 1 faqe, çelësi në faqe të veçantë)
   ========================================================================== */
.sheet-note { font-size: .85rem; margin: 10px auto 0; max-width: 640px; }
.sheet__key-head { display: none; }
.sheet__key-tip { margin: 6px 0 0; font-size: .85rem; color: #555 !important; }
.sheet__write > li > p, .sheet__quiz > li > p { margin-bottom: 4px; }

@media print {
  @page sheet { size: A4 portrait; margin: 11mm 13mm 10mm; }
  .sheet-wrap { page: sheet; max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  .sheet { font-size: 10.5pt; line-height: 1.38; color: #111; }
  .sheet, .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet p { margin: 0 0 2px; }
  .sheet ol { margin: 0; padding-left: 1.5em; }
  .sheet h2 { font-size: 12.5pt; margin: 9px 0 4px; break-after: avoid; }
  .sheet__head { padding-bottom: 5px; border-bottom-width: 2px; }
  .sheet__head img { height: 26px; }
  .sheet__fields { margin: 8px 0 2px; gap: 22px; font-size: 10.5pt; }
  .sheet__sort { gap: 2px; }
  .sheet__sort .box { width: 12px; height: 12px; border-width: 1.5px; margin-right: 6px; }
  .sheet__quiz > li { margin-bottom: 3px; break-inside: avoid; }
  .sheet__opts { gap: 0 18px; margin: 0; }
  .sheet__write > li { break-inside: avoid; margin-bottom: 1mm; }
  .sheet .lines { height: 14.5mm; margin: 0; background: repeating-linear-gradient(transparent 0 7mm, #9a9a9a 7mm 7.25mm); }
  .sheet__foot { margin: 4mm 0 0 !important; font-size: 8.5pt; }
  /* Çelësi: vetëm me "Printo me çelës", gjithmonë në faqe të re */
  .sheet__key { display: none; }
  body.print-key .sheet__key { display: block; break-before: page; border: 2px dashed #8251df; margin-top: 0; }
  body.print-key .sheet__key-head { display: flex; margin-bottom: 10px; }
}
@media print {
  .sheet { font-size: 10pt; line-height: 1.32; }
  .sheet h2 { font-size: 12pt; margin: 7px 0 3px; }
  .sheet__fields { margin: 6px 0 0; }
  .sheet .lines { height: 13mm; background: repeating-linear-gradient(transparent 0 6.25mm, #9a9a9a 6.25mm 6.5mm); }
  .sheet__write > li > p, .sheet__quiz > li > p { margin-bottom: 1px; }
}

/* Elementet me atributin "hidden" fshihen gjithmonë (edhe kur kanë display: flex/grid) */
[hidden] { display: none !important; }

/* ==========================================================================
   Kuizi: simetrik dhe i qartë në kompjuter
   ========================================================================== */
.quiz { max-width: 1000px; }
.quiz-start .levels { gap: 18px; }
.quiz-start .levels > * { flex-basis: calc((100% - 2 * 18px) / 3); min-width: 0; }
.level { align-items: center; text-align: center; padding: 28px 22px 22px; }
.level .card__icon { width: 68px; height: 68px; font-size: 2rem; border-radius: 20px; margin: 0 auto 14px; }
.level h3 { margin: 0 0 8px; font-size: 1.25rem; }
.level__dots { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.level__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.level--easy .level__dots i.on { background: var(--success); }
.level--medium .level__dots i.on { background: var(--warning); }
.level--hard .level__dots i.on { background: var(--danger); }
.level p { margin: 0 0 12px; font-size: .95rem; }
.level__meta { font-size: .8rem; font-weight: 600; color: var(--muted); }
.level__best { margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .82rem; font-weight: 700; }
.level__cta { margin-top: auto; padding-top: 18px; width: 100%; }
.level__cta span { display: block; padding: 12px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; transition: filter .15s, transform .15s; }
.level:hover .level__cta span, .level:focus-visible .level__cta span { filter: brightness(1.08); transform: translateY(-1px); }
.quiz-how { margin-top: 28px; max-width: none; }

#quiz-play { padding: clamp(20px, 3vw, 36px); }
.quiz__top { font-weight: 600; }
.quiz__question { text-align: center; max-width: 820px; margin: 24px auto 26px; line-height: 1.35; }
.quiz .option { min-height: 64px; }
@media (min-width: 761px) {
  .quiz .options { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; }
}
.quiz__nav { align-items: center; }
.quiz__hint { flex: 1; text-align: center; color: var(--muted); font-size: .82rem; }
@media (hover: none), (max-width: 760px) { .quiz__hint { display: none; } }

/* Kuizi në telefon: kartat kompakte, të treja shihen pa skroll */
@media (max-width: 640px) {
  .quiz-start .levels { gap: 10px; }
  .quiz-start .levels > * { flex-basis: 100%; }
  .levels .level { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; text-align: left; padding: 14px 16px; }
  .levels .level .card__icon { width: 52px; height: 52px; font-size: 1.5rem; margin: 0; grid-row: span 3; border-radius: 14px; }
  .levels .level h3 { margin: 0; font-size: 1.1rem; }
  .level__dots { display: none; }
  .levels .level p { font-size: .88rem; line-height: 1.35; margin: 0; }
  .level__meta { font-size: .76rem; }
  .level__best { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .level__cta { grid-column: 1 / -1; padding-top: 10px; }
  .level__cta span { padding: 10px 14px; text-align: center; }
  .quiz-how { margin-top: 18px; }
}
.quiz-how { gap: 18px; }
.quiz-how > li { background: transparent; border-style: dashed; box-shadow: none; }

/* ==========================================================================
   Mashtrimet: një mashtrim në një kohë, me zgjedhës simetrik
   ========================================================================== */
.scam-picker { scroll-margin-top: 126px; }
.scam-picker .tile-grid { margin-bottom: 28px; }
/* Kompjuter: 6 + 6 pllaka kompakte */
@media (min-width: 1001px) {
  .scam-picker .tile-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .scam-picker .tile { padding: 18px 10px 14px; }
  .scam-picker .tile__icon { width: 50px; height: 50px; font-size: 1.6rem; }
  .scam-picker .tile strong { font-size: .9rem; }
}
.scam-picker .tile[aria-current="true"] { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-soft), var(--surface)); box-shadow: 0 0 0 3px rgba(106,63,214,.18); }
.scam-picker .tile[aria-current="true"] .tile__num { color: var(--brand); }
/* Celular: 3 + 3 + 3 + 3, pa tekstin e kanalit */
@media (max-width: 640px) {
  .scam-picker .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .scam-picker .tile { padding: 16px 6px 10px; }
  .scam-picker .tile__icon { width: 42px; height: 42px; font-size: 1.35rem; }
  .scam-picker .tile strong { font-size: .8rem; }
  .scam-picker .tile small { display: none; }
  .scam-picker .tile__num { top: 6px; left: 8px; font-size: .68rem; }
}

/* Me JavaScript: vetëm mashtrimi i zgjedhur */
.scam-page.is-tabs .scam { display: none; }
.scam-page.is-tabs .scam.is-active { display: block; animation: scamIn .25s ease; }
@keyframes scamIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Koka e kartës: kompakte, me shigjeta ‹ › në të dy anët (simetrike) */
.scam .scam__head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px; text-align: left; margin-bottom: 22px; padding-bottom: 18px; }
.scam__head-main { display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.scam .scam__icon { width: 68px; height: 68px; font-size: 2.1rem; flex: none; }
.scam__title { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scam .scam__head h2 { margin: 0; text-align: left; }
.scam__channels { justify-content: flex-start; }
.scam__arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 1.7rem; line-height: 1; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.scam__arrow:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.scam__arrow.is-off { visibility: hidden; }

/* Fundi i kartës: Para | Të gjitha | Tjetri */
.scam .scam__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.scam__nav-prev { text-align: left; }
.scam__nav-next { text-align: right; }
.scam__nav-all { padding: 6px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }

@media (max-width: 760px) {
  .scam .scam__head { grid-template-columns: 38px 1fr 38px; gap: 8px; }
  .scam__arrow { width: 38px; height: 38px; font-size: 1.4rem; }
  .scam__head-main { flex-direction: column; gap: 8px; text-align: center; }
  .scam__title { align-items: center; }
  .scam .scam__head h2 { text-align: center; font-size: 1.2rem; }
  .scam__channels { justify-content: center; }
  .scam .scam__icon { width: 56px; height: 56px; font-size: 1.7rem; }
  .scam .scam__nav { grid-template-columns: 1fr; text-align: center; }
  .scam__nav-prev, .scam__nav-next { text-align: center; }
  .scam__nav-all { order: 3; justify-self: center; }
}
/* Mashtrimet në kompjuter: karta më kompakte (pjesa më e madhe shihet pa skroll) */
@media (min-width: 1001px) {
  .scam { padding: 26px 32px 22px; }
  .scam .scam__head { margin-bottom: 18px; padding-bottom: 14px; }
  .scam .scam__icon { width: 58px; height: 58px; font-size: 1.8rem; border-radius: 18px; }
  .scam .scam__head h2 { font-size: 1.4rem; }
  .scam__cols { gap: 22px; }
  .scam__how p { font-size: .95rem; line-height: 1.55; margin-bottom: 8px; }
  .scam .scam__example blockquote { font-size: .92rem; }
  .scam .dodont { margin: 18px 0 14px; gap: 18px; }
  .scam .dodont > div { padding: 16px 20px; }
  .scam .dodont h3 { margin-bottom: 8px; }
  .scam .dodont ul { gap: 6px; }
  .scam .dodont li { font-size: .95rem; line-height: 1.5; }
  .scam .scam__victim summary { padding: 11px 18px; }
  .scam .scam__nav { margin-top: 14px; padding-top: 12px; }
}
/* Printimi në celular: "100vh" llogaritet sipas ekranit të gjatë të telefonit dhe krijonte një faqe të dytë bosh */
@media print {
  html, body { height: auto !important; min-height: 0 !important; }
  body { display: block !important; }
  main { flex: none !important; min-height: 0 !important; }
}

/* ==========================================================================
   DIZAJNI I NJËSUAR: ikona SVG, ngjyrë sipas seksionit, karta të njëjta
   ========================================================================== */
/* Ikonat */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.btn .ic { width: 1.2em; height: 1.2em; }

/* Ngjyra e seksionit: Mëso = vjollcë, Lojëra & Mjete = gurkali, Për të rriturit = portokalli */
:root, [data-tone="learn"], [data-section="learn"] { --sec: #6a3fd6; --sec-2: #8b6cff; --sec-soft: rgba(106,63,214,.10); --sec-ink: #4f2db0; }
[data-section="play"], [data-tone="play"] { --sec: #0b9c86; --sec-2: #2fd9bf; --sec-soft: rgba(11,156,134,.12); --sec-ink: #087766; }
[data-section="adults"], [data-tone="adults"] { --sec: #d9730d; --sec-2: #f5a524; --sec-soft: rgba(217,115,13,.12); --sec-ink: #9a4f05; }

/* Koka e faqes merr ngjyrën e seksionit */
body:not([data-section="home"]) .page-head { background: radial-gradient(900px 260px at 50% 0%, var(--sec-soft), transparent 70%); }
body:not([data-section="home"]) .page-head .eyebrow { color: var(--sec-ink); }
.h1-icon { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .35em; border-radius: .38em; background: var(--sec-soft); color: var(--sec); vertical-align: -0.28em; }
.h1-icon .ic { width: .82em; height: .82em; vertical-align: 0; }

/* Kutitë e ikonave: e njëjta formë kudo */
.card__icon, .tcard__icon, .plan__icon, .mega__ico, .trio > li > span, .tip-day__icon, .tile__icon {
  display: grid; place-items: center; flex: none; color: var(--sec); background: var(--sec-soft); border: 0;
}
.card__icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 16px; }
.card__icon .ic { width: 28px; height: 28px; }
.tcard__icon .ic, .plan__icon .ic { width: 26px; height: 26px; }
.trio > li > span .ic { width: 26px; height: 26px; }
.tip-day__icon .ic { width: 26px; height: 26px; }
.tile__icon .ic { width: 28px; height: 28px; }
.tile--warn .tile__icon { color: #c2364d; }
.mega__ico { width: 42px; height: 42px; border-radius: 12px; }
.mega__ico .ic { width: 22px; height: 22px; }
.mega__col--learn .mega__ico { color: #6a3fd6; background: rgba(106,63,214,.10); }
.mega__col--play .mega__ico { color: #0b9c86; background: rgba(11,156,134,.12); }
.mega__col--adults .mega__ico { color: #d9730d; background: rgba(217,115,13,.12); }
.mega__col--play a:hover strong { color: #087766; }
.mega__col--adults a:hover strong { color: #9a4f05; }
.mega__foot a { display: inline-flex; align-items: center; gap: 6px; }
.hdr__cta .ic { width: 1.15em; height: 1.15em; }

/* Kartat: e njëjta familje (rreze, kufi, hije, lëvizje) */
.card, .tile, .tcard, .app-card, .term, .challenge, .trio > li, .stat, .scam-tile, .agreement li, .panel {
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 1px 2px rgba(28,22,70,.04), 0 10px 26px -22px rgba(40,28,110,.25);
}
a.card, a.tile, .tcard, button.card, .level, .next-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.card:hover, a.tile:hover, .tcard:hover, button.card:hover, .next-card:hover {
  transform: translateY(-3px); border-color: var(--sec); box-shadow: 0 1px 2px rgba(28,22,70,.04), 0 22px 44px -26px rgba(40,28,110,.42);
}
.card__link { display: inline-flex; align-items: center; gap: 6px; color: var(--sec-ink); }
a.card:hover .card__link .ic { transform: translateX(3px); }
.card__link .ic { transition: transform .18s ease; }

/* Kryefaqja: rrugët dhe "Çfarë gjen këtu" */
.path-card .card__icon { margin-bottom: 14px; }
.path-links a { display: inline-flex; align-items: center; gap: 8px; }
.path-links .ic { color: var(--sec); }
.feat { align-items: flex-start; }
.feat h3 { font-size: 1.2rem; margin-bottom: 6px; }
.feat .card__link { margin-top: auto; padding-top: 14px; }
.chip span .ic, .orb .ic { width: 1em; height: 1em; vertical-align: -0.12em; }
.orb .ic { width: 26px; height: 26px; color: var(--brand); }
.cta--help { grid-template-columns: 1fr auto; }
.cta--help h2 { display: flex; align-items: center; gap: 10px; }
.cta--help h2 .ic { width: 1em; height: 1em; }
@media (max-width: 700px) { .cta--help { grid-template-columns: 1fr; text-align: center; } .cta--help h2 { justify-content: center; } }
.tips { margin-top: 24px; }

/* Mësimi tjetër */
.lesson-next { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.next-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(135deg, var(--sec-soft), var(--surface) 60%); color: var(--text); text-decoration: none; }
.next-card:hover { color: var(--text); text-decoration: none; }
.next-card .card__icon { margin: 0; }
.next-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.next-card__body small { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sec-ink); }
.next-card__body strong { font-size: 1.15rem; line-height: 1.3; }
.next-card__body > span { color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.next-card .btn { pointer-events: none; }
.lesson-next__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: .92rem; }
.lesson-next__row a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 640px) {
  .next-card { grid-template-columns: auto 1fr; }
  .next-card .btn { grid-column: 1 / -1; justify-content: center; }
  .lesson-next__row { flex-direction: column; align-items: center; text-align: center; }
}

/* Shiriti i leximit (mësimet dhe udhëzuesit e pajisjeve) */
.read-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: transparent; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sec), var(--sec-2)); border-radius: 0 3px 3px 0; transition: width .1s linear; }
@media print { .read-progress { display: none; } }

/* ==========================================================================
   Për prindërit
   ========================================================================== */
.parents { max-width: 1120px; scroll-margin-top: 126px; }
.age-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 720px; margin: 0 auto 24px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.age-tabs button { padding: 12px 10px; border-radius: 999px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.age-tabs button:hover { color: var(--sec-ink); background: var(--sec-soft); }
.age-tabs button[aria-selected="true"] { background: var(--sec); color: #fff; }
.age-panel { display: grid; gap: 18px; }
.age-panel + .age-panel { margin-top: 40px; }
.age-panel__head { text-align: center; max-width: 780px; margin: 0 auto 6px; }
.age-panel__badge { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--sec-soft); color: var(--sec-ink); font-weight: 700; font-size: .85rem; }
.age-panel__head h2 { margin: 10px 0 8px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.age-panel__head p { color: var(--text-2); margin: 0; }
.pboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 1px 2px rgba(28,22,70,.04), 0 10px 26px -22px rgba(40,28,110,.25); }
.pbox h3 { display: flex; align-items: center; gap: 12px; font-size: 1.08rem; margin: 0 0 12px; }
.pbox__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sec-soft); color: var(--sec); flex: none; }
.pbox__icon .ic { width: 22px; height: 22px; }
.pbox ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.pbox li { color: var(--text-2); }
.pbox__steps a { display: inline-block; margin-top: 2px; font-weight: 600; font-size: .9rem; color: var(--sec-ink); }
.pbox__talk { list-style: none; padding: 0 !important; }
.pbox__talk li { background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-style: italic; }
.pbox--wide { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.pbox--wide h3 { margin: 0; }
.pbox--wide p { margin: 0; color: var(--text-2); }
@media (max-width: 860px) {
  .pboxes { grid-template-columns: 1fr; }
  .pbox--wide { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 520px) { .age-tabs { border-radius: 18px; } .age-tabs button { border-radius: 12px; padding: 10px 6px; font-size: .92rem; } }
.steps-list { counter-reset: st; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps-list li { counter-increment: st; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; }
.steps-list li::before { content: counter(st); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--sec); }
.section-head h2 .ic { width: 1em; height: 1em; color: var(--sec); }

/* ==========================================================================
   Kuizi i klasës (projektor)
   ========================================================================== */
.cq { max-width: 1100px; }
.cq-setup { max-width: 900px; margin: 0 auto; display: grid; gap: 22px; }
.cq-setup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.cq-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; justify-items: center; text-align: center; }
.cq-field legend { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; width: 100%; }
.cq-names__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; width: 100%; }
.cq-names__grid label { display: flex; align-items: center; gap: 8px; }
.cq-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--team); flex: none; }
.cq-setup__go { justify-content: center; }
.cq-tip { text-align: center; font-size: .85rem; margin: 0; }
@media (max-width: 700px) { .cq-setup__grid { grid-template-columns: 1fr; } }
@media (hover: none) { .cq-tip { display: none; } }

.cq-play { display: grid; gap: 16px; }
.cq-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cq-team { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 16px; background: var(--surface); border: 2px solid var(--border); min-width: 160px; justify-content: space-between; transition: transform .2s, border-color .2s, box-shadow .2s; }
.cq-team__name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cq-team__name::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--team); }
.cq-team__score { font-size: 1.6rem; line-height: 1; color: var(--team); }
.cq-team.is-turn { border-color: var(--team); transform: translateY(-2px); box-shadow: 0 12px 28px -16px var(--team); }
.cq-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-weight: 700; color: var(--muted); }
.cq-status > :last-child { text-align: right; }
.cq-turn { padding: 6px 16px; border-radius: 999px; background: var(--team); color: #fff; }
.cq-clock { font-variant-numeric: tabular-nums; }
.cq-timebar { height: 10px; }
.cq-timebar span { transition: width 1s linear; }
.cq-timebar.is-low span { background: var(--danger); }
.cq-timebar.is-off { visibility: hidden; }
.cq-question { text-align: center; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.3; margin: 10px auto; max-width: 980px; }
.cq-options { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; }
.cq-option { font-size: clamp(1rem, 1.8vw, 1.3rem); padding: 18px 20px; min-height: 76px; }
.cq-option .option__key { width: 40px; height: 40px; font-size: 1.1rem; }
.cq-explain { font-size: 1.05rem; }
.cq-explain .cq-point { display: block; font-weight: 700; margin: 2px 0 6px; }
.cq-explain p { margin: 0; color: var(--text-2); }
.cq-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cq-controls #cq-next { margin-left: auto; }
@media (max-width: 700px) { .cq-options { grid-template-columns: 1fr; } .cq-status { grid-template-columns: 1fr; text-align: center; } .cq-status > :last-child { text-align: center; } .cq-controls #cq-next { margin-left: 0; width: 100%; } }

.cq-result { text-align: center; max-width: 760px; margin: 0 auto; }
.cq-trophy { font-size: 4.5rem; line-height: 1; }
.cq-winner { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0 4px; }
.cq-podium { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; }
.cq-podium li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); text-align: left; }
.cq-podium li.is-win { border-color: var(--team); background: linear-gradient(90deg, color-mix(in srgb, var(--team) 12%, transparent), var(--surface)); }
.cq-podium__rank { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--team); }
.cq-podium__name { font-weight: 700; font-size: 1.15rem; }
.cq-podium b { font-size: 1.15rem; }

/* Ekran i plotë për projektor */
.cq:fullscreen { max-width: none; overflow: auto; padding: 3vh 4vw; background: var(--bg); }
.cq:fullscreen .cq-question { font-size: clamp(2rem, 4vw, 3.4rem); max-width: 1400px; }
.cq:fullscreen .cq-option { font-size: clamp(1.2rem, 2.2vw, 1.8rem); min-height: 110px; }
.cq:fullscreen .cq-team { min-width: 220px; font-size: 1.2rem; }
.cq:fullscreen .cq-team__score { font-size: 2.2rem; }
.tip-day__icon { width: 52px; height: 52px; border-radius: 16px; font-size: 0; }

/* ==========================================================================
   Kryefaqja kompakte
   ========================================================================== */
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.section-head--tight { margin-bottom: 24px; }
.section-head--tight h2 { margin-bottom: 6px; }

/* Numrat brenda hero-s */
.hero__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 28px; margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); }
.hero__stats > div { min-width: 0; }
.hero__stats dt { font-size: 1.55rem; font-weight: 800; line-height: 1.1; background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__stats dt.stat__word { font-size: 1.55rem; white-space: nowrap; }
.hero__stats dd { margin: 2px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.3; }
.hero__trust { margin-top: 16px; }
@media (max-width: 640px) { .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; } }

/* Për kë: 4 karta kompakte, një klik */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.aud { padding: 20px; }
.aud .card__icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; }
.aud .card__icon .ic { width: 24px; height: 24px; }
.aud h3 { font-size: 1.05rem; margin: 0 0 4px; }
.aud p { font-size: .9rem; margin: 0; flex: 1; }
.aud .card__link { margin-top: 12px; font-size: .9rem; }
@media (max-width: 1000px) { .aud-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .aud-grid { gap: 10px; }
  .aud { padding: 14px; }
  .aud .card__icon { width: 40px; height: 40px; margin-bottom: 8px; }
  .aud h3 { font-size: .95rem; }
  .aud p { font-size: .82rem; }
  .aud .card__link { font-size: .82rem; }
}

/* Çfarë gjen këtu: 6 pllaka horizontale (3 + 3) */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ftile { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; color: var(--text); }
.ftile .card__icon { width: 46px; height: 46px; border-radius: 13px; margin: 0; }
.ftile .card__icon .ic { width: 23px; height: 23px; }
.ftile__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ftile__text strong { font-size: 1rem; line-height: 1.3; }
.ftile__text small { color: var(--muted); font-size: .85rem; }
.ftile > .ic { color: var(--sec); width: 20px; height: 20px; transition: transform .18s ease; }
.ftile:hover > .ic { transform: translateX(3px); }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; gap: 10px; } .ftile { padding: 12px 14px; } }

/* Fundi: Këshilla e ditës + Ndihmë, dy kuti të barabarta */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.band .tip-day { margin: 0; }
.band .cta--help { grid-template-columns: 1fr auto; padding: 22px 26px; border-radius: var(--radius); }
.band .cta--help h2 { font-size: 1.25rem; margin-bottom: 4px; }
.band .cta--help p { font-size: .92rem; }
@media (max-width: 900px) { .band { grid-template-columns: 1fr; } }
/* Kryefaqja në celular: pa ilustrimin dekorativ, pllakat në 2 kolona */
@media (max-width: 900px) {
  .hero .hero-art { display: none; }
}
@media (max-width: 640px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ftile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .ftile > .ic { display: none; }
  .ftile__text strong { font-size: .92rem; }
  .ftile__text small { font-size: .78rem; }
}
/* Kryefaqja: vetëm "Këshilla e ditës" në fund, në gjerësi të plotë */
.band { grid-template-columns: 1fr; max-width: 1000px; margin-inline: auto; }
@media (max-width: 600px) {
  .tip-day { display: grid; grid-template-columns: 48px 1fr; gap: 12px 14px; align-items: center; padding: 16px; }
  .tip-day__icon { width: 48px; height: 48px; }
  .tip-day .btn { grid-column: 1 / -1; justify-self: end; margin: 0; }
  .tip-day__text { font-size: 1rem; }
}

/* ==========================================================================
   Kryefaqja: hero me video në pamjen e parë
   ========================================================================== */
@property --hv-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.vhero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 4vw, 56px) 0 clamp(36px, 5vw, 64px); }
@media (min-width: 1024px) and (min-height: 640px) { .vhero { min-height: calc(100svh - 111px); display: flex; align-items: center; } }

/* Sfondi: rrjetë e hollë + dy drita që lëvizin ngadalë */
.vhero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vhero__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(106,63,214,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(106,63,214,.07) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 65% 45%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 65% 45%, #000 25%, transparent 75%); }
.vhero__orb { position: absolute; border-radius: 50%; filter: blur(50px); }
.vhero__orb--1 { width: 620px; height: 620px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(106,63,214,.38), transparent 65%); animation: vhOrb 16s ease-in-out infinite alternate; }
.vhero__orb--2 { width: 520px; height: 520px; left: -200px; bottom: -220px; background: radial-gradient(circle, rgba(11,156,134,.30), transparent 65%); animation: vhOrb 20s ease-in-out infinite alternate-reverse; }
@keyframes vhOrb { to { transform: translate(50px, 40px) scale(1.1); } }

/* Rrjeta: teksti majtas, videoja e madhe djathtas */
.vhero__grid { display: grid; width: min(100% - 48px, var(--container));
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
  grid-template-areas: "eyebrow media" "title media" "sub media" "lead media" "cta media" "stats media";
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: clamp(28px, 4.5vw, 72px); align-content: center; }
.vhero__eyebrow { grid-area: eyebrow; justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.vhero__title { grid-area: title; font-size: clamp(2.5rem, 5.1vw, 5rem); line-height: 1.02; letter-spacing: -.035em; margin: 12px 0 14px; }
.vhero__grad { background: linear-gradient(90deg, #6a3fd6, #5b4cf5 30%, #0b9c86 65%, #6a3fd6); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vhShine 9s linear infinite; }
@keyframes vhShine { to { background-position: 220% center; } }
.vhero__sub { grid-area: sub; margin: 0 0 14px; font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.3; color: var(--text); }
.vhero__lead { grid-area: lead; margin: 0 0 24px; max-width: 520px; font-size: clamp(1rem, 1.15vw, 1.12rem); color: var(--text-2); }
.vhero__cta { grid-area: cta; margin: 0; }
.vhero__stats { grid-area: stats; align-self: start; }
.vhero__media { grid-area: media; position: relative; align-self: center; }

/* Korniza e videos me buzë që shkëlqen dhe rrotullohet */
.hv-frame { position: relative; padding: 3px; border-radius: 30px; background: conic-gradient(from var(--hv-angle), #6a3fd6, #2fd9bf, #5b4cf5, #f5a524, #6a3fd6); animation: hvSpin 8s linear infinite; box-shadow: 0 50px 100px -45px rgba(91,76,245,.75), 0 18px 40px -24px rgba(11,156,134,.45); }
@keyframes hvSpin { to { --hv-angle: 360deg; } }
.hv { position: relative; overflow: hidden; border-radius: 27px; aspect-ratio: 16 / 9; background: #15103a; }
.hv video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #fff; background: linear-gradient(180deg, rgba(20,14,60,0) 45%, rgba(20,14,60,.6)); }
.hv__btn { position: relative; width: clamp(66px, 7.5vw, 104px); height: clamp(66px, 7.5vw, 104px); display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 20px 44px -12px rgba(0,0,0,.5); transition: transform .2s ease; }
.hv__btn svg { width: 40%; height: 40%; margin-left: 9%; fill: #5b4cf5; }
.hv__btn::before, .hv__btn::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); animation: hvPulse 2.6s ease-out infinite; }
.hv__btn::after { animation-delay: 1.3s; }
@keyframes hvPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.hv__play:hover .hv__btn, .hv__play:focus-visible .hv__btn { transform: scale(1.07); }
.hv__label { position: absolute; left: 18px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border-radius: 14px; background: rgba(15,11,46,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: left; line-height: 1.25; }
.hv__label strong { font-size: 1rem; }
.hv__label small { display: inline-flex; align-items: center; gap: 5px; color: #b8f5ea; font-size: .8rem; }
.hv.is-playing .hv__play { display: none; }

/* Çipat që notojnë rreth videos (vetëm në kompjuter) */
.hv-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--text); font-weight: 700; font-size: .9rem; white-space: nowrap; box-shadow: 0 18px 36px -18px rgba(40,28,110,.55); animation: vhFloat 6s ease-in-out infinite; transition: opacity .3s; }
.hv-chip .ic { color: var(--brand); }
.hv-chip b { color: var(--success); }
.hv-chip--1 { left: -34px; top: 12%; }
.hv-chip--2 { right: -18px; top: -22px; animation-delay: -2s; }
.hv-chip--3 { right: 9%; bottom: 38px; animation-delay: -4s; }
@keyframes vhFloat { 50% { transform: translateY(-9px); } }
.vhero__media.is-playing .hv-chip { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) { .hv-chip { display: none; } }

.vhero__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 22px 0 0; padding: 0; color: var(--muted); font-size: .88rem; }
.vhero__trust li::before { content: "✓ "; color: var(--accent); font-weight: 700; }

/* Tablet dhe celular: titulli, menjëherë videoja, pastaj butonat (gjithçka në mes) */
@media (max-width: 900px) {
  .vhero__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "eyebrow" "title" "sub" "media" "lead" "cta" "stats"; text-align: center; }
  .vhero__eyebrow { justify-self: center; }
  .vhero__title { font-size: clamp(2.3rem, 8.6vw, 3.6rem); margin: 10px 0 10px; }
  .vhero__sub { margin-bottom: 18px; }
  .vhero__media { margin: 0 0 22px; }
  .vhero__lead { margin: 0 auto 20px; }
  .vhero__cta { justify-content: center; }
  .vhero__stats { justify-content: center; text-align: center; }
  .hv-frame { border-radius: 22px; }
  .hv { border-radius: 19px; }
  .vhero__trust { margin-top: 14px; }
}
@media (max-width: 520px) {
  .vhero__eyebrow { font-size: .68rem; letter-spacing: .1em; }
  .vhero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .vhero__cta .btn { justify-content: center; padding-inline: 10px; font-size: .95rem; }
  .hv__label { left: 10px; bottom: 10px; padding: 6px 10px; }
  .hv__label strong { font-size: .88rem; }
  .vhero__trust { font-size: .8rem; gap: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vhero__orb, .vhero__grad, .hv-frame, .hv__btn::before, .hv__btn::after, .hv-chip { animation: none !important; }
}
/* Butoni i videos: "pilulë" e madhe poshtë në mes (nuk mbulon tekstin e kopertinës) */
.hv__play { place-items: end center; padding-bottom: clamp(14px, 3%, 26px); background: linear-gradient(180deg, rgba(20,14,60,0) 55%, rgba(20,14,60,.55)); }
.hv__pill { display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--text); box-shadow: 0 22px 44px -18px rgba(0,0,0,.55); transition: transform .2s ease; }
.hv__play:hover .hv__pill, .hv__play:focus-visible .hv__pill { transform: translateY(-2px) scale(1.03); }
.hv__pill .hv__btn { width: clamp(44px, 4.2vw, 58px); height: clamp(44px, 4.2vw, 58px); background: linear-gradient(135deg, #6a3fd6, #5b4cf5); box-shadow: none; }
.hv__pill .hv__btn svg { fill: #fff; }
.hv__pill .hv__btn::before, .hv__pill .hv__btn::after { inset: -6px; border-color: rgba(106,63,214,.55); }
.hv__pill .hv__label { position: static; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hv__pill .hv__label strong { font-size: clamp(.95rem, 1.2vw, 1.1rem); color: var(--text); }
.hv__pill .hv__label small { color: var(--muted); }
@media (max-width: 520px) { .hv__pill { gap: 10px; padding: 6px 16px 6px 6px; } }
/* Butoni poshtë djathtas (hapësira e lirë e kopertinës); çipat në buzët e kornizës */
.hv__play { place-items: end end; padding: 0 clamp(14px, 2.4%, 24px) clamp(14px, 3%, 24px) 0; }
.hv-chip--1 { left: 5%; top: -24px; right: auto; bottom: auto; }
.hv-chip--2 { right: 5%; top: -24px; left: auto; bottom: auto; }
.hv-chip--3 { left: -28px; bottom: 22%; right: auto; top: auto; }
@media (max-width: 900px) { .hv__play { place-items: end center; padding: 0 0 14px; } }
.hv-chip--3 { left: 6%; bottom: -24px; top: auto; }
@media (min-width: 1181px) { .vhero__trust { margin-top: 40px; } }
.hv-frame { position: relative; }
.vhero__title { font-size: clamp(2.5rem, min(5.1vw, 8.6vh), 5rem); }
@media (max-width: 900px) { .vhero__title { font-size: clamp(2.3rem, 8.6vw, 3.6rem); } }
/* Ekrane të mëdha: hero më i gjerë, video më e madhe */
@media (min-width: 1500px) {
  .vhero__grid { width: min(100% - 96px, 1640px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); column-gap: 80px; }
  .vhero__title { font-size: clamp(4.4rem, min(4.6vw, 8.6vh), 5.6rem); }
  .vhero__sub { font-size: 1.7rem; }
  .vhero__lead { font-size: 1.2rem; max-width: 560px; }
}
/* Hero me video në celular: etiketa në një rresht, butoni i videos në qoshe, butonat pa ndarje rreshti */
@media (max-width: 520px) {
  .vhero__eyebrow { letter-spacing: .06em; font-size: .62rem; }
  .vhero__eyebrow .ic { display: none; }
  .hv__play { place-items: end end; padding: 0 10px 10px 0; background: none; }
  .hv__pill { padding: 5px; gap: 0; }
  .hv__pill .hv__label { display: none; }
  .hv__pill .hv__btn { width: 46px; height: 46px; }
  .vhero__cta .btn { font-size: .92rem; padding: 14px 8px; white-space: nowrap; }
}
@media (max-width: 400px) { .vhero__cta .btn .ic { display: none; } }
@media (max-width: 900px) { .vhero__grid { width: min(100% - 32px, var(--container)); } }

/* ==========================================================================
   FILTRAT DHE KËRKIMI: një stil modern i njëjtë kudo
   ========================================================================== */
/* Kutia e kërkimit */
.fsearch { position: relative; width: 100%; }
.fsearch > .ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; transition: color .15s; }
.fsearch .fsearch__input.input { width: 100%; height: 54px; padding: 0 54px 0 50px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 1rem; box-shadow: inset 0 1px 2px rgba(28,22,70,.04); transition: border-color .15s, box-shadow .15s; }
.fsearch .fsearch__input.input::placeholder { color: #8c88a6; }
.fsearch .fsearch__input.input:focus { outline: none; border-color: var(--sec); box-shadow: 0 0 0 4px var(--sec-soft); }
.fsearch:focus-within > .ic { color: var(--sec); }
.fsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fsearch__clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s; }
.fsearch__clear:hover { background: var(--sec-soft); color: var(--sec-ink); }
.fsearch__clear .ic { width: 16px; height: 16px; }

/* Kontrolli me segmente: shina gri, opsioni aktiv ngrihet si kartë e bardhë */
.seg { display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; padding: 5px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); vertical-align: middle; }
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-width: 0; padding: 9px 16px; margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .18s, color .18s, box-shadow .18s, transform .18s; }
.seg button:hover, .seg a:hover { color: var(--sec-ink); background: rgba(255,255,255,.65); text-decoration: none; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"], .seg button.active, .seg a[aria-current="true"] {
  background: var(--surface); color: var(--sec-ink); border-color: transparent;
  box-shadow: 0 1px 2px rgba(28,22,70,.08), 0 8px 18px -10px rgba(40,28,110,.45);
}
.seg button:focus-visible, .seg a:focus-visible { outline: 2px solid var(--sec); outline-offset: 1px; }
.ldot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.ldot--1 { background: #12a067; }
.ldot--2 { background: #e0a100; }
.ldot--3 { background: #dc3450; }
.tag .ldot { width: 8px; height: 8px; margin-right: 6px; box-shadow: none; vertical-align: 1px; }

/* Paneli i filtrave */
.filters { max-width: 940px; margin: 0 auto 28px; display: grid; gap: 16px; justify-items: stretch; padding: 18px; text-align: left; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(28,22,70,.04), 0 22px 46px -34px rgba(40,28,110,.45); }
.filters--simple { max-width: 720px; }
.filters__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.fgroup { display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; min-width: 0; }
.fgroup__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.filters__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }
.fcount { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--sec-soft); color: var(--sec-ink); font-weight: 700; font-size: .84rem; }
.fcount .ic { width: 15px; height: 15px; }
.freset { font-weight: 600; font-size: .86rem; color: var(--sec-ink); }
@media (max-width: 760px) {
  .filters { padding: 14px; border-radius: 24px; gap: 14px; }
  .filters__groups { grid-template-columns: 1fr; }
  .fsearch .fsearch__input.input { height: 50px; font-size: .98rem; }
}

/* Fjalori: shkronjat si shinë */
.seg.letters { margin: 0; }
.seg.letters button { min-width: 38px; padding: 8px 10px; }

/* Pyetje të shpeshta: kategoritë */
.seg--nav { margin-top: 18px; }

/* Për prindërit: skedat e moshës, më të mëdha */
.seg--tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 26px; grid-template-columns: none; }
.seg--tabs button { padding: 12px 26px; font-size: 1rem; }
@media (max-width: 520px) { .seg--tabs button { padding: 10px 16px; font-size: .92rem; } }

/* Kuizi i klasës: shinat brenda cilësimeve */
.cq-field .seg { margin: 0 auto; }
/* Paneli i filtrave: aq i gjerë sa të shihen të gjitha opsionet në kompjuter */
.filters { max-width: 1080px; }
.filters--simple { max-width: 720px; }
.filters--simple:has(.letters) { max-width: 1000px; }
@media (min-width: 761px) { .filters .seg button { padding: 9px 14px; } .seg.letters button { min-width: 34px; padding: 8px 8px; } }
/* Shina që rrëshqet: zbehje në buzën ku ka më shumë opsione */
.seg[data-fade="end"] { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.seg[data-fade="start"] { -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent); mask-image: linear-gradient(270deg, #000 82%, transparent); }
.seg[data-fade="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
@media (max-width: 900px) { .filters__groups { grid-template-columns: 1fr; } }
/* Kryefaqja në celular: titulli, videoja dhe butonat në një ekran, pa scroll */
@media (max-width: 520px) {
  .vhero { min-height: calc(100svh - 111px); display: flex; align-items: center; padding: 12px 0 16px; }
  .vhero__eyebrow { display: none; }
  .vhero__title { font-size: clamp(1.95rem, 8.6vw, 2.45rem); line-height: 1.04; margin: 0 0 8px; }
  .vhero__sub { font-size: 1rem; line-height: 1.35; margin: 0 0 14px; }
  .vhero__media { margin: 0 0 16px; }
  .vhero__lead { display: none; }
  .vhero__cta .btn { padding: 13px 8px; }
}
@media (max-width: 520px) and (max-height: 620px) {
  .vhero__title { font-size: 1.8rem; }
  .vhero__sub { font-size: .92rem; margin-bottom: 10px; }
  .vhero__media { margin-bottom: 12px; }
}
@media (max-width: 520px) and (min-height: 621px) {
  .vhero__title { font-size: clamp(2.2rem, 10.6vw, 2.95rem); line-height: 1.02; margin-bottom: 10px; }
  .vhero__sub { font-size: 1.04rem; margin-bottom: 18px; }
  .vhero__media { margin-bottom: 20px; }
}