/* ============================================================
   style.css — Temesi Márk portfólió
   Ez a fájl az élesben futott, bevált design rendszert tükrözi
   (2026.08.28-i állapot alapján rekonstruálva és formázva).
   ============================================================ */

:root {
  --bg: #000807;
  --surface: #161929;
  --elevated: #2C2A4A;
  --text: #EDE6FA;
  --text2: #D3C6F1;
  --muted: #B9A6E8;
  --accent: #907AD6;
  --accent-d: #4F518C;
  --accent-l: #DABFFF;
  --pop: #9D4EDD;
  --btn: #5B3F9E;
  --btn-h: #7C5CD6;
  --btn-hfg: #fff;
  --st-fg: #DABFFF;
  --st-bg: rgba(144, 122, 214, .18);
  --st-bd: rgba(144, 122, 214, .4);
  --accent-rgb: 144, 122, 214;
  --border: rgba(var(--accent-rgb), .25);
  --glass: rgba(255, 255, 255, .04);
  --shadow: rgba(0, 0, 0, .6);
}

.lm {
  --bg: #F5EEDF;
  --surface: #ECDFC6;
  --elevated: #E4D2AE;
  --text: #2A170D;
  --text2: #3B2515;
  --muted: #6A4A33;
  --accent: #7A4A2C;
  --accent-d: #592D1B;
  --accent-l: #8A6446;
  --accent-rgb: 122, 74, 44;
  --btn: #3D2B26;
  --btn-h: #5E3E35;
  --btn-hfg: #fff;
  --pop: #3D2B26;
  --st-fg: #592D1B;
  --st-bg: rgba(224, 192, 140, .55);
  --st-bd: rgba(89, 45, 27, .3);
  --border: rgba(var(--accent-rgb), .22);
  --glass: rgba(var(--accent-rgb), .06);
  --shadow: rgba(50, 20, 5, .2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Quicksand', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  transition: background .4s ease, color .4s ease;
  overflow-x: hidden;
}

#pb {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  transition: width .1s linear;
}

#aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ab {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .12;
  animation: aA 18s ease-in-out infinite;
}

@keyframes aA {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(60px, -40px) scale(1.15);
  }

  66% {
    transform: translate(-40px, 50px) scale(.88);
  }
}

#bgc {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
}

.geo {
  position: absolute;
  pointer-events: none;
  opacity: .06;
  animation: gf 22s ease-in-out infinite;
}

.lm .geo {
  background: rgba(var(--accent-rgb), .85) !important;
}

@keyframes gf {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(22px, -28px) rotate(90deg);
  }

  50% {
    transform: translate(-16px, -18px) rotate(180deg);
  }

  75% {
    transform: translate(26px, 14px) rotate(270deg);
  }
}

#grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .011;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(var(--accent-rgb), 1) 50px), repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(var(--accent-rgb), 1) 50px);
}

.lm #grid {
  opacity: .025;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
}

.gt {
  background: linear-gradient(135deg, var(--accent), var(--accent-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gt-pop {
  background: linear-gradient(135deg, var(--accent), var(--pop));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.rv.on {
  opacity: 1;
  transform: translateY(0);
}

.d1 {
  transition-delay: .1s
}

.d2 {
  transition-delay: .2s
}

.d3 {
  transition-delay: .3s
}

.d4 {
  transition-delay: .4s
}

.sec {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 5rem 1rem;
  position: relative;
}

@supports (min-height:100dvh) {
  @media (max-width:767px) {
    .sec {
      min-height: 100dvh;
    }
  }
}

#tnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background .35s, box-shadow .35s;
}

#tnav.sc {
  background: rgba(0, 8, 7, .98);
  box-shadow: 0 1px 0 var(--border);
}

.lm #tnav.sc {
  background: rgba(245, 238, 223, .99);
}

.nl {
  position: relative;
  color: var(--muted);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s, background .2s;
  padding: .28rem .6rem;
  border-radius: .45rem;
}

.nl::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: .6rem;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s;
}

.nl:hover,
.nl.on {
  color: var(--accent);
}

.nl.on {
  background: rgba(var(--accent-rgb), .07);
}

.nl:hover::after,
.nl.on::after {
  width: calc(100% - 1.2rem);
}

#bnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 8, 7, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
}

.lm #bnav {
  background: rgba(245, 238, 223, .96);
}

@media(max-width:767px) {
  #bnav {
    display: flex;
  }

  #dlinks {
    display: none;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

.bi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .55rem .25rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color .2s;
  flex: 1;
  gap: 3px;
}

.bi.on,
.bi:hover {
  color: var(--accent);
}

.bi svg {
  width: 22px;
  height: 22px;
}

.bp {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 2rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--btn);
  border: 2px solid var(--btn);
  border-radius: .75rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .2s, transform .2s;
}

.bp:hover {
  color: var(--btn-hfg);
  background: var(--btn-h);
  border-color: var(--btn-h);
  transform: translateY(-3px);
}

.bs {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 2rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: .75rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s, transform .2s, color .2s;
}

.bs:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  transform: translateY(-3px);
  color: var(--accent);
}

.rp {
  position: relative;
  overflow: hidden;
}

.rs {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  transform: scale(0);
  animation: rA .65s ease-out forwards;
  pointer-events: none;
}

@keyframes rA {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.tg {
  display: inline-block;
  padding: .22rem .7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s;
}

.lm .tg {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  border-color: rgba(var(--accent-rgb), .25);
}

.str {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), .15);
  overflow: hidden;
}

.sf {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-d));
  transform: scaleX(0);
  transform-origin: left;
}

.vc {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 255px 25px 225px 25px/25px 225px 25px 255px;
  box-shadow: 4px 4px 0 var(--accent-d);
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}

.lm .vc {
  box-shadow: 4px 4px 0 var(--accent-d);
}

.vc:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--accent-d);
}

.pc {
  background: var(--surface);
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
  cursor: pointer;
}

.pc:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: 0 20px 50px var(--shadow);
  border-color: var(--accent);
}

.pp {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.pp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--elevated), var(--surface));
}

.pp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .15), transparent 60%);
}

.pe {
  position: relative;
  z-index: 1;
}

.sbox {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
  transition: border-color .25s, transform .25s;
}

.sbox:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .32) transparent;
  overflow-y: scroll;
}

html.lm {
  scrollbar-color: rgba(var(--accent-rgb), .35) transparent;
}

html::-webkit-scrollbar {
  width: 5px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), .32);
  border-radius: 99px;
}

html::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), .6);
}

html.lm::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), .35) !important;
}

html.lm::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), .65) !important;
}

/* A témaváltó scriptek a betöltéskor beállított inline hátteret nem mindenhol frissítik,
   a görgetősáv sávja viszont az html hátterét mutatja. Az !important felülírja az inline
   stílust, így az html háttere és color-scheme-je mindig a téma osztályát (html.lm) követi,
   akármelyik oldal témaváltója fut. Az értékek megegyeznek a head scriptek értékeivel. */
html {
  background: var(--bg) !important;
  color-scheme: dark !important;
}

html.lm {
  color-scheme: light !important;
}

/* Belső görgethető elemek (projekt modal, textarea): ugyanaz a vékony sáv, mint az oldalé.
   A scrollbar-color öröklődik az html-ről, a scrollbar-width viszont nem, ezért kell ide. */
* {
  scrollbar-width: thin;
}

/* Safari és a régebbi böngészők */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), .32);
  border-radius: 99px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), .6);
}

html.lm *::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), .35);
}

html.lm *::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), .65);
}

.lm .tg {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  border-color: rgba(var(--accent-rgb), .25);
}

.lm .nl.on {
  background: rgba(var(--accent-rgb), .08);
}

.lm .fp.on {
  background: var(--accent);
  border-color: var(--accent);
}

.lm .fp:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* A kivalasztott gomb hoverre is olvashato marad (hatter = --accent) */
.lm .fp.on:hover {
  color: #fff;
}

.lm .str {
  background: rgba(var(--accent-rgb), .12);
}

.lm .bs:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent);
}

.lm .bg:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), .06);
}

.lm #tbtn {
  background: rgba(var(--accent-rgb), .1) !important;
}

/* Vilagos modban a barna pottyok a krem hatteren csak magasabb opacitasnal latszanak */
.lm #bgc {
  opacity: .85;
}

/* index.html #kapcsolat: a bal felso folt vilagos modban erosebb (sotet modban marad a .18) */
.lm {
  --k-blob-o: .38;
}

.lm #grid {
  opacity: .018;
  filter: sepia(1) hue-rotate(-30deg);
}

.lm .vc {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent-d);
}

.lm .vc:hover {
  box-shadow: 8px 8px 0 var(--accent-d);
}

.lm .tl-spine {
  background: linear-gradient(to bottom, transparent, var(--accent) 5%, var(--accent-d) 50%, var(--accent) 95%, transparent);
  opacity: .5;
}

.lm .tl-dot {
  border-color: var(--accent);
  background: var(--bg);
}

.lm .tl-entry.sel .tl-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2);
}

.lm .tl-entry.sel .tl-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .22), 0 8px 24px rgba(var(--accent-rgb), .12);
}

.lm .tl-entry:hover .tl-card {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(var(--accent-rgb), .1);
}

.lm #pb {
  background: var(--accent);
}

.lm .pp-title {
  background: linear-gradient(135deg, var(--accent), var(--accent-l));
}

.lm .pc:hover {
  box-shadow: 0 20px 50px rgba(var(--accent-rgb), .18), 0 0 0 1px var(--accent) !important;
}

.lm a.glass:hover {
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), .2) !important;
}

.lm .sbox:hover {
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), .15) !important;
}

.lm .hero-avatar-ring {
  border-color: rgba(var(--accent-rgb), .45) !important;
  box-shadow: 0 0 50px rgba(var(--accent-rgb), .22) !important;
}

.lm .hero-avatar-glow {
  background: radial-gradient(circle, rgba(var(--accent-rgb), .2), transparent 70%) !important;
}

.lm .pp .pe svg,
.lm .pp svg {
  color: rgba(var(--accent-rgb), .75) !important;
}

.lm .pp::after {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), transparent 60%) !important;
}

.lm .pp .pv-bg,
.lm .pp::before {
  filter: saturate(0.3) sepia(0.6) hue-rotate(-30deg) brightness(1.05);
}

.lm .ab {
  filter: sepia(1) hue-rotate(-40deg) saturate(0.8);
  opacity: .07;
}

.lm .str {
  background: rgba(var(--accent-rgb), .1);
}

.lm .sf {
  background: linear-gradient(90deg, var(--accent), var(--accent-d));
}

.lm .pp::after {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .1), transparent 60%) !important;
}

.lm .nl.on {
  background: rgba(var(--accent-rgb), .08);
}

.lm .bs:hover {
  background: rgba(var(--accent-rgb), .08);
}

.lm .tg {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .09);
  border-color: rgba(var(--accent-rgb), .22);
}

.lm #tbtn {
  background: rgba(var(--accent-rgb), .1) !important;
}

.lm #kapcsolat .k-glow {
  background: radial-gradient(circle, rgba(var(--accent-rgb), .18), transparent 70%) !important;
}

.lm #grid {
  filter: sepia(1) hue-rotate(-30deg);
  opacity: .018;
}

.lm .tl-dot {
  border-color: var(--accent) !important;
}

.lm .tl-entry.sel .tl-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18) !important;
}

.lm .tl-entry.sel .tl-card {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .2), 0 8px 24px rgba(var(--accent-rgb), .1) !important;
}

.lm .tl-entry:hover .tl-card {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 28px rgba(var(--accent-rgb), .1) !important;
}

.lm .pp-title {
  background: linear-gradient(135deg, var(--accent), var(--accent-l)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.lm .pc:hover {
  box-shadow: 0 24px 60px rgba(var(--accent-rgb), .15), 0 0 0 1px var(--accent) !important;
}

.lm a.glass:hover {
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), .2) !important;
}

.lm .hero-avatar-ring {
  border-color: rgba(var(--accent-rgb), .55) !important;
  box-shadow: 0 0 50px rgba(var(--accent-rgb), .28) !important;
}

.lm .hero-avatar-glow {
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 70%) !important;
}

.lm #tbtn {
  background: rgba(var(--accent-rgb), .1) !important;
}

.lm .pp::before {
  background: linear-gradient(135deg, var(--elevated), var(--surface)) !important;
}

.lm .pp .pv-bg {
  filter: saturate(0) sepia(.55) hue-rotate(-15deg) brightness(1.08) !important;
}

.lm .pp::after {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .15), rgba(89, 45, 27, .08) 60%) !important;
}

.lm .pp .pv-icon svg,
.lm .pp .pe svg {
  color: rgba(var(--accent-rgb), .8) !important;
}

.lm .pp .pe {
  color: rgba(var(--accent-rgb), .8) !important;
}

.rv {
  opacity: 0;
  transform: translateY(32px) scale(.97);
  filter: blur(4px);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1), filter .55s ease;
}

.rv-left {
  opacity: 0;
  transform: translateX(-36px) scale(.97);
  filter: blur(3px);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1), filter .55s ease;
}

.rv-right {
  opacity: 0;
  transform: translateX(36px) scale(.97);
  filter: blur(3px);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1), filter .55s ease;
}

.rv.on,
.rv-left.on,
.rv-right.on {
  opacity: 1;
  transform: translate(0) scale(1);
  filter: blur(0);
}

.d1 {
  transition-delay: .06s
}

.d2 {
  transition-delay: .13s
}

.d3 {
  transition-delay: .20s
}

.d4 {
  transition-delay: .28s
}

.d5 {
  transition-delay: .36s
}

.bp {
  transition: background .22s, border-color .22s, transform .32s cubic-bezier(.34, 1.56, .64, 1) !important;
}

.bp:hover {
  transform: translateY(-4px) scale(1.045) !important;
}

.bp:active {
  transform: translateY(-1px) scale(1.01) !important;
  transition-duration: .08s !important;
}

.bs,
.bg {
  transition: border-color .22s, background .22s, transform .32s cubic-bezier(.34, 1.56, .64, 1), color .22s !important;
}

.bs:hover,
.bg:hover {
  transform: translateY(-4px) scale(1.04) !important;
}

.nl {
  transition: color .2s, background .2s, transform .24s cubic-bezier(.34, 1.56, .64, 1) !important;
}

.nl:hover {
  transform: translateY(-2px) !important;
}

.nl::after {
  transition: width .36s cubic-bezier(.34, 1.56, .64, 1) !important;
}

.bp svg,
.bs svg,
.bg svg {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  display: inline-block;
}

.bp:hover svg {
  transform: rotate(-10deg) scale(1.18);
}

.bs:hover svg,
.bg:hover svg {
  transform: translateX(4px) scale(1.1);
}

.bi svg {
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}

.bi:hover svg {
  transform: translateY(-4px) scale(1.14);
}

.bi.on svg {
  transform: scale(1.18);
}

.pc {
  transition: transform .38s cubic-bezier(.22, 1, .36, 1), box-shadow .38s, border-color .38s !important;
}

.pc:hover {
  transform: translateY(-12px) scale(1.016) !important;
  box-shadow: 0 30px 70px var(--shadow), 0 0 0 1px var(--accent) !important;
  border-color: var(--accent) !important;
}

.vc {
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s, filter .28s !important;
}

.vc:hover {
  transform: translate(-5px, -5px) rotate(-.4deg) !important;
  box-shadow: 9px 9px 0 var(--accent-d) !important;
  filter: brightness(1.07);
}

.sbox {
  transition: border-color .25s, transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s !important;
}

.sbox:hover {
  border-color: var(--accent) !important;
  transform: translateY(-5px) scale(1.025) !important;
  box-shadow: 0 12px 30px var(--shadow) !important;
}

a.glass {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .22s, color .22s, box-shadow .3s !important;
}

a.glass:hover {
  transform: translateY(-4px) scale(1.06) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), .25) !important;
}

.fp {
  transition: all .22s cubic-bezier(.34, 1.56, .64, 1) !important;
}

.fp:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important
  }
}

#theme-curtain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  background: var(--bg);
}

#theme-curtain.tc-active {
  display: block;
  animation: tcSlide .38s cubic-bezier(.77, 0, .18, 1) forwards;
}

@keyframes tcSlide {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  50% {
    clip-path: inset(0 0% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes tcPulse {

  0%,
  100% {
    opacity: .35
  }

  50% {
    opacity: .7
  }
}

#pb {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  transition: width .12s linear;
}

#page-fade {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

#page-fade.out {
  opacity: 1;
  pointer-events: all;
}

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), visibility .7s cubic-bezier(.22, 1, .36, 1);
}

#page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes loaderFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

#page-loader {
  animation: loaderFailsafe .7s 16s forwards;
}

#hero-skeleton {
  animation: loaderFailsafe .5s 16s forwards;
}

#loader-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.loader-center {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ring-outer {
  position: absolute;
  inset: 0;
  animation: spinCW 2.4s linear infinite;
}

.ring-inner {
  position: absolute;
  inset: 16px;
  animation: spinCCW 1.6s linear infinite;
}

@keyframes spinCW {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinCCW {
  to {
    transform: rotate(-360deg);
  }
}

.ring-outer circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 195 130;
  opacity: .8;
}

.ring-inner circle {
  fill: none;
  stroke: var(--accent-l);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 108 76;
  opacity: .55;
}

.loader-logo {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: -.05em;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent) 20%, var(--accent-l) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoPulse 1.8s ease-in-out infinite;
  position: relative;
  z-index: 1;
  user-select: none;
}

.loader-glow {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .09) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes logoPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(.94);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.sk {
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
  background: var(--surface);
}

.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--elevated) 50%, transparent 100%);
  animation: shimmer 1.6s infinite linear;
}

.sk-line {
  height: 14px;
  margin-bottom: .6rem;
}

.sk-line.w30 {
  width: 30%;
}

.sk-line.w50 {
  width: 50%;
}

.sk-line.w70 {
  width: 70%;
}

.sk-line.w100 {
  width: 100%;
}

.sk-line.tall {
  height: 20px;
}

.sk-block {
  width: 100%;
  height: 120px;
  border-radius: 1rem;
}

.sk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

#hero-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 5;
  padding: 5rem 1rem;
  pointer-events: none;
}

#hero-skeleton.done {
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

#tnav {
  animation: navSlideDown .55s cubic-bezier(.22, 1, .36, 1) .1s both;
}

@media(min-width:768px) {
  #dlinks {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
  }
}

@keyframes navSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.hero-avatar-ring {
  position: relative;
}

.hero-avatar-ring::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), .2);
  animation: avatarPing 2.8s ease-in-out infinite;
}

.hero-avatar-ring::before {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .1);
  animation: avatarPing 2.8s ease-in-out infinite .6s;
}

@keyframes avatarPing {
  0% {
    transform: scale(.96);
    opacity: .8;
  }

  50% {
    transform: scale(1.04);
    opacity: .3;
  }

  100% {
    transform: scale(.96);
    opacity: .8;
  }
}

.lm .hero-avatar-ring::after {
  border-color: rgba(var(--accent-rgb), .2);
}

.lm .hero-avatar-ring::before {
  border-color: rgba(var(--accent-rgb), .1);
}

.pc {
  position: relative;
}

.pc::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.35rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-l));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}

.pc:hover::before {
  opacity: .14;
}

.pc>* {
  position: relative;
  z-index: 1;
}

.pc {
  background: var(--surface) !important;
}

.pc .tg {
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}

.pc:hover .tg {
  background: rgba(var(--accent-rgb), .22) !important;
  border-color: rgba(var(--accent-rgb), .5) !important;
  color: var(--accent-l) !important;
}

.lm .pc:hover .tg {
  background: rgba(var(--accent-rgb), .18) !important;
  border-color: rgba(var(--accent-rgb), .4) !important;
  color: var(--accent) !important;
}

.st-chip {
  display: inline-block;
  padding: .22rem .7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--st-fg);
  background: var(--st-bg);
  border: 1px solid var(--st-bd);
  border-radius: 999px;
}

.pc:hover .st-chip {
  opacity: 1 !important;
  filter: brightness(1.2);
}

.pc:hover [style*="60a5fa"] {
  opacity: 1 !important;
  filter: brightness(1.2);
}

.pc .pv-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--st-fg);
  position: relative;
  vertical-align: middle;
  margin-right: 4px;
}

.vc-preview {
  overflow: hidden;
  position: relative;
}

.vc-preview .tw-text {
  display: inline;
}

.vc-preview .tw-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blinkCursor .75s step-end infinite;
  opacity: 0;
}

@keyframes blinkCursor {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

#avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--st-bd);
  background: var(--st-bg);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

#avail-badge:hover {
  background: var(--st-bg);
  border-color: var(--st-fg);
  transform: scale(1.06);
}

#avail-badge .avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-fg);
  position: relative;
  flex-shrink: 0;
}

#avail-badge .avail-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  color: var(--st-fg);
  letter-spacing: .04em;
}

#avail-badge .avail-arrow {
  font-size: .7rem;
  color: var(--st-fg);
  transition: transform .2s;
}

#avail-badge:hover .avail-arrow {
  transform: translateX(3px);
}

.str {
  overflow: hidden;
  position: relative;
}

.str::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .25) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}

.str:hover::after {
  transform: translateX(100%);
}

.nl.on::before {
  content: '';
  position: absolute;
  top: 50%;
  left: .3rem;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: navDotPop .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes navDotPop {
  from {
    transform: translateY(-50%) scale(0);
  }

  to {
    transform: translateY(-50%) scale(1);
  }
}

.sec-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 5;
}

.sec-divider svg {
  width: 100%;
  height: 100%;
}

#scroll-top {
  position: fixed;
  bottom: 5rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px) scale(.85);
  transition: opacity .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 900;
}

#scroll-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#scroll-top:hover {
  transform: translateY(-4px) scale(1.1) !important;
}

#scroll-top svg {
  color: #fff;
  width: 20px;
  height: 20px;
}

@media(max-width:767px) {
  #scroll-top {
    bottom: 5.5rem;
    right: .85rem;
  }
}

.pc-terminal-wrap {
  position: relative;
  overflow: hidden;
}

.pc-icon-default {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  z-index: 2;
}

.pc-terminal {
  position: absolute;
  inset: 0;
  background: #0d0d0d;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  line-height: 1.65;
  padding: 14px 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
  z-index: 3;
  color: #c9d1d9;
}

.lm .pc-terminal {
  background: #1a1a1a;
}

.pc-terminal-line {
  display: block;
  white-space: pre;
}

.pc-terminal-line.cmd {
  color: #dabfff;
}

.pc-terminal-line.ok {
  color: #34d399;
}

.pc-terminal-line.info {
  color: #94a3b8;
}

.pc-terminal-line.url {
  color: #60a5fa;
}

.pc-terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #dabfff;
  vertical-align: middle;
  animation: blinkCursor .75s step-end infinite;
  margin-left: 1px;
}

.pc:hover .pc-icon-default {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}

.pc:hover .pc-terminal {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Utility osztályok — gyakran ismétlődő inline style-ok kiváltására
   (kód-tisztítás, 2026-09-13)
   ============================================================ */

.c-muted {
  color: var(--muted);
}

.c-accent {
  color: var(--accent);
}

.c-accent-l {
  color: var(--accent-l);
}

.c-text {
  color: var(--text);
}

.cursor-pointer {
  cursor: pointer;
}

.no-underline {
  text-decoration: none;
}

.link-muted {
  color: var(--muted);
  text-decoration: none;
}

/* Minimalista TM logó: nincs színátmenet, egyszínű felirat, hoverre accent */
#tnav a.gt,
footer .gt {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
  transition: color .2s ease;
}

#tnav a.gt:hover,
footer a.gt:hover {
  color: var(--accent) !important;
}