/* ===========================================================================
   Git és GitHub tananyag — a VEZÉRLŐPULT (index.html) stílusa.
   A fejezetoldalak stílusa külön fájlban: style.css
   =========================================================================== */

  /* ============================================================
     SZÍNPALETTA — Git-narancs grafiton
     Hideg, semleges grafit háttér (a GitHub felületére emlékeztet) +
     a Git logójának narancs-vöröse kiemelőszínként. Másodlagos szín:
     türkiz — az ágak (branch) jelölésére a diagramokon és címkéken.
     Sötét = alapértelmezett, világos = [data-theme="light"]
     ============================================================ */
  :root{
    --bg:#0d1014;
    --bg2:#080a0d;
    --panel:#161a20;
    --panel2:#1f242c;
    --panel3:#1a1f26;
    --ink:#e5e8ec;
    --ink-strong:#ffffff;
    --muted:#98a0ab;
    --line:#2d333d;
    --accent:#f5693f;
    --accent2:#ffa07a;
    --accent-ink:#1a0c06;
    --accent-soft:rgba(245,105,63,.14);
    --teal:#2dd4bf;
    --teal-soft:rgba(45,212,191,.13);
    --blue:#60a5fa;
    --blue-soft:rgba(96,165,250,.13);
    --green:#4ade80;
    --violet:#a78bfa;
    --red:#f87171;
    --code-bg:#080a0d;
    --shadow:0 10px 30px rgba(0,0,0,.40);
    --shadow-sm:0 2px 8px rgba(0,0,0,.28);
    --hero-from:#f05032;
    --hero-mid:#c7361f;
    --hero-to:#6b1d12;
    --sidebar-w:266px;
  }
  :root[data-theme="light"]{
    --bg:#f5f6f8;
    --bg2:#eaecf0;
    --panel:#ffffff;
    --panel2:#eef0f3;
    --panel3:#f9fafb;
    --ink:#1f2328;
    --ink-strong:#0d1014;
    --muted:#5b636e;
    --line:#d5d9df;
    --accent:#c2410c;
    --accent2:#9a3412;
    --accent-ink:#ffffff;
    --accent-soft:rgba(194,65,12,.09);
    --teal:#0f766e;
    --teal-soft:rgba(15,118,110,.09);
    --blue:#1d4ed8;
    --blue-soft:rgba(29,78,216,.08);
    --green:#15803d;
    --violet:#6d28d9;
    --red:#dc2626;
    --code-bg:#11151a;
    --shadow:0 8px 24px rgba(31,35,40,.10);
    --shadow-sm:0 1px 4px rgba(31,35,40,.10);
    --hero-from:#f05032;
    --hero-mid:#d23d22;
    --hero-to:#8a2414;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.65; font-size:16px;
    display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh;
  }
  a{color:inherit;}
  ::selection{background:var(--accent); color:var(--accent-ink);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}

  /* Elsötétítő réteg a mobil navigáció mögé — asztali nézetben nem létezik a rácsban */
  .scrim{display:none;}

  /* ================= OLDALSÁV ================= */
  .sidebar{
    background:var(--panel); border-right:1px solid var(--line);
    position:sticky; top:0; height:100vh; overflow-y:auto;
    display:flex; flex-direction:column;
    scrollbar-width:thin;                                /* Firefox: vékony csúszka */
    scrollbar-color:var(--line) transparent;             /* Firefox: fogantyú / sáv színe */
  }
  /* A fejléc- és láblécmagasság a fő területtel KÖZÖS, hogy a válaszfal két
     oldalán a vízszintes vonalak pontosan egy magasságban fussanak. */
  :root{--fejlec-h:80px; --lablec-h:60px;}
  .brand{
    flex-shrink:0; display:flex; align-items:center; gap:12px;
    height:var(--fejlec-h); padding:0 20px; border-bottom:1px solid var(--line);
  }
  .brand .mark{flex:0 0 auto;}
  .brand .txt strong{display:block; font-size:1rem; color:var(--ink-strong); letter-spacing:.01em;}
  .brand .txt span{display:block; font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em;}
  /* --- az oldalsáv csúszkája: vékony, a paletta színeivel --- */
  .sidebar:hover{scrollbar-color:var(--accent) transparent;}
  .sidebar::-webkit-scrollbar{width:8px;}               /* Chrome, Edge, Safari */
  .sidebar::-webkit-scrollbar-track{background:transparent;}
  .sidebar::-webkit-scrollbar-thumb{
    background:var(--line); border-radius:99px;
    border:2px solid transparent; background-clip:content-box;   /* 4px látszik a 8-ból */
    transition:background .15s;
  }
  .sidebar:hover::-webkit-scrollbar-thumb{background:var(--accent); background-clip:content-box;}
  .sidebar::-webkit-scrollbar-thumb:hover{background:var(--accent2); background-clip:content-box;}

  .nav{padding:16px 12px; flex:1;}

  /* --- összecsukható témakörök --- */
  .nav .grp{
    width:100%; display:flex; align-items:center; gap:6px;
    background:none; border:1px solid transparent; border-radius:8px; cursor:pointer;
    font:inherit; font-size:.7rem; font-weight:700; text-align:left;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    padding:7px 8px; margin:14px 0 6px;
    transition:color .13s, background .13s, border-color .13s;
  }
  .nav .grp:first-child{margin-top:0;}
  .nav .grp:hover{color:var(--accent2); background:var(--panel2); border-color:var(--line);}
  .nav .grp:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .nav .grp .cim{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .nav .grp .chev{flex:0 0 auto; transition:transform .18s ease;}
  .nav .grp[aria-expanded="false"] .chev{transform:rotate(-90deg);}   /* becsukva jobbra mutat */
  .nav .grp .db{
    flex:0 0 auto; font-size:.6rem; letter-spacing:0; color:var(--muted); line-height:1.5;
    background:var(--panel2); border:0 solid var(--line); border-radius:99px;
    padding:0; max-width:0; overflow:hidden; opacity:0;                /* nyitva helyet sem foglal */
    transition:opacity .15s, max-width .15s;
  }
  .nav .grp[aria-expanded="false"] .db{                               /* csak becsukva látszik */
    opacity:1; max-width:3rem; padding:0 5px; border-width:1px;
  }
  .nav .grp[aria-expanded="false"] + .grp-box{display:none;}
  .nav .grp-box{animation:nav-nyit .18s ease;}
  @keyframes nav-nyit{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
  .nav a{
    display:flex; align-items:center; gap:10px; padding:8px 10px; margin:2px 0;
    border-radius:9px; text-decoration:none; color:var(--ink); font-size:.92rem;
    border:1px solid transparent; transition:background .13s,border-color .13s,color .13s;
  }
  .nav a:hover{background:var(--panel2); border-color:var(--line);}
  .nav a.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent2); font-weight:600;}
  .nav a .n{
    flex:0 0 22px; height:22px; border-radius:6px; background:var(--panel2); border:1px solid var(--line);
    display:grid; place-items:center; font-size:.72rem; font-weight:700; color:var(--muted);
  }
  .nav a:hover .n, .nav a.active .n{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .nav a .ttl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .side-foot{
    flex-shrink:0; height:var(--lablec-h); padding:0 20px; display:flex; align-items:center;
    border-top:1px solid var(--line); font-size:.76rem; color:var(--muted);
  }

  /* ================= FEJLÉC ================= */
  .main{min-width:0; display:flex; flex-direction:column;}
  header.top{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    min-height:var(--fejlec-h); padding:6px 30px;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  }
  header.top .titles{flex:1; min-width:180px;}
  header.top .crumb{font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-weight:700;}
  header.top h1{margin:2px 0 0; font-size:1.28rem; color:var(--ink-strong); line-height:1.2;}
  .search{position:relative;}
  .search input{
    width:250px; max-width:46vw; padding:9px 12px 9px 34px; border-radius:9px;
    background:var(--panel); border:1px solid var(--line); color:var(--ink);
    font-family:inherit; font-size:.9rem;
  }
  .search input::placeholder{color:var(--muted);}
  .search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.6;}
  .iconbtn{
    background:var(--panel); border:1px solid var(--line); color:var(--ink);
    width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
    cursor:pointer; transition:.15s;
  }
  .iconbtn:hover{border-color:var(--accent); color:var(--accent2);}
  .hamburger{display:none;}
  :root[data-theme="dark"] .ico-sun{display:block;}
  :root[data-theme="dark"] .ico-moon{display:none;}
  :root[data-theme="light"] .ico-sun{display:none;}
  :root[data-theme="light"] .ico-moon{display:block;}

  /* ================= TARTALOM ================= */
  .content{padding:28px 30px 70px; max-width:1180px; width:100%;}

  .hero{
    display:flex; align-items:center; gap:24px;
    background:linear-gradient(135deg,var(--hero-from) 0%,var(--hero-mid) 48%,var(--hero-to) 100%);
    color:#fff; border-radius:16px; padding:26px 28px; margin-bottom:26px;
    box-shadow:var(--shadow);
  }
  .hero .hero-txt{flex:1 1 0; min-width:0; max-width:680px;}
  .hero .kicker{text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; opacity:.78; margin:0 0 8px;}
  .hero h2{margin:0 0 8px; font-size:1.62rem; line-height:1.2; color:#fff;}
  .hero p{margin:0; font-size:.97rem; color:#fff1ec; opacity:.95;}
  .hero .meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
  .hero .meta span{
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); color:#fff;
    border-radius:20px; padding:4px 12px; font-size:.78rem; font-weight:600;
  }
  /* Díszítő commit-gráf a hero jobb oldalán (fő ág + mellékág + merge) */
  .hero .graph{flex:0 0 260px; height:auto; margin-left:auto; opacity:.92;}
  .hero .graph .e{fill:none; stroke:rgba(255,255,255,.55); stroke-width:3; stroke-linecap:round;}
  .hero .graph .e2{fill:none; stroke:#7ff0df; stroke-width:3; stroke-linecap:round;}
  .hero .graph .c{fill:var(--hero-mid); stroke:#fff; stroke-width:3;}
  .hero .graph .c2{fill:var(--hero-mid); stroke:#7ff0df; stroke-width:3;}
  .hero .graph .head{fill:#fff;}
  .hero .graph text{font:700 11px/1 "Cascadia Code",Consolas,monospace; fill:#fff;}
  .hero .graph .tag{fill:rgba(0,0,0,.28);}

  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:28px;}
  .stat{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:16px 18px; display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-sm);
  }
  .stat .ic{
    flex:0 0 42px; height:42px; border-radius:11px; display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent); border:1px solid var(--line);
  }
  .stat .num{font-size:1.55rem; font-weight:800; color:var(--ink-strong); line-height:1.1;}
  .stat .cap{font-size:.8rem; color:var(--muted);}

  .sec-head{display:flex; align-items:baseline; gap:12px; margin:0 0 14px;}
  .sec-head h3{margin:0; font-size:1.05rem; color:var(--ink-strong); text-transform:uppercase; letter-spacing:.09em;}
  .sec-head .line{flex:1; height:1px; background:var(--line);}
  .sec-head .cnt{font-size:.8rem; color:var(--muted);}

  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:20px;}
  .card{
    background:var(--panel); border:1px solid var(--line); border-radius:16px;
    overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  }
  .card .chead{padding:18px 20px 14px; border-bottom:1px solid var(--line); background:var(--panel3);}
  .card .chead .row{display:flex; align-items:center; gap:12px;}
  .card .badge{
    flex:0 0 34px; height:34px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
    display:grid; place-items:center; font-weight:800; font-size:1rem;
  }
  .card h4{margin:0; font-size:1.12rem; color:var(--ink-strong); flex:1;}
  .card .chip{
    background:var(--panel2); border:1px solid var(--line); color:var(--muted);
    border-radius:20px; padding:3px 11px; font-size:.75rem; font-weight:700; white-space:nowrap;
  }
  .card .desc{margin:10px 0 0; font-size:.9rem; color:var(--muted); line-height:1.55;}
  .mats{list-style:none; margin:0; padding:6px; flex:1;}
  .mats li{margin:0;}
  .mats a{
    display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:11px;
    text-decoration:none; border:1px solid transparent; transition:background .13s,border-color .13s;
  }
  .mats a:hover{background:var(--panel2); border-color:var(--line);}
  .mats .n{
    flex:0 0 28px; height:28px; border-radius:8px; background:var(--panel2); border:1px solid var(--line);
    display:grid; place-items:center; font-size:.8rem; font-weight:700; color:var(--muted);
  }
  .mats a:hover .n{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .mats .txt{flex:1; min-width:0;}
  .mats .txt strong{display:block; font-size:.95rem; color:var(--ink); font-weight:600;}
  .mats .txt span{display:block; font-size:.82rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mats .time{font-size:.76rem; color:var(--muted); white-space:nowrap;}
  .mats .arrow{color:var(--muted); opacity:.5; transition:.15s;}
  .mats a:hover .arrow{color:var(--accent); opacity:1; transform:translateX(2px);}

  .empty{
    display:none; padding:26px; text-align:center; color:var(--muted);
    background:var(--panel); border:1px dashed var(--line); border-radius:14px;
  }
  .empty.show{display:block;}

  .roadmap{margin-top:34px;}
  .rm-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
  .rm{
    background:var(--panel); border:1px dashed var(--line); border-radius:13px; padding:14px 16px;
  }
  .rm .t{font-size:.92rem; color:var(--ink); font-weight:600;}
  .rm .s{font-size:.8rem; color:var(--muted); margin-top:3px;}
  /* A soron következő blokk kiemelése (a webes változatban használjuk). */
  .rm.star{border-style:solid; border-color:var(--accent);}
  .rm.star .t{color:var(--accent2);}

  footer.foot{
    margin-top:auto; min-height:var(--lablec-h); padding:10px 30px;
    border-top:1px solid var(--line); color:var(--muted); font-size:.83rem;
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  }


  /* ================= GIT-SPECIFIKUS ELEMEK ================= */
  /* Eszközcímkék: melyik felületen gyakoroljuk az adott anyagot */
  .tools{display:flex; gap:4px; flex:0 0 auto;}
  .tool{
    font:700 .64rem/1 "Cascadia Code",Consolas,monospace; letter-spacing:.02em;
    padding:4px 6px; border-radius:6px; border:1px solid transparent; white-space:nowrap;
  }
  .tool.cli{color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
  .tool.gui{color:var(--teal); background:var(--teal-soft); border-color:color-mix(in srgb,var(--teal) 35%,transparent);}
  .tool.web{color:var(--blue); background:var(--blue-soft); border-color:color-mix(in srgb,var(--blue) 35%,transparent);}

  /* Még el nem készült fejezet: látszik a helye, de nem kattintható.
     Ha elkészül az oldal, csak a "soon" osztályt kell levenni a linkről. */
  .mats a.soon, .nav a.soon{pointer-events:none; cursor:default;}
  .mats a.soon .txt strong{color:var(--muted);}
  .mats a.soon .arrow{display:none;}
  .nav a.soon{color:var(--muted);}
  .nav a.soon .n{opacity:.7;}
  .legend .soon-note{margin-left:auto;}
  .legend .dot{width:9px; height:9px; border-radius:50%; border:1.5px dashed var(--muted);}

  /* Jobb oldali oszlop: eszközcímkék fölül, óraszám alul — így az alcím kifér */
  .mats .side{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
  .mats .txt span{white-space:normal;}      /* a tematika-alcím törhet, ne vágjuk le */

  /* Jelmagyarázat a kártyák felett */
  .legend{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:-6px 0 22px;
    font-size:.84rem; color:var(--muted);
  }
  .legend .it{display:inline-flex; align-items:center; gap:7px;}

  @media (max-width:1100px) and (min-width:1001px), (max-width:720px){ .hero .graph{display:none;} }
  @media (max-width:560px){
    .legend .soon-note{margin-left:0;}
    .mats .tools{flex-wrap:wrap; justify-content:flex-end; max-width:96px;}
    .mats a{gap:10px; padding:10px;}
  }

  /* ================= RESPONSZÍV ================= */
  @media (max-width:1000px){
    body{grid-template-columns:1fr;}
    .sidebar{
      position:fixed; left:0; top:0; z-index:40; width:var(--sidebar-w);
      transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow);
    }
    body.nav-open .sidebar{transform:translateX(0);}
    .hamburger{display:grid;}
    .scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35;}
    body.nav-open .scrim{display:block;}
    .content, header.top, footer.foot{padding-left:18px; padding-right:18px;}
    .cards{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .search input{width:100%; max-width:none;}
    .search{flex:1 1 100%; order:5;}
    .hero h2{font-size:1.3rem;}
  }
  @media print{
    .sidebar, header.top, .scrim{display:none;}
    body{grid-template-columns:1fr;}
  }