  /* Téma-kezelés: alapból a rendszerhez igazodunk, kézi választás felülírja */
    :root { color-scheme: light dark; }

    /* LIGHT alap: csak akkor, ha nincs kézi választás, vagy explicit light */
    :root:not([data-theme]), [data-theme='light'] {
      --bg: #f7f8fb;
      --card: #ffffff;
      --muted: #50627a;
      --text: #0b0f1a;
      --brand: #7c5cff;
      --brand-2: #23c9ff;
      --radius: 18px;
      --shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
    }

[data-theme='light'] #idojaras .card {
      background: #f6f8ff;
      border: 1px solid #d0d6e3;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    [data-theme='light'] #idojaras h3 {
      color: #222;
    }
    
    [data-theme='light'] #idojaras iframe {
      background: #fff;
      border-radius: 14px;
    }
    
    [data-theme='light'] .wx-note {
      color: #444;
    }
    /* DARK rendszer szerint: csak akkor, ha nincs kézi választás */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme]) {
        --bg: #070812;
        --card: #0d0f20;
        --muted: #9fb0c8;
        --text: #f2f6ff;
        --brand: #ff5cf7;
        --brand-2: #19e3ff;
        --radius: 18px;
        --shadow: 0 10px 30px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.35);
      }
    }

    /* DARK kézi választás: mindig sötét változók */
    [data-theme='dark'] {
      --bg: #070812;
      --card: #0d0f20;
      --muted: #9fb0c8;
      --text: #f2f6ff;
      --brand: #ff5cf7;
      --brand-2: #19e3ff;
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1120px, 92%); margin: 0 auto; }

    header { position: sticky; top: 0; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.7); }
    [data-theme='dark'] header { border-bottom-color: rgba(255,255,255,.08); background: rgba(7,8,18,.65); }
    @media (prefers-color-scheme: dark) { :root:not([data-theme]) header { border-bottom-color: rgba(255,255,255,.08); background: rgba(7,8,18,.65); } }

    .nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; gap: 12px; }
    .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; }
    .logo-badge {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: transparent; /* ha csak képet akarsz */
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  padding: 4px; /* kis belső tér a kép körül */
}

.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ne torzuljon a kép */
  border-radius: 8px;
}
    /*logo-badge { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; box-shadow: var(--shadow); font-size: 18px; }*/
    nav ul { display: flex; gap: 18px; padding: 0; margin: 0; list-style: none; }
    nav a { padding: 8px 12px; border-radius: 10px; opacity: .9; }
    nav a:hover { background: rgba(0,0,0,.04); opacity: 1; }
    [data-theme='dark'] nav a:hover { background: rgba(255,255,255,.07); }

    .theme-btn { border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); color: var(--text); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
    [data-theme='dark'] .theme-btn { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

    .hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
    .hero::before { content: ""; position: absolute; inset: -20%; background:
      radial-gradient(600px 200px at -10% -20%, rgba(124,92,255,.18), transparent),
      radial-gradient(700px 220px at 110% 120%, rgba(35,201,255,.16), transparent);
      filter: blur(30px); opacity: .9; pointer-events:none; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .hero-image img {
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  animation: float 6s ease-in-out infinite; }
  @keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
    .chip { display: inline-flex; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(124,92,255,.15); border: 1px solid rgba(124,92,255,.35); font-size: 13px; }
    .hero h1 { font-size: clamp(32px, 5vw, 58px); margin: 14px 0 12px; }
    .hero p { color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); margin-bottom: 22px; }

    section { padding: 72px 0; }
    .section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
    .section-head h2 { margin: 0; font-size: clamp(24px, 3.6vw, 34px); }
    .muted { color: var(--muted); }

    .grid { display: grid; gap: 18px; }
    .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .card { background: var(--card); border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
    [data-theme='dark'] .card { border-color: rgba(255,255,255,.08); }
    .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); }
    [data-theme='dark'] .card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); }

    footer { border-top: 1px solid rgba(0,0,0,.08); padding: 26px 0 60px; color: var(--muted); text-align: center; }
    [data-theme='dark'] footer { border-top-color: rgba(255,255,255,.08); }

    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-image img {
    max-width: 340px;
    margin: 0 auto;
  }
      nav ul { flex-wrap: wrap; justify-content: center; }
    }
    /* Tabs – Időjárás */
    .tabs { display: grid; gap: 14px; }
    .tablist { display: flex; flex-wrap: wrap; gap: 8px; }
    .tab-btn { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); cursor: pointer; font: inherit; }
    [data-theme='dark'] .tab-btn { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
    .tab-btn[aria-selected="true"] { outline: 2px solid color-mix(in oklab, var(--brand) 60%, transparent); border-color: transparent; }
    .tabpanel { display: none; }
    .tabpanel.active { display: block; }
    .wx-frame { width: 100%; max-width: 520px; height: 300px; border: none; border-radius: 14px; background: #0b1022; }
    .wx-row { display: grid; place-items: center; }
    .wx-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
    
/* ==== LIGHT THEME FIX az IDŐJÁRÁS szekcióhoz ==== */
html[data-testid],
html[data-theme='light'] { /* csak a specifikáció növeléséhez */ }

html[data-theme='light'] #idojaras { 
  --wx-panel-bg: #f6f8ff;
  --wx-panel-border: #d6deec;
  --wx-tab-bg: #f1f4fc;
  --wx-tab-border: #c8d3ea;
  --wx-text-strong: #111;
}

html[data-theme='light'] #idojaras .section-head h2 { color: var(--wx-text-strong) !important; }
html[data-theme='light'] #idojaras .section-head .muted { color: #4a5568 !important; }

html[data-theme='light'] #idojaras .tablist { gap: 10px; }
html[data-theme='light'] #idojaras .tab-btn {
  background: var/home/lightskyblue; /* fallback ha color-mix nincs */
  background: var(--wx-tab-bg) !important;
  border: 1px solid var(--wx-tab-border) !important;
  color: #1f2937 !important;
}
html[data-theme='light'] #idojaras .tab-btn[aria-selected="true"]{
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 2px rgba(124,92,255,.35);
}

html[data-theme='light'] #idojaras .tabpanel .card{
  background: var(--wx-panel-bg) !important;
  border: 1px solid var(--wx-panel-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

html[data-theme='light'] #idojaras .wx-row h3 { color: var(--wx-text-strong) !important; }

html[data-theme='light'] #idojaras .wx-frame{
  background: #fff !important;
  border: 1px solid #e6eaf2 !important;
  border-radius: 14px !important;
}

html[data-theme='light'] #idojaras .wx-note{ color: #475569 !important; }
    
