/* ============================================================
   18 — push, pull, fetch: oldalspecifikus elemek
   négy hely ábra · Két gép, egy GitHub · lépéslista · GUI-kártyák
   ============================================================ */

.ix.term::before{content:"⌨ GIT-SZIMULÁTOR";}
.gg-par{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.gg-par .gg-doboz{margin-top:0;}

/* ---------- négy hely ábra ---------- */
.negyhely{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 12px; margin:16px 0;}
.nh{border:2px solid var(--line); border-radius:12px; padding:10px 8px; text-align:center; background:var(--panel);}
.nh b{display:block; font-family:"Cascadia Mono",Consolas,monospace; color:var(--ink-strong); font-size:.92rem;}
.nh small{color:var(--muted); font-size:.76rem;}
.nh.gh{border-color:var(--accent);} .nh.ot{border-color:#f87171; border-style:dashed;} .nh.ma{border-color:#60a5fa;} .nh.mk{border-color:#4ade80;}
.nh-sav{position:relative; text-align:center; border-top:2px solid; padding-top:4px; margin:8px 16px 0; font-family:"Cascadia Mono",Consolas,monospace; font-size:.82rem; font-weight:700;}
.nh-sav::before, .nh-sav::after{content:""; position:absolute; top:-7px; width:0; height:0; border:6px solid transparent;}
.nh-sav.push{grid-column:1 / 4; border-color:#f5693f; color:#ffa07a;}
.nh-sav.push::before{left:-6px; border-right-color:#f5693f; border-left:0;}
.nh-sav.fetch{grid-column:1 / 3; border-color:#2dd4bf; color:#2dd4bf;}
.nh-sav.fetch::after{right:-6px; border-left-color:#2dd4bf; border-right:0;}
.nh-sav.pull{grid-column:1 / 5; border-color:#60a5fa; color:#93c5fd;}
.nh-sav.pull::after{right:-6px; border-left-color:#60a5fa; border-right:0;}

/* ---------- Két gép, egy GitHub ---------- */
.ix.ketgep::before{content:"🔄 KÉT GÉP, EGY GITHUB";}
.kg-chk{display:flex; gap:8px; align-items:center; font-size:.88rem; margin:8px 0 10px;}
.kg-chk input{accent-color:var(--accent);}
.kg-oszlopok{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;}
.kg-o{background:var(--card-in); border:1px solid var(--line); border-radius:12px; padding:10px; min-width:0; display:flex; flex-direction:column; gap:6px;}
.kg-o.gh{border-color:var(--accent);}
.kg-fej{font-weight:800; color:var(--ink-strong);}
.kg-status{font-size:.78rem; color:var(--muted); min-height:2.4em; font-family:"Cascadia Mono",Consolas,monospace;}
.kg-status .el{color:#ffa07a;} .kg-status .le{color:#93c5fd;} .kg-status .ok{color:var(--green);}
.kg-gombok{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:5px;}
.kg-gombok .btn{padding:5px 8px; font-size:.8rem; font-family:"Cascadia Mono",Consolas,monospace;}
.kg-o .gg-doboz{margin-top:0; padding:4px 6px 2px;}
pre.kg-naplo{margin:12px 0 0; max-height:180px; overflow:auto; font-size:.8rem; white-space:pre-wrap;}
pre.kg-naplo .a{color:#ffa07a;} pre.kg-naplo .p{color:#2dd4bf;} pre.kg-naplo .e{color:#f87171;} pre.kg-naplo .g{color:#4ade80;}

/* ---------- 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(2, 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:900px){
  .kg-oszlopok{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .gui-cards{grid-template-columns:minmax(0,1fr);}
  .negyhely{grid-template-columns:repeat(2, minmax(0,1fr));}
  .nh-sav{grid-column:1 / 3 !important;}
}