/* ==========================================================================
   MARKA — logo GL w apce (marka.js; od 5.10.2026). Klasy "mk-".
   Kolory jak w rozruchu (rozruch.css --rz-g / --rz-l): G = akcent 58%
   z granatem, L = akcent 75% z biela. Swiatlo od spodu w PRZYGASZONYM
   akcencie (45% z czarnym) — w pelnym akcencie dolna krawedz liter ginela.
   ========================================================================== */
:root {
  --mk-g: color-mix(in srgb, var(--accent) 58%, #0a0f1a);
  --mk-l: color-mix(in srgb, var(--accent) 75%, #fff);
  --mk-swiatlo: color-mix(in srgb, var(--accent) 45%, #000);
}
.mk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* satyna: miekkie pasy odbic (stopnie gradientow z marka.js) */
.mk-sg0 { stop-color: color-mix(in srgb, var(--mk-g) 70%, #fff); }
.mk-sg1 { stop-color: var(--mk-g); }
.mk-sg2 { stop-color: color-mix(in srgb, var(--mk-g) 60%, #000); }
.mk-sg3 { stop-color: color-mix(in srgb, var(--mk-g) 80%, #fff); }
.mk-sg4 { stop-color: color-mix(in srgb, var(--mk-g) 75%, #000); }
.mk-sl0 { stop-color: color-mix(in srgb, var(--mk-l) 55%, #fff); }
.mk-sl1 { stop-color: var(--mk-l); }
.mk-sl2 { stop-color: color-mix(in srgb, var(--mk-l) 70%, #000); }
.mk-sl3 { stop-color: color-mix(in srgb, var(--mk-l) 80%, #fff); }
.mk-sl4 { stop-color: color-mix(in srgb, var(--mk-l) 75%, #000); }
.mk-pw0 { stop-color: var(--mk-swiatlo); stop-opacity: 0.9; }
.mk-pw1 { stop-color: var(--mk-swiatlo); stop-opacity: 0.4; }
.mk-pw2 { stop-color: var(--mk-swiatlo); stop-opacity: 0; }

.mk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-svg .mk-g { fill: url(#mk-satG); }
.mk-svg .mk-l, .mk-svg .mk-pro { fill: url(#mk-satL); }
.mk-svg .mk-obrys { fill: none; stroke: url(#mk-satL); stroke-width: 16; stroke-linejoin: miter; }
.mk-svg .mk-posw { fill: url(#mk-posw); }
.mk-svg .mk-pro { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 62px; letter-spacing: 9px; }

/* smuga swiatla: raz po starcie (.mk-blysk z marka.js) i przy najechaniu (PC) */
.mk-smuga { transform: translateX(-420px); }
.mk-blysk .mk-smuga { animation: mk-smuga 1.15s cubic-bezier(0.45, 0, 0.3, 1) 1; }
@media (hover: hover) {
  .mk-pc:hover .mk-smuga { animation: mk-smuga 1.15s cubic-bezier(0.45, 0, 0.3, 1) 1; }
}
@keyframes mk-smuga { from { transform: translateX(-420px); } to { transform: translateX(520px); } }
@media (prefers-reduced-motion: reduce) {
  .mk-blysk .mk-smuga, .mk-pc:hover .mk-smuga { animation: none; }
}

/* PC: gora lewej kolumny — pelne logo + napis (wariant PB) */
.mk-pc {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mk-pc .mk-zn { width: 92px; aspect-ratio: 451 / 273; flex-shrink: 0; }
.mk-nz {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 3px;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.mk-nz b { color: var(--mk-l); margin-left: 6px; }
.mk-sub {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: #5b6770;
  margin-top: 6px;
}

/* telefon: znak w linii marki (wariant M2) — napis w styles.css (.nav-brand-name) */
.mk-tel { width: 30px; aspect-ratio: 399 / 219; flex-shrink: 0; display: block; }