/* ============================================================
   FETAI · MK · Shtresa e fundit
   Këtu qëndron ajo që e dallon drfetai.mk nga faqja gjermane:
   kokat me kalim ngjyrash, flamujt e gjuhës, shiriti i Tetovës,
   rrjetet sociale dhe tabelat e çmimeve.
   Ngarkohet e fundit, prandaj fjala e saj është e fundit.
   ============================================================ */

/* ---------- 1 · KOKA E FAQES: kalim ngjyrash, jo një jeshile e vetme ----------
   Çdo nënfaqe merr tri ndalesa ngjyre (--ha, --hb, --hc). Ato janë
   gjithmonë brenda familjes jade, vetëm temperatura ndryshon: një
   faqe e fytyrës rrjedh drejt smeraldit, një faqe e trupit drejt
   blusë së thellë. Ari mbetet vetëm si vijë. */
.page-hero {
  --ha: #123c2c;
  --hb: #0a1a13;
  --hc: #05120d;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(201,169,110,0.20) 0%, rgba(201,169,110,0.07) 34%, rgba(201,169,110,0) 62%),
    radial-gradient(95% 80% at 12% 96%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(152deg, var(--ha) 0%, var(--hb) 46%, var(--hc) 100%);
  isolation: isolate;
}
/* Aurora: një lëvizje e vetme, shumë e ngadaltë. Sa për të mos qenë e vdekur. */
.page-hero .hero-aurora {
  position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(38% 46% at 22% 30%, rgba(120,160,154,0.30), rgba(120,160,154,0) 70%),
    radial-gradient(34% 40% at 74% 66%, rgba(201,169,110,0.22), rgba(201,169,110,0) 72%),
    radial-gradient(30% 34% at 52% 12%, rgba(42,99,70,0.35), rgba(42,99,70,0) 70%);
  filter: blur(14px);
  animation: mkAurora 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes mkAurora {
  from { transform: translate3d(-2.4%, -1.6%, 0) scale(1.02); }
  to   { transform: translate3d(2.6%, 2.2%, 0) scale(1.09); }
}
/* Kufiri i poshtëm: një vijë ari mbi një hije të butë. */
.page-hero .hero-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,14,10,0) 0%, rgba(4,14,10,0.34) 58%, rgba(4,14,10,0.72) 100%);
}
/* Kur faqja nuk ka foto, teksti merr tërë gjerësinë dhe qëndron majtas. */
.page-hero.no-photo::after { display: none; }
.page-hero.no-photo::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 100%);
  opacity: 0.5;
}
.page-hero.no-photo .page-hero-inner { grid-template-columns: minmax(0, 1fr); }
.page-hero.no-photo .page-hero-text { grid-column: 1; max-width: 31em; padding-right: 0; }
/* Një monogram i madh, gati i padukshëm, si vulë në letër. */
.page-hero .hero-seal {
  position: absolute; right: -3%; bottom: -14%; z-index: 0; width: min(46vw, 560px); height: auto;
  color: var(--gold); opacity: 0.055; pointer-events: none;
}
.page-hero-text { position: relative; z-index: 2; }

/* Fjalët në krye të kokës: mbi kalimin duhet një kontrast më i fortë. */
.page-hero-label { color: var(--gold-bright); }
.page-hero h1 em { color: var(--gold-bright); font-style: italic; }
.page-hero-lead { color: rgba(246,243,238,0.94); }

/* ---------- 2 · SHIRITI I TETOVËS NËN KOKË ----------
   E para gjë që sheh njeriu pasi mbaron koka: ku dhe kur. */
.mk-when {
  background: linear-gradient(180deg, #04120c 0%, var(--forest-deep) 40%, var(--forest) 100%);
  border-bottom: 1px solid rgba(201,169,110,0.20);
}
.mk-when-inner {
  max-width: 1440px; margin: 0 auto; padding: 26px var(--pad-side);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); flex-wrap: wrap;
}
.mk-when-item { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.mk-when-item i {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.38); color: var(--gold); background: rgba(201,169,110,0.05);
}
.mk-when-item b {
  display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.22em; color: rgba(224,200,150,0.78); margin-bottom: 3px;
}
.mk-when-item span, .mk-when-item a {
  display: block; font-family: var(--body); font-size: 17px; line-height: 1.4;
  color: rgba(242,240,234,0.9); text-decoration: none;
}
.mk-when-item a:hover { color: var(--gold-bright); }
.mk-when-cta { margin-left: auto; }
@media (max-width: 900px) { .mk-when-cta { margin-left: 0; width: 100%; } .mk-when-cta .cta-outline { width: 100%; } }

/* ---------- 3 · FLAMUJT E GJUHËS ---------- */
.lang-flags { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.lang-flags .flag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px;
  border: 1px solid rgba(201,169,110,0.26); border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,0.02);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lang-flags .flag svg { border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.lang-flags .flag span {
  font-family: var(--ui); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(242,240,234,0.62);
}
.lang-flags .flag:hover { border-color: rgba(201,169,110,0.62); background: rgba(201,169,110,0.10); }
.lang-flags .flag:hover span { color: var(--gold-bright); }
.lang-flags .flag-on { border-color: rgba(201,169,110,0.62); background: rgba(201,169,110,0.13); }
.lang-flags .flag-on span { color: var(--gold-bright); }
@media (max-width: 1180px) { .lang-flags .flag span { display: none; } .lang-flags .flag { padding: 5px 6px; } }
@media (max-width: 560px) { .lang-flags { margin-right: 2px; gap: 2px; } }

/* Shënimi nën flamuj, brenda menysë së telefonit */
.mk-lang-note {
  font-family: var(--ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242,240,234,0.45); margin-top: 10px;
}

/* ---------- 4 · KËMBA E FAQES ---------- */
.footer-claim {
  font-family: var(--body); font-size: 17px; line-height: 1.65; color: rgba(242,240,234,0.62);
  margin-top: 18px; max-width: 24em;
}
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.30); color: rgba(224,200,150,0.85);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.footer-social a:hover { color: var(--forest); background: var(--gold); border-color: var(--gold); }

/* ---------- 5 · NDALESA E TETOVËS: karta e muajit ---------- */
.mk-city { background: linear-gradient(168deg, var(--cream) 0%, var(--cream-warm) 62%, var(--linen) 100%); }
.mk-city-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 84px); align-items: start;
}
@media (max-width: 900px) { .mk-city-grid { grid-template-columns: minmax(0, 1fr); } }
.mk-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(162deg, var(--forest-mid) 0%, var(--forest) 55%, var(--forest-deep) 100%);
  border: 1px solid rgba(201,169,110,0.24); box-shadow: var(--lift-rest-dark);
  padding: clamp(30px, 3.6vw, 48px);
}
.mk-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 80% 0%, rgba(201,169,110,0.16), rgba(201,169,110,0) 70%);
}
.mk-card > * { position: relative; }
.mk-card .lbl {
  font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.24em; color: var(--gold); display: block; margin-bottom: 14px;
}
.mk-card h3 { font-family: var(--display); font-size: var(--fs-sub); color: var(--cream); line-height: 1.18; margin-bottom: 14px; }
.mk-card p { color: rgba(242,240,234,0.76); font-size: var(--fs-small); }
.mk-adr {
  margin: 22px 0; padding: 20px 22px; border: 1px solid rgba(201,169,110,0.24);
  border-radius: var(--radius); background: rgba(255,255,255,0.035);
}
.mk-adr b { display: block; font-family: var(--body); font-size: 19px; color: var(--cream); margin-bottom: 4px; }
.mk-adr span { display: block; color: rgba(242,240,234,0.7); font-size: var(--fs-small); }
.mk-adr a { color: var(--gold-bright); text-decoration: none; border-bottom: 1px solid rgba(201,169,110,0.4); }
.mk-list { list-style: none; margin: 18px 0 0; padding: 0; }
.mk-list li {
  position: relative; padding-left: 26px; margin-bottom: 11px; color: rgba(242,240,234,0.8); font-size: var(--fs-small);
}
.mk-list li::before {
  content: ''; position: absolute; left: 0; top: 0.72em; width: 13px; height: 1px; background: var(--gold); opacity: 0.75;
}

/* ---------- 6 · RRJETI I QYTETEVE ---------- */
.mk-cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-top: 30px; }
.mk-cities span {
  display: block; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper), var(--cream-warm));
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.mk-cities span b { display: block; font-family: var(--body); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 3px; }

/* ---------- 7 · TABELA E ÇMIMEVE ---------- */
.mk-price { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mk-price caption {
  text-align: left; font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-light); padding-bottom: 14px;
}
.mk-price th {
  text-align: left; font-family: var(--ui); font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-light); padding: 0 16px 12px 0; border-bottom: 1px solid var(--border-gold);
}
.mk-price td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); vertical-align: top; }
.mk-price td:first-child { color: var(--text); font-size: var(--fs-item); font-family: var(--display); }
.mk-price td.eur { color: var(--text); white-space: nowrap; font-family: var(--ui); font-size: 14px; letter-spacing: 0.04em; }
.mk-price tr:last-child td { border-bottom: none; }
.mk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 8 · KARTAT E TRAJTIMEVE NË PËRMBLEDHJE ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; perspective: 1400px; }
.mk-tile {
  position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: var(--radius);
  padding: 34px 32px 30px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--cream-warm));
  box-shadow: var(--lift-rest);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.mk-tile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease);
}
.mk-tile:hover { box-shadow: var(--lift-hover); }
.mk-tile:hover::before { transform: scaleX(1); }
.mk-tile i {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border-gold); color: var(--gold-deep); margin-bottom: 20px;
}
.mk-tile b { display: block; font-family: var(--display); font-size: var(--fs-card); color: var(--text); margin-bottom: 9px; }
.mk-tile p { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: 16px; }
.mk-tile em {
  font-style: normal; font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep); display: inline-flex; align-items: center; gap: 8px;
}
.mk-tile.dark {
  background: linear-gradient(162deg, var(--forest-mid), var(--forest) 58%, var(--forest-deep));
  border-color: rgba(201,169,110,0.26); box-shadow: var(--lift-rest-dark);
}
.mk-tile.dark b { color: var(--cream); }
.mk-tile.dark p { color: rgba(242,240,234,0.74); }
.mk-tile.dark i { color: var(--gold); border-color: rgba(201,169,110,0.4); }
.mk-tile.dark em { color: var(--gold-bright); }

/* ---------- 9 · RRJEDHA E DY KOLONAVE PËR FAQET E THJESHTA ---------- */
.mk-two { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 92px); }
@media (max-width: 980px) { .mk-two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 10 · SHIRITI I RRJETEVE SOCIALE ---------- */
.mk-social-band {
  background: linear-gradient(150deg, #0d2a1f 0%, var(--forest) 52%, var(--forest-deep) 100%);
  position: relative; overflow: hidden;
}
.mk-social-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(52% 78% at 84% 12%, rgba(201,169,110,0.16), rgba(201,169,110,0) 68%);
}
.mk-social-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.mk-social-grid a {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px; text-decoration: none;
  border: 1px solid rgba(201,169,110,0.22); border-radius: var(--radius); background: rgba(255,255,255,0.035);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.mk-social-grid a:hover { border-color: rgba(201,169,110,0.6); background: rgba(201,169,110,0.09); }
.mk-social-grid i { flex: none; color: var(--gold); display: grid; place-items: center; }
.mk-social-grid b { display: block; font-family: var(--body); font-size: 19px; color: var(--cream); }
.mk-social-grid span { display: block; font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,240,234,0.5); margin-top: 3px; }

/* ---------- 11 · GJËRA TË VOGLA ---------- */
.nav-flag { position: relative; }
.nav-flag::after {
  content: ''; position: absolute; right: -9px; top: 2px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.18);
}
.mk-note {
  font-family: var(--ui); font-size: 12px; letter-spacing: 0.1em; color: var(--text-light);
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 34px;
}
.mk-lead { font-size: var(--fs-lead); line-height: 1.42; font-family: var(--display); color: var(--text); }
.mk-center { text-align: center; max-width: 40em; margin: 0 auto; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.mk-actions.center { justify-content: center; }

/* Kutia e theksuar brenda tekstit */
.mk-pull {
  border-left: 2px solid var(--gold); padding: 4px 0 4px 24px; margin: 28px 0;
  font-family: var(--display); font-style: italic; font-size: var(--fs-sub); line-height: 1.34; color: var(--text);
}
.prose-section.dark .mk-pull, [data-tone="dark"] .mk-pull { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .page-hero .hero-aurora { animation: none; }
}

/* ---------- 12 · CELULARI ----------
   Pa foto në kokë nuk ka nevojë për hapësirën që e mban foton.
   Dhe kokëza e faqes duhet të hyjë brenda 360 pikselave, pa u prerë. */
@media (max-width: 900px) {
  .page-hero.no-photo .page-hero-inner {
    padding-top: clamp(52px, 12vw, 88px);
    padding-bottom: clamp(48px, 11vw, 84px);
  }
  .page-hero .hero-seal { width: min(74vw, 420px); right: -14%; bottom: -8%; opacity: 0.05; }
  .page-hero.no-photo .hero-veil { height: 34%; }
}
@media (max-width: 700px) {
  .header-inner { gap: 12px; }
  .lang-flags { gap: 3px; margin-right: 2px; }
  .lang-flags .flag { padding: 5px; border-radius: 6px; }
  .header .icon-btn { display: none; }
  .header .search-toggle { display: inline-flex; }
  .logo img { height: 36px !important; }
  .header.scrolled .logo img { height: 32px !important; }
}
@media (max-width: 480px) {
  .header .search-toggle { display: none; }
  .lang-flags .flag svg { width: 19px; height: 13px; }
}
/* Emrat e gjatë në menynë e kompjuterit nuk duhet të thyhen në dy rreshta. */
@media (min-width: 901px) {
  .mainnav .nav-link { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1560px) {
  .mainnav { gap: 16px; }
  .mainnav .nav-link { font-size: 11.5px; letter-spacing: 0.08em; }
  .header-inner { gap: 20px; }
  .header-actions { gap: 6px; }
  .header .icon-btn { width: 34px; height: 34px; }
}

/* ---------- 13 · SHIRITI I TETOVËS NË CELULAR ---------- */
@media (max-width: 760px) {
  .mk-when-inner { padding: 20px var(--pad-side); gap: 16px; }
  .mk-when-item { width: 100%; }
  .mk-cities { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Shiriti anësor largohet sapo fillon këmba e faqes, që të mos mbulojë lidhjet. */
.float-bar.fshehur {
  opacity: 0; visibility: hidden; transform: translateX(24px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.float-bar { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }

/* ============================================================
   14 · LËVIZJA
   Njerëzit shohin para se të lexojnë. Prandaj çdo pjesë e faqes
   hyn me një lëvizje të vetme, të ngadaltë dhe të matur: fotot
   zbulohen me perde, numrat numërojnë, shiriti rrjedh, kartat
   ngrihen. Asgjë nuk kërcen. Të gjitha ndalen me
   prefers-reduced-motion.
   ============================================================ */

/* ---------- 14.1 Koka e ballinës: fotoja merr frymë ---------- */
.hero .hero-photo {
  animation: photoIn 1.8s var(--ease) both, kenBurns 26s ease-out 1.8s infinite alternate;
  transform-origin: 72% 32%;
}
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.055); } }
.hero-aurora--home {
  position: absolute; inset: -12%; z-index: 1; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(34% 40% at 18% 26%, rgba(120,160,154,0.28), rgba(120,160,154,0) 70%),
    radial-gradient(30% 36% at 62% 72%, rgba(201,169,110,0.20), rgba(201,169,110,0) 72%);
  filter: blur(18px);
  animation: mkAurora 30s cubic-bezier(0.45,0,0.55,1) infinite alternate;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep); animation: riseIn 0.9s var(--ease) 0.2s both;
}
.hero-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,169,110,0.6); animation: pulse 2.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201,169,110,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
}
.hero h1 em { font-style: italic; color: var(--gold-deep); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 38px;
  animation: riseIn 1s var(--ease) 1.05s both; }
.hero-badges span {
  display: flex; flex-direction: column; font-family: var(--ui); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light);
  padding-left: 16px; border-left: 1px solid var(--border-gold);
}
.hero-badges b {
  font-family: var(--display); font-size: 30px; letter-spacing: 0; text-transform: none;
  color: var(--forest); line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .hero-badges span { color: rgba(242,240,234,0.6); border-color: rgba(201,169,110,0.3); }
  .hero-badges b { color: var(--gold-bright); }
  .hero-eyebrow { color: var(--gold-bright); }
  .hero h1 em { color: var(--gold-bright); }
}

/* ---------- 14.2 Shigjeta e rrëshqitjes ---------- */
.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; z-index: 4; width: 1px; height: 46px;
  background: linear-gradient(180deg, rgba(201,169,110,0), var(--gold));
  overflow: hidden; opacity: 0.7;
}
.hero-scroll i {
  position: absolute; left: -1px; top: 0; width: 3px; height: 14px; border-radius: 2px;
  background: var(--gold-bright); animation: scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot { 0% { transform: translateY(-16px); opacity: 0; }
  35% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
@media (max-width: 760px) { .hero-scroll { display: none; } }

/* ---------- 14.3 Fotot zbulohen me perde ---------- */
.reveal-img { overflow: hidden; }
.reveal-img img {
  clip-path: inset(0 0 100% 0); transform: scale(1.08);
  transition: clip-path 1.15s var(--ease), transform 1.6s var(--ease);
}
.reveal-img.seen img { clip-path: inset(0 0 0 0); transform: scale(1); }
html:not(.js) .reveal-img img { clip-path: none; transform: none; }

/* ---------- 14.4 Shiriti rrjedhës ---------- */
.mk-ticker {
  overflow: hidden; background: var(--forest); border-top: 1px solid rgba(201,169,110,0.18);
  border-bottom: 1px solid rgba(201,169,110,0.18); padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mk-ticker-row {
  display: flex; align-items: center; gap: 18px; width: max-content;
  animation: tickerRun 46s linear infinite;
}
.mk-ticker:hover .mk-ticker-row { animation-play-state: paused; }
.mk-ticker-row span {
  font-family: var(--ui); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,240,234,0.72); white-space: nowrap;
}
.mk-ticker-row i { color: var(--gold); font-style: normal; }
@keyframes tickerRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 14.5 Kartat me fotografi ---------- */
.mk-grid--photo { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.mk-tile--photo { padding: 0; display: flex; flex-direction: column; }
.mk-tile-img {
  display: block; overflow: hidden; aspect-ratio: 4/3; background: var(--cream-dark);
  border-bottom: 1px solid var(--line);
}
.mk-tile-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); filter: saturate(0.95);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
}
.mk-tile--photo:hover .mk-tile-img img { transform: scale(1.09); filter: saturate(1.05); }
.mk-tile-body { display: block; padding: 26px 28px 28px; }
.mk-tile--photo i { margin-bottom: 16px; width: 40px; height: 40px; }
.mk-tile--photo em { transition: gap 0.35s var(--ease); }
.mk-tile--photo:hover em { gap: 14px; }

/* ---------- 14.6 Pyetjet e shpejta ---------- */
.mk-paa { background: linear-gradient(180deg, var(--cream), var(--cream-warm)); }
.mk-paa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.mk-paa-item {
  padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper), var(--cream-warm));
  box-shadow: var(--lift-rest); position: relative; overflow: hidden;
  transition: box-shadow var(--t-mid) var(--ease);
}
.mk-paa-item::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-bright));
  transform: scaleY(0); transform-origin: top; transition: transform var(--t-mid) var(--ease);
}
.mk-paa-item:hover { box-shadow: var(--lift-hover); }
.mk-paa-item:hover::after { transform: scaleY(1); }
.mk-paa-item h3 {
  font-family: var(--display); font-size: var(--fs-item); color: var(--text);
  line-height: 1.32; margin-bottom: 12px;
}
.mk-paa-item p { color: var(--text-muted); font-size: var(--fs-small); }
.mk-paa-item strong { color: var(--text); font-weight: 600; }

/* ---------- 14.7 Kutia e përfundimeve ---------- */
.mk-takeaway {
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(201,169,110,0.07), rgba(201,169,110,0.02));
  padding: 28px 30px; margin-bottom: var(--gap-m);
}
.mk-takeaway b {
  display: block; font-family: var(--ui); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px;
}
.mk-takeaway ul { list-style: none; margin: 0; padding: 0; }
.mk-takeaway li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--text); font-size: var(--fs-small); line-height: 1.62;
}
.mk-takeaway li:last-child { margin-bottom: 0; }
.mk-takeaway li span {
  position: absolute; left: 0; top: 0.62em; width: 13px; height: 1px; background: var(--gold);
}
.mk-takeaway strong { color: var(--forest); }

/* ---------- 14.8 Fotoja me bluzën e bardhë nën kokë ---------- */
.mk-coat { background: linear-gradient(180deg, var(--cream), var(--cream-warm)); }
.mk-coat-inner {
  max-width: 1440px; margin: 0 auto; padding: clamp(56px, 6vw, 96px) var(--pad-side);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: clamp(30px, 4.5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .mk-coat-inner { grid-template-columns: minmax(0, 1fr); } }
.mk-coat-photo {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border-gold); box-shadow: var(--lift-rest);
}
.mk-coat-photo img { display: block; width: 100%; height: auto; }
.mk-coat-photo::after {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(201,169,110,0.28);
  pointer-events: none;
}
.mk-coat-text h2 {
  font-family: var(--display); font-size: var(--fs-section); color: var(--text);
  line-height: 1.14; margin: 14px 0 18px;
}
.mk-coat-text h2 em { font-style: italic; color: var(--gold-deep); }
.mk-coat-text p { color: var(--text-muted); }

/* ---------- 14.9 Fotoja në kartën e Tetovës ---------- */
.mk-card-photo {
  margin: -1px -1px 26px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
  position: relative;
}
.mk-card-photo img { display: block; width: calc(100% + 2px); height: auto; }
.mk-card-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,18,13,0) 40%, rgba(5,18,13,0.55) 100%);
}

/* ---------- 14.10 Butonat magnetikë ---------- */
[data-magnet] { will-change: transform; transition: transform 0.45s var(--ease); }

/* ---------- 14.11 Numrat ---------- */
.hero-stat b { font-variant-numeric: tabular-nums; }

/* ---------- 14.12 Titujt hyjnë fjalë për fjalë ---------- */
.js .split-w { display: inline-block; opacity: 0; transform: translateY(0.42em); }
.js .seen .split-w, .js .split-w.seen {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ---------- 14.13 Ndriçim që ndjek treguesin në sipërfaqet e errëta ---------- */
[data-tone="dark"], .mk-social-band, .facts-section.dark, .prose-section.dark {
  position: relative;
}
.mk-spot {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(201,169,110,0.12), rgba(201,169,110,0) 70%);
  transition: opacity 0.5s var(--ease);
}
.mk-spot.on { opacity: 1; }

/* ---------- 14.14 Qetësi për ata që e kërkojnë ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-photo, .hero-aurora, .hero-aurora--home, .mk-ticker-row,
  .hero-scroll i, .hero-eyebrow i { animation: none !important; }
  .reveal-img img { clip-path: none !important; transform: none !important; }
  .js .split-w { opacity: 1 !important; transform: none !important; }
  [data-magnet] { transition: none; }
}

/* ============================================================
   15 · BLLOQET E REJA
   Vija kohore, kombinimet, fjalorthi, qytetet dhe krahasimi i
   çmimeve. Secili hyn me një lëvizje të vetme dhe me vonesë
   sipas radhës, që syri të ndjekë rendin e leximit.
   ============================================================ */

/* ---------- 15.1 Vija kohore e rezultatit ---------- */
.mk-timeline { background: linear-gradient(180deg, var(--cream), var(--cream-warm)); }
.mk-tl { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.mk-tl::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(201,169,110,0.15));
}
.mk-tl-item { position: relative; padding: 0 0 34px; }
.mk-tl-item:last-child { padding-bottom: 0; }
.mk-tl-dot {
  position: absolute; left: -34px; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px var(--cream);
}
.mk-tl-item.in .mk-tl-dot { animation: dotPop 0.6s var(--ease) both; }
@keyframes dotPop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mk-tl-when {
  display: inline-block; font-family: var(--ui); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px;
}
.mk-tl-item b {
  display: block; font-family: var(--display); font-size: var(--fs-sub); color: var(--text);
  line-height: 1.2; margin-bottom: 8px;
}
.mk-tl-item p { color: var(--text-muted); font-size: var(--fs-small); max-width: 46em; }
@media (min-width: 900px) {
  .mk-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 40px 0 0; }
  .mk-tl::before { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, var(--gold), rgba(201,169,110,0.15)); }
  .mk-tl-item { padding: 30px 0 0; }
  .mk-tl-dot { left: 0; top: -30px; }
}

/* ---------- 15.2 Kombinimet ---------- */
.mk-combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; perspective: 1400px; }
.mk-combo {
  position: relative; display: block; text-decoration: none; padding: 34px 32px 30px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper), var(--cream-warm));
  box-shadow: var(--lift-rest); overflow: hidden;
  transition: box-shadow var(--t-mid) var(--ease);
}
.mk-combo::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease);
}
.mk-combo:hover { box-shadow: var(--lift-hover); }
.mk-combo:hover::before { transform: scaleX(1); }
.mk-combo-plus {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border-gold); color: var(--gold-deep); font-family: var(--display);
  font-size: 22px; line-height: 1; margin-bottom: 20px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mk-combo:hover .mk-combo-plus { background: var(--gold); color: var(--forest); }
.mk-combo b { display: block; font-family: var(--display); font-size: var(--fs-card); color: var(--text); margin-bottom: 10px; }
.mk-combo p { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: 16px; }
.mk-combo em {
  font-style: normal; font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 8px;
  transition: gap var(--t-fast) var(--ease);
}
.mk-combo:hover em { gap: 14px; }

/* ---------- 15.3 Kutia "kjo është zgjedhja juaj nëse" ---------- */
.mk-ideale {
  margin-top: var(--gap-m); padding: 34px 34px 30px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--forest-mid), var(--forest) 58%, var(--forest-deep));
  border: 1px solid rgba(201,169,110,0.26); box-shadow: var(--lift-rest-dark);
  position: relative; overflow: hidden;
}
.mk-ideale::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 64% at 88% 0%, rgba(201,169,110,0.16), rgba(201,169,110,0) 70%);
}
.mk-ideale > * { position: relative; }
.mk-ideale b {
  display: block; font-family: var(--ui); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.mk-ideale ul { list-style: none; margin: 0 0 26px; padding: 0; }
.mk-ideale li {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 13px;
  color: rgba(242,240,234,0.88); font-size: var(--fs-small); line-height: 1.55;
}
.mk-ideale li i { flex: none; color: var(--gold-bright); margin-top: 3px; }
.mk-ideale .cta-primary { width: 100%; }

/* ---------- 15.4 Fjalorthi ---------- */
.mk-glossary { background: linear-gradient(180deg, var(--cream-warm), var(--cream)); }
.mk-term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px; margin: 0; }
.mk-term {
  padding: 26px 28px; background: var(--paper); border: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease);
}
.mk-term:hover { background: linear-gradient(180deg, var(--paper), var(--cream-warm)); }
.mk-term dt { margin: 0 0 8px; }
.mk-term dfn {
  font-style: normal; font-family: var(--display); font-size: var(--fs-item); color: var(--text);
  border-bottom: 1px solid var(--border-gold); padding-bottom: 2px;
}
.mk-term dd { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- 15.5 Krahasimi i çmimeve ---------- */
.mk-price--cmp td.mk-hi { color: var(--forest); font-weight: 600; }
.mk-price--cmp tr td:last-child {
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.12em; color: var(--gold-deep);
}
.mk-price--cmp tbody tr { transition: background-color var(--t-fast) var(--ease); }
.mk-price--cmp tbody tr:hover { background: var(--gold-ghost); }

/* ---------- 15.6 Qytetet ---------- */
.mk-city-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.mk-city-card {
  padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper), var(--cream-warm));
  box-shadow: var(--lift-rest); position: relative; overflow: hidden;
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.mk-city-card:hover { box-shadow: var(--lift-hover); transform: translateY(-3px); }
.mk-city-card b {
  display: block; font-family: var(--display); font-size: var(--fs-card); color: var(--text); margin-bottom: 4px;
}
.mk-city-card span {
  display: inline-block; font-family: var(--ui); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px;
}
.mk-city-card p { color: var(--text-muted); font-size: 15.5px; line-height: 1.55; }

/* ---------- 15.7 Hyrja me radhë ---------- */
.js .mk-tl-item, .js .mk-combo, .js .mk-term, .js .mk-city-card,
.js .mk-paa-item, .js .mk-ideale li {
  opacity: 0; transform: translateY(18px);
}
.js .mk-tl-item.in, .js .mk-combo.in, .js .mk-term.in, .js .mk-city-card.in,
.js .mk-paa-item.in, .js .mk-ideale.in li {
  opacity: 1; transform: none;
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .mk-ideale.in li { transition-delay: calc(var(--li, 0) * 60ms); }
html:not(.js) .mk-tl-item, html:not(.js) .mk-combo, html:not(.js) .mk-term,
html:not(.js) .mk-city-card, html:not(.js) .mk-paa-item { opacity: 1; transform: none; }

/* ---------- 15.8 Titujt marrin një vijë ari që vizatohet ---------- */
.section-header { position: relative; }
.section-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 72px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease) 0.15s;
}
.section-header.in::after { transform: scaleX(1); }

/* ---------- 15.9 Sprova e rrëshqitjes: shiriti i sipërm ---------- */
.progress i { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }

/* ---------- 15.10 Butoni kryesor merr frymë ---------- */
@media (prefers-reduced-motion: no-preference) {
  .float-bar .float-btn:first-child::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(201,169,110,0.5); animation: pulse 3.6s ease-out infinite;
  }
  .float-bar .float-btn:first-child { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .js .mk-tl-item, .js .mk-combo, .js .mk-term, .js .mk-city-card,
  .js .mk-paa-item, .js .mk-ideale li { opacity: 1 !important; transform: none !important; }
  .section-header::after { transform: scaleX(1); }
  .mk-tl-item.in .mk-tl-dot { animation: none; }
}

/* ============================================================
   16 · LEVIZJA E FUNDIT
   Katër shtesa të vogla që e mbajnë faqen gjallë pa e bërë të
   shqetësuar: shiriti i sipërm i leximit, menyja anësore që di
   ku je, kartat që ngrihen kur hyjnë, dhe fotot që marrin
   frymë kur qëndrojnë të ndaluara.
   ============================================================ */

/* ---------- 16.1 Menyja e kërcimit di ku je ---------- */
.jump-inner a.aktiv {
  color: var(--gold-bright);
}
.jump-inner a.aktiv::after {
  transform: scaleX(1);
}
.jump-inner a {
  position: relative;
}
.jump-inner a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}

/* ---------- 16.2 Fotot marrin frymë kur ndalen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .shot-frame img, .zone-frame img, .mk-coat-photo img {
    animation: fryme 24s ease-in-out infinite alternate;
  }
  .shot-frame:hover img, .zone-frame:hover img { animation-play-state: paused; }
}
@keyframes fryme { from { transform: scale(1); } to { transform: scale(1.035); } }
.shot-frame, .zone-frame, .mk-coat-photo { overflow: hidden; }

/* ---------- 16.3 Kartat ngrihen kur hyjnë ---------- */
.js .aeo-item, .js .sib-card, .js .trust-item, .js .fact-item {
  opacity: 0; transform: translateY(16px) scale(0.985);
}
.js .aeo-item.in, .js .sib-card.in, .js .trust-item.in, .js .fact-item.in,
.js .aeo-item.rise.in, .js .trust-item.rise.in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
html:not(.js) .aeo-item, html:not(.js) .sib-card,
html:not(.js) .trust-item, html:not(.js) .fact-item { opacity: 1; transform: none; }

/* ---------- 16.4 Vija e artë nën titullin e seksionit të errët ---------- */
[data-tone="dark"] .section-header::after,
.prose-section.dark .section-header::after,
.facts-section.dark .section-header::after,
.mk-social-band .section-header::after {
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}

/* ---------- 16.5 Shiriti i leximit ---------- */
.progress { height: 2px; }
.progress i { transition: width 0.12s linear; }

/* ---------- 16.6 Lidhjet brenda tekstit marrin nënvijë të artë ---------- */
.prose-block a:not(.cta-primary):not(.cta-outline):not(.link-quiet),
.mk-paa-item a, .mk-term dd a {
  color: var(--text); text-decoration: none;
  background-image: linear-gradient(90deg, var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  border-bottom: 1px solid var(--border-gold);
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
}
.prose-block a:not(.cta-primary):not(.cta-outline):not(.link-quiet):hover,
.mk-paa-item a:hover, .mk-term dd a:hover {
  background-size: 100% 1px; color: var(--gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .shot-frame img, .zone-frame img, .mk-coat-photo img { animation: none; }
  .js .aeo-item, .js .sib-card, .js .trust-item, .js .fact-item {
    opacity: 1 !important; transform: none !important;
  }
}