/* ============================================================
   17 — Remote és clone: oldalspecifikus elemek
   hálózat-ábra · klónozás lépésenként · lépéslista · GUI-kártyák
   ============================================================ */

.ix.term::before{content:"⌨ GIT-SZIMULÁTOR";}

/* ---------- hálózat-ábra ---------- */
.halozat{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin:16px 0;}
.hz{border:2px solid var(--line); border-radius:12px; padding:10px 14px; text-align:center; background:var(--panel); flex:1 1 160px; max-width:240px;}
.hz b{display:block; color:var(--ink-strong);}
.hz small{color:var(--muted); font-size:.8rem;}
.hz.gh{border-color:var(--accent);}
.hz-nyil{text-align:center; font-size:1.4rem; color:var(--accent2); font-weight:800; line-height:1;}
.hz-nyil small{display:block; font-size:.7rem; color:var(--muted); font-weight:600;}

/* ---------- klónozás lépésenként ---------- */
.ix.klonlepes::before{content:"📥 KLÓNOZÁS LÉPÉSRŐL LÉPÉSRE";}
.ix.klonlepes h3{font-family:"Cascadia Mono",Consolas,monospace; font-size:.95rem;}
.kl-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin:10px 0 12px;}
.kl-lbl{font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.kl-cim{font-weight:800; font-size:1.05rem; color:var(--ink-strong); margin:2px 0 6px;}
.kl-magy{font-size:.92rem; margin:0 0 8px;}
pre.kl-ki{margin:0; font-size:.8rem; min-height:4em; white-space:pre-wrap;}
.kl-gep{background:var(--code-bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:"Cascadia Mono",Consolas,monospace; font-size:.82rem; color:var(--code-ink); line-height:1.7;}
.kl-gep .sor{opacity:.25; transition:opacity .3s, color .3s;}
.kl-gep .sor.van{opacity:1;}
.kl-gep .sor.uj{color:#fbbf24; font-weight:700;}
.kl-gep .beh1{padding-left:18px;} .kl-gep .beh2{padding-left:36px;}

/* ---------- lépéslista ---------- */
ol.lepes-lista{list-style:none; counter-reset:lp; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:8px;}
ol.lepes-lista li{counter-increment:lp; position:relative; padding:10px 14px 10px 50px; background:var(--panel); border:1px solid var(--line); border-radius:11px; font-size:.95rem;}
ol.lepes-lista li::before{content:counter(lp); position:absolute; left:12px; top:9px; width:26px; height:26px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:.85rem;}

/* ---------- GUI-kártyák ---------- */
.gui-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:16px 0;}
.gc{min-width:0; overflow-wrap:anywhere; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.gc-h{font-weight:800; color:var(--ink-strong); margin-bottom:8px; display:flex; gap:8px; align-items:center;}
.gc ul{margin:0; padding-left:18px; font-size:.9rem; line-height:1.5;}
.gc li{margin-bottom:6px;}

@media (max-width:860px){
  .gui-cards, .kl-grid{grid-template-columns:minmax(0,1fr);}
  .hz-nyil{transform:rotate(90deg); flex-basis:100%;}
}