/* ===== KOMPYUTER YIG'ISH (tezyoz-yigish) =====
   Sahifa: hero + 4 bosqichli ilova (qurilmalar, portlar, yig'ish, sinov) + maslahatlar.
   Sahnalar (SVG) o'z ranglariga ega, sayt mavzusiga bog'liq emas. */
.tool-page.container { max-width: 1240px; }

/* ---------- HERO (laboratoriya bilan bir xil uslub) ---------- */
.lbh-hero { position:relative; overflow:hidden; border-radius:26px; padding:34px 32px; margin-top:16px; color:var(--text);
  background:radial-gradient(80% 120% at 100% -20%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%), var(--surface);
  border:1px solid var(--border); box-shadow:0 30px 60px -34px rgba(30,30,60,.28); }
.lbh-hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(120% 90% at 10% -10%, #000 0%, transparent 58%); mask-image:radial-gradient(120% 90% at 10% -10%, #000 0%, transparent 58%); }
.lbh-in { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:30px; align-items:center; }
/* sayt menyusi (260px) bilan birga: tor ekranda bitta ustun, aks holda o'ng karta qirqilib qoladi */
@media (max-width:1180px){ .lbh-in { grid-template-columns:minmax(0,1fr); gap:24px; } }
.lbh-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); font:800 12px var(--font-display),system-ui; }
.lbh-hero h1 { margin:15px 0 10px; font:800 clamp(25px,4vw,38px) var(--font-display),system-ui; letter-spacing:-.02em; line-height:1.13; color:var(--text); }
.lbh-hero h1 .grad { color:var(--accent); }
.lbh-sub { margin:0 0 22px; font-size:15px; line-height:1.62; max-width:520px; color:var(--muted); }
.lbh-cta-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lbh-cta { display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:14px; font:800 15px var(--font-display),system-ui; text-decoration:none; color:#fff; cursor:pointer; border:none;
  background:var(--accent); box-shadow:0 12px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent); transition:transform .16s, box-shadow .16s; }
.lbh-cta:hover { transform:translateY(-2px); text-decoration:none; color:#fff; }
.lbh-cta svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.lbh-trust { display:flex; align-items:center; gap:11px; flex-wrap:wrap; color:var(--muted); font:700 12.5px var(--font-display),system-ui; white-space:nowrap; }
.lbh-trust b { color:var(--text); }
.lbh-trust .dot { width:4px; height:4px; border-radius:50%; background:color-mix(in srgb, var(--muted) 60%, var(--border)); }
.lbh-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:0 22px 46px -22px rgba(30,30,60,.22); }
.lbh-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.lbh-rank { display:flex; align-items:center; gap:10px; min-width:0; }
.lbh-rank .ic { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--accent); color:#fff; flex-shrink:0; }
.lbh-rank .ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lbh-rank small { display:block; font:700 10.5px var(--font-display),system-ui; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lbh-rank > div { min-width:0; }
.lbh-rank b { display:block; font:800 15px var(--font-display),system-ui; line-height:1.2; color:var(--text); }
.lbh-pct { font:800 22px var(--font-display),system-ui; color:var(--accent); font-variant-numeric:tabular-nums; }
.lbh-list { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.lbh-list li { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:10px; font:600 13px var(--font-display),system-ui; color:var(--muted); background:var(--bg); border:1px solid transparent; }
.lbh-list li .n { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font:800 11px var(--font-display),system-ui; background:var(--surface); border:1px solid var(--border); color:var(--muted); flex-shrink:0; }
.lbh-list li.done { color:var(--text); }
.lbh-list li.done .n { background:#10b981; border-color:#10b981; color:#fff; }
.lbh-list li.cur { color:var(--text); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.lbh-list li.cur .n { background:var(--accent); border-color:var(--accent); color:#fff; }
.lbh-list li.final { font-weight:800; }
@media (max-width:560px){ .lbh-hero{ padding:26px 20px; } }

/* ---------- ILOVA ---------- */
.yg-wrap { margin-top:22px; scroll-margin-top:16px; position:relative; z-index:0; isolation:isolate; }
.yg-small { display:none; margin-bottom:12px; padding:10px 14px; border-radius:12px; background:var(--warn-bg); color:var(--text); font-size:13px; line-height:1.5; }
@media (max-width:700px){ .yg-small { display:block; } }
.yg svg { display:block; }
.yg-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media (max-width:1100px){ .yg-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .yg-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.yg-st { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:var(--surface); cursor:pointer; text-align:left; color:var(--text); min-width:0; }
.yg-st .n { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; font:800 13px var(--font-display),system-ui; background:var(--bg); border:1px solid var(--border); color:var(--muted); }
.yg-st .n svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.yg-st .tx { min-width:0; }
.yg-st b { display:block; font:800 13.5px var(--font-display),system-ui; line-height:1.2; }
.yg-st small { display:block; font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:2px; }
.yg-st.on { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.yg-st.on .n { background:var(--accent); border-color:var(--accent); color:#fff; }
.yg-st.done .n { background:#10b981; border-color:#10b981; color:#fff; }
.yg-st.lock { opacity:.55; cursor:not-allowed; }
.yg-body { min-height:420px; }

.yg-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:12px; border:none; cursor:pointer; font:800 14px var(--font-display),system-ui; color:#fff; background:var(--accent); box-shadow:0 10px 22px -12px var(--accent); }
.yg-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.yg-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.yg-btn.ghost { background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:none; }
.yg-btn.small { padding:8px 12px; font-size:12.5px; }
.yg-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.yg-row .yg-btn { flex:1; min-width:140px; }
.muted { color:var(--muted); }
.small { font-size:12.5px; }

/* 1-bosqich: qurilmalar */
.yg-s1 { display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .yg-s1 { grid-template-columns:1fr; } }
.yg-parts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:900px){ .yg-parts { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); } }
.yg-pc { position:relative; display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; border:1px solid var(--border); background:var(--surface); cursor:pointer; text-align:left; color:var(--text); min-width:0; }
.yg-pc .art { width:62px; height:50px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:#1b1e25; padding:4px; }
.yg-pc .art svg { max-width:100%; max-height:100%; width:auto; height:auto; }
.yg-pc .nm { font:700 13px var(--font-display),system-ui; line-height:1.25; min-width:0; }
.yg-pc .ck { position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; background:#10b981; color:#fff; display:grid; place-items:center; }
.yg-pc .ck svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; }
.yg-pc.on { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.yg-det { background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.yg-det-art { background:radial-gradient(120% 90% at 50% 0%, #2a3140 0%, #15181e 70%); padding:22px; display:grid; place-items:center; min-height:220px; }
.yg-det-art svg { width:100%; max-width:520px; max-height:300px; height:auto; }
.yg-det-art.art-cpu svg, .yg-det-art.art-cooler svg, .yg-det-art.art-fan svg, .yg-det-art.art-ssd svg { max-width:300px; }
.yg-det-tx { padding:18px 22px 22px; }
.yg-det-tx h3 { margin:0 0 4px; font:800 21px var(--font-display),system-ui; color:var(--text); }
.yg-det-tx .lead { margin:0 0 10px; color:var(--accent); font-weight:700; }
.yg-det-tx p { margin:0 0 12px; line-height:1.62; color:var(--text); font-size:14.5px; }
.yg-det-tx h4 { margin:14px 0 6px; font:800 13px var(--font-display),system-ui; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.yg-det-tx ul { margin:0; padding-left:18px; display:grid; gap:5px; font-size:14px; line-height:1.5; }
.yg-where { margin-top:14px; padding:10px 12px; border-radius:12px; background:var(--accent-soft); font-size:13.5px; line-height:1.5; }
.yg-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; padding:14px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--border); }
.yg-foot p { margin:0; color:var(--muted); font-size:13.5px; flex:1; min-width:220px; }

/* test */
.yg-quiz { max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; }
.yg-quiz h3 { margin:14px 0 10px; font:800 18px var(--font-display),system-ui; text-align:center; }
.yg-qhead, .yg-meter { display:flex; align-items:center; gap:10px; font:700 12.5px var(--font-display),system-ui; color:var(--muted); }
.yg-meter { margin-bottom:12px; }
.bar { flex:1; height:6px; border-radius:6px; background:var(--bg); overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); border-radius:6px; transition:width .3s; }
.yg-qart { margin-top:14px; border-radius:16px; background:radial-gradient(120% 90% at 50% 0%, #2a3140 0%, #15181e 70%); padding:22px; display:grid; place-items:center; }
.yg-qart svg { width:100%; max-width:420px; max-height:230px; height:auto; }
.yg-qart.art-cpu svg, .yg-qart.art-cooler svg, .yg-qart.art-fan svg, .yg-qart.art-ssd svg { max-width:240px; }
.yg-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px){ .yg-opts { grid-template-columns:1fr; } }
.yg-opt { padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:700 14px var(--font-display),system-ui; cursor:pointer; text-align:left; }
.yg-opt:hover:not(:disabled) { border-color:var(--accent); }
.yg-opt.ok { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.yg-opt.bad { background:var(--err-bg); border-color:var(--err); color:var(--err); }
.yg-fb { margin-top:12px; padding:11px 13px; border-radius:12px; font-weight:700; font-size:14px; line-height:1.5; }
.yg-fb span { display:block; font-weight:500; color:var(--muted); font-size:13px; }
.yg-fb.ok { background:var(--ok-bg); color:var(--ok); }
.yg-fb.bad { background:var(--err-bg); color:var(--err); }
.yg-quiz.end { text-align:center; }
.yg-quiz.end p { color:var(--muted); line-height:1.6; }
.yg-big { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; margin:0 auto 6px; color:#fff; }
.yg-big svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.yg-big.ok { background:#10b981; } .yg-big.bad { background:#ef4444; }

/* 2-4 bosqichlar: sahna + yon panel */
.yg-tabs, .yg-sctabs { display:inline-flex; padding:4px; gap:4px; border-radius:13px; background:var(--surface); border:1px solid var(--border); margin-bottom:10px; flex-wrap:wrap; }
.yg-tabs button, .yg-sctabs button { border:none; background:transparent; cursor:pointer; padding:8px 14px; border-radius:10px; font:800 13px var(--font-display),system-ui; color:var(--muted); }
.yg-tabs button.on, .yg-sctabs button.on { background:var(--accent); color:#fff; }
.yg-sctabs button:disabled:not(.on) { opacity:.45; cursor:default; }
.yg-as { display:grid; grid-template-columns:minmax(0,1fr) clamp(280px,27vw,350px); gap:16px; align-items:start; }
@media (max-width:1000px){ .yg-as { grid-template-columns:1fr; } }
.yg-stage { min-width:0; }
.yg-scene { position:relative; border-radius:18px; background:#0b0c10; padding:10px; display:flex; justify-content:center; box-shadow:0 26px 50px -30px rgba(0,0,0,.6); touch-action:manipulation; }
.yg-scene svg { width:100%; height:auto; max-height:min(78vh,760px); }
.yg-scene.rear svg, .yg-scene.s2 svg { width:auto; max-width:100%; height:min(78vh,760px); }
@media (max-width:700px){ .yg-scene.rear svg, .yg-scene.s2 svg { height:auto; width:100%; max-height:none; } }
.yg-z { cursor:pointer; }
.yg-scene.s2 .yg-z:hover { fill:rgba(255,255,255,.12); stroke:rgba(255,255,255,.55); stroke-width:1.5; }
.yg-z.pick { fill:rgba(56,189,248,.18); stroke:#38bdf8; stroke-width:3; }
.yg-z.hl { fill:rgba(52,211,153,.14); stroke:#34d399; stroke-width:3; stroke-dasharray:8 6; animation:ygDash 1s linear infinite; }
@keyframes ygDash { to { stroke-dashoffset:-14; } }
.yg-scene.picking .yg-z { stroke:rgba(255,255,255,.28); stroke-width:1.2; stroke-dasharray:4 4; }
.yg-scene.picking .yg-z.hl { stroke:#34d399; stroke-width:3; }
.yg-z.ov, .yg-scene.picking .yg-z.ov { fill:rgba(129,140,248,.28); stroke:#818cf8; stroke-width:3; stroke-dasharray:none; }
@media (prefers-reduced-motion:reduce){ .yg-z.hl { animation:none; } }

.yg-side { min-width:0; }
.yg-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; position:sticky; top:14px; }
@media (max-width:1000px){ .yg-card { position:static; } }
.yg-card h3 { margin:0 0 6px; font:800 18px var(--font-display),system-ui; color:var(--text); }
.yg-card p { margin:0 0 10px; line-height:1.58; font-size:14px; color:var(--text); }
.yg-card p.muted { color:var(--muted); }
.yg-card .yg-btn { width:100%; margin-top:8px; }
.yg-port { padding:12px; border-radius:14px; background:var(--accent-soft); margin-bottom:12px; }
.yg-port h3 { font-size:16px; }
.yg-port p { margin:0; font-size:13.5px; }
.yg-why { margin:4px 0 12px; border-radius:12px; background:var(--bg); padding:9px 12px; }
.yg-why summary { cursor:pointer; font:800 13px var(--font-display),system-ui; color:var(--accent); }
.yg-why p { margin:8px 0 2px; font-size:13.5px; color:var(--muted); }
.yg-lbl { font:800 11.5px var(--font-display),system-ui; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:6px 0 6px; }
.yg-tray { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
@media (max-width:1000px){ .yg-tray { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); } }
.yg-tray.one { grid-template-columns:1fr; }
.yg-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px; border-radius:14px; border:1px solid var(--border); background:var(--bg); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.yg-item .art { width:100%; height:74px; display:grid; place-items:center; border-radius:10px; background:#1b1e25; padding:6px; transition:transform .2s; }
.yg-tray.one .yg-item .art { height:120px; }
.yg-item .art svg { max-width:100%; max-height:100%; width:auto; height:auto; }
.it-cpu .art svg { height:78%; width:auto; transition:transform .2s; }
.yg-item span { font:700 12px var(--font-display),system-ui; text-align:center; line-height:1.25; color:var(--text); }
.yg-item:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.yg-item.sel { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.yg-item.drag { opacity:.4; }
.yg-rot { position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,.2); background:rgba(17,19,24,.85); color:#fff; display:grid; place-items:center; cursor:pointer; }
.yg-rot svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.yg-ghost { position:fixed; left:0; top:0; width:90px; height:90px; pointer-events:none; z-index:600; display:grid; place-items:center; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.yg-ghost svg { max-width:100%; max-height:100%; width:auto; height:auto; }
.yg-tstat { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; padding:10px 12px; border-radius:12px; background:var(--bg); font:700 13px var(--font-display),system-ui; color:var(--muted); }
.yg-tstat b { color:var(--text); font-variant-numeric:tabular-nums; }
.yg-tstat .warn b { color:var(--err); }

/* bildirishnoma */
.yg-toast { position:fixed; left:50%; bottom:22px; z-index:560; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.22s; max-width:min(560px, calc(100vw - 32px)); display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:14px; background:#1f2937; color:#fff; font:600 14px var(--font-display),system-ui; line-height:1.45; box-shadow:0 18px 40px -14px rgba(0,0,0,.5); }
.yg-toast.on { opacity:1; transform:translate(-50%,0); }
.yg-toast .ic { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex-shrink:0; background:rgba(255,255,255,.15); }
.yg-toast .ic svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.yg-toast.ok { background:#047857; } .yg-toast.err { background:#b91c1c; }

/* modal */
.yg-modal { position:fixed; inset:0; z-index:580; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(10,12,18,.6); opacity:0; transition:opacity .2s; overflow-y:auto; }
.yg-modal.on { opacity:1; }
.yg-mbox { position:relative; width:100%; max-width:560px; background:var(--surface); color:var(--text); border-radius:22px; padding:24px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); text-align:center; }
.yg-mbox h3 { margin:6px 0 12px; font:800 20px var(--font-display),system-ui; }
.yg-mbox p { color:var(--muted); line-height:1.6; margin:10px 0; }
.yg-mx { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; border:none; background:var(--bg); color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.yg-mx svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.yg-post { text-align:left; background:#05070a; color:#d1d5db; border-radius:12px; padding:14px 16px; font:12.5px/1.75 var(--font-mono); overflow-x:auto; }
.yg-post .ln { opacity:0; animation:ygLn .3s forwards; white-space:pre-wrap; }
.yg-post .ln:first-child { color:#5eead4; font-weight:700; }
.yg-post .ln:last-child { color:#34d399; }
@keyframes ygLn { to { opacity:1; } }
.yg-in { width:100%; margin-top:8px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font:600 15px var(--font-display),system-ui; box-sizing:border-box; }
.yg-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* maslahatlar */
.yg-tips { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
@media (max-width:820px){ .yg-tips { grid-template-columns:1fr; } }
.yg-tip { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; }
.yg-tip .n { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:9px; }
.yg-tip .n svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.yg-tip h4 { margin:0 0 5px; font:800 14.5px var(--font-display),system-ui; color:var(--text); }
.yg-tip p { margin:0; font-size:13px; color:var(--muted); line-height:1.55; }

/* ---------- JONLI ANIMATSIYALAR (YG_ART: .ya-*, .yg-fanb) ---------- */
.ya { transform-box:fill-box; transform-origin:center; }
.ya-drop { animation:yaDrop .55s cubic-bezier(.2,.8,.3,1.15) both; }
@keyframes yaDrop { from { opacity:0; transform:translateY(-28px) scale(1.06); } 60% { opacity:1; } }
.ya-drop2 { animation:yaDrop2 .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes yaDrop2 { from { opacity:0; transform:scale(1.32); } 55% { opacity:1; } }
.ya-pop { animation:yaPop .38s cubic-bezier(.3,1.6,.5,1) .35s both; }
@keyframes yaPop { from { opacity:0; transform:scale(.45); } }
.ya-swing { transform-origin:50% 100%; animation:yaSwing .45s ease-out both; }
@keyframes yaSwing { from { opacity:.3; transform:scaleY(.12); } }
.ya-lever { animation:yaLever .45s ease-out both; }
@keyframes yaLever { from { opacity:.2; } }
.ya-press { animation:yaPress .4s ease-out both; }
@keyframes yaPress { from { opacity:.15; transform:scale(1.05); } }
.ya-ram { animation:yaRam .5s cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes yaRam { from { opacity:0; transform:translateY(-46px); } 50% { opacity:1; } }
.ya-clip { animation:yaClip .3s ease-out .42s both; }
@keyframes yaClip { from { opacity:0; transform:scale(1.6); } }
.ya-slideR { transform-origin:0% 50%; animation:yaSlideR .55s ease-out both; }
@keyframes yaSlideR { from { opacity:0; transform:translateX(-26px) rotate(-16deg); } }
.ya-flat { transform-origin:0% 50%; animation:yaFlat .4s ease-in both; }
@keyframes yaFlat { from { transform:rotate(-6deg); } }
.ya-screw { animation:yaScrew .55s ease-out .2s both; }
@keyframes yaScrew { from { opacity:0; transform:rotate(-540deg) scale(1.4); } 30% { opacity:1; } }
.ya-slideL { animation:yaSlideL .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes yaSlideL { from { opacity:0; transform:translateX(-70px); } }
.ya-slideD { animation:yaSlideD .55s cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes yaSlideD { from { opacity:0; transform:translateY(-40px); } }
.ya-out { animation:yaOut .7s ease-in forwards; }
@keyframes yaOut { to { opacity:0; transform:translate(-36px,18px) rotate(-24deg); } }
.ya-glass { animation:yaGlass .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes yaGlass { from { opacity:0; transform:translateX(90px); } }
.ya-flip { animation:yaFlip .3s ease-out both; }
@keyframes yaFlip { from { transform:scaleY(.4); } }
.ya-plug { animation:yaPlug .45s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes yaPlug { from { opacity:0; transform:scale(1.4); } }
.ya-cable { stroke-dasharray:1; stroke-dashoffset:1; animation:yaCable .75s ease-out forwards; }
@keyframes yaCable { to { stroke-dashoffset:0; } }
.ya-glow { animation:yaGlow 1.6s ease-in-out infinite; }
@keyframes yaGlow { 50% { opacity:.25; } }
.yg-det-art .yg-fanb, .yg-qart .yg-fanb { animation:ygSpin 2.6s linear infinite; }
.yg-scene.powered .yg-fanb { animation:ygSpin .45s linear infinite; }
@keyframes ygSpin { to { transform:rotate(360deg); } }
.yg-z.bad { fill:rgba(239,68,68,.28) !important; stroke:#ef4444 !important; stroke-width:3 !important; stroke-dasharray:none !important; animation:ygShake .4s; transform-box:fill-box; transform-origin:center; }
@keyframes ygShake { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }
.yg-ghost.fly { transition:transform .22s ease, opacity .22s ease; }
.yg-stage { position:relative; }
.yg-snd { position:absolute; right:12px; bottom:12px; z-index:2; width:36px; height:36px; border-radius:11px; border:1px solid rgba(255,255,255,.18); background:rgba(17,19,24,.8); color:#e5e7eb; display:grid; place-items:center; cursor:pointer; }
.yg-snd svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.yg-snd:hover { background:rgba(40,44,54,.9); }
@media (prefers-reduced-motion:reduce){ .ya, .ya-cable, .ya-glow, .yg-fanb, .yg-z.bad { animation:none !important; } .ya-cable { stroke-dashoffset:0; } }

/* ---------- 5-bosqich: nosozliklar ---------- */
.yg-trdots { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.yg-trdots button { min-width:46px; padding:6px 8px; border-radius:11px; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; font:800 13px var(--font-display),system-ui; }
.yg-trdots button i { font-style:normal; font-size:9px; color:#f59e0b; letter-spacing:1px; min-height:11px; }
.yg-trdots button.done { color:var(--text); border-color:color-mix(in srgb, #10b981 45%, var(--border)); }
.yg-trdots button.on { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.yg-sym { margin:0 0 12px; padding:0; list-style:none; display:grid; gap:6px; }
.yg-sym li { position:relative; padding:8px 10px 8px 30px; border-radius:10px; background:var(--bg); font-size:13.5px; line-height:1.45; color:var(--text); }
.yg-sym li::before { content:"!"; position:absolute; left:9px; top:8px; width:15px; height:15px; border-radius:50%; background:#f59e0b; color:#fff; font:800 10px/15px var(--font-display),system-ui; text-align:center; }
.yg-why.open { font-size:13.5px; line-height:1.5; color:var(--text); }
.yg-solved { display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:10px; border-radius:14px; background:var(--ok-bg); color:var(--ok); }
.yg-solved .yg-big { width:40px; height:40px; border-radius:12px; margin:0; flex-shrink:0; }
.yg-solved .yg-big svg { width:22px; height:22px; }
.yg-solved b { flex:1; font:800 14.5px var(--font-display),system-ui; }
.yg-solved .stars { color:#f59e0b; font-size:18px; letter-spacing:2px; }
.yg-solved .stars em { font-style:normal; color:color-mix(in srgb, var(--muted) 40%, transparent); }

/* ---------- kattalashtirish va lupa ---------- */
.yg-zoom { position:absolute; left:12px; bottom:12px; z-index:2; display:flex; align-items:center; gap:2px; padding:3px; border-radius:12px; background:rgba(17,19,24,.82); border:1px solid rgba(255,255,255,.16); backdrop-filter:none; }
.yg-zoom button { width:32px; height:32px; border:none; border-radius:9px; background:transparent; color:#e5e7eb; display:grid; place-items:center; cursor:pointer; padding:0; }
.yg-zoom button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.yg-zoom button:hover:not(:disabled) { background:rgba(255,255,255,.12); }
.yg-zoom button:disabled { opacity:.35; cursor:default; }
.yg-zoom button.on { background:#6366f1; color:#fff; }
.yg-zoom .zl { min-width:42px; text-align:center; font:700 11.5px var(--font-mono); color:#cbd2dc; font-variant-numeric:tabular-nums; }
.yg-scene.zoomed { touch-action:none; cursor:grab; }
.yg-scene.zoomed .yg-z { cursor:pointer; }
.yg-scene.panning, .yg-scene.panning .yg-z { cursor:grabbing; }
.yg-lens { position:fixed; left:0; top:0; width:180px; height:180px; border-radius:50%; overflow:hidden; pointer-events:none; z-index:590; border:3px solid #fff; background:#0b0c10; box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35); display:none; }
.yg-lens.on { display:block; }
.yg-lens svg { width:100%; height:100%; display:block; }
.yg-lens::after { content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(0,0,0,.55); }
.yg-lens .hl-static { fill:rgba(52,211,153,.14); stroke:#34d399; stroke-width:3; stroke-dasharray:8 6; }
.yg-lens.powered .yg-fanb { animation:ygSpin .45s linear infinite; }
@media (max-width:420px){ .yg-zoom .zl { display:none; } .yg-zoom button { width:30px; height:30px; } }
@media (prefers-reduced-motion:reduce){ .yg-lens .yg-fanb { animation:none; } }

/* ---------- sinov konfiguratsiyasi va BIOS ---------- */
.yg-cfg { margin:0 0 10px; padding:10px 12px; border-radius:12px; border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.yg-cfg .yg-lbl { margin:0 0 6px; color:var(--accent); }
.yg-cfg ul { margin:0; padding-left:18px; display:grid; gap:3px; font-size:13px; line-height:1.45; color:var(--text); }
.yg-bios { text-align:left; border-radius:12px; overflow:hidden; background:#0b1530; color:#dbe4ff; font:13px/1.5 var(--font-mono); border:1px solid #23396f; }
.yg-bios .hd { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:#1e3a8a; color:#fff; }
.yg-bios .hd span { font-size:11.5px; opacity:.8; }
.yg-bios .row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 14px; border-top:1px solid rgba(148,163,255,.14); }
.yg-bios .row span { color:#9fb0e0; }
.yg-bios .row b { color:#fff; font-weight:600; text-align:right; }
.yg-bios .xmp { border:1px solid #f59e0b; background:rgba(245,158,11,.12); color:#fcd34d; padding:5px 12px; border-radius:8px; font:700 12.5px var(--font-mono); cursor:pointer; }
.yg-bios .xmp.on { border-color:#34d399; background:rgba(52,211,153,.15); color:#6ee7b7; }
@media (max-width:480px){ .yg-bios .row { flex-wrap:wrap; } .yg-bios .row b { text-align:left; } }

/* ---------- "Qanday qilinadi?" ko'rsatmasi ---------- */
.yg-demo { transition:transform 1.1s cubic-bezier(.45,.05,.25,1), opacity .35s ease; z-index:610; }
.yg-demo.hand { width:44px; height:44px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.yg-demo.hand.tap svg { animation:ygTap .35s ease 2; }
@keyframes ygTap { 50% { transform:scale(.82); } }
.yg-z.demo { fill:rgba(56,189,248,.24) !important; stroke:#38bdf8 !important; stroke-width:3 !important; stroke-dasharray:none !important; animation:ygDemoP .45s ease 3; transform-box:fill-box; transform-origin:center; }
@keyframes ygDemoP { 50% { fill:rgba(56,189,248,.45); } }
#ygDemo svg { width:16px; height:16px; }
@media (prefers-reduced-motion:reduce){ .yg-demo { transition:opacity .3s; } }

/* ---------- klaviatura bilan boshqarish ---------- */
.yg-z:focus { outline:none; }
.yg-z:focus-visible { fill:rgba(245,158,11,.18); stroke:#f59e0b; stroke-width:3; stroke-dasharray:none; }
.yg-item:focus-visible { outline:3px solid #f59e0b; outline-offset:2px; }

/* ---------- telefonda sinov savati ixchamroq (3 ustun) ---------- */
@media (max-width:600px){
  .yg-tray:not(.one) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .yg-tray:not(.one) .yg-item { padding:6px; gap:4px; }
  .yg-tray:not(.one) .yg-item .art { height:52px; padding:4px; }
  .yg-tray:not(.one) .yg-item span { font-size:10.5px; }
  .yg-tray:not(.one) .yg-rot { width:24px; height:24px; top:4px; right:4px; }
}

/* ---------- videokurs e'loni (sokin, sahifa oxirida, qalqib chiqmaydi) ---------- */
.vk-ad { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; margin-top:22px; padding:18px 20px; border-radius:18px; background:var(--surface); border:1px solid var(--border); }
@media (max-width:760px){ .vk-ad { grid-template-columns:auto minmax(0,1fr); } .vk-cta { grid-column:1 / -1; } }
.vk-ic { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.vk-ic svg { width:34px; height:30px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.vk-ic svg .pl { fill:currentColor; stroke:none; }
.vk-lbl { display:block; font:700 11.5px var(--font-display),system-ui; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.vk-tx h3 { margin:3px 0 4px; font:800 17px var(--font-display),system-ui; color:var(--text); }
.vk-tx p { margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--muted); }
.vk-tx ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.vk-tx li { padding:3px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--border); font-size:12.5px; color:var(--text); }
.vk-cta { display:flex; flex-direction:column; align-items:stretch; gap:8px; min-width:200px; }
@media (max-width:760px){ .vk-cta { flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; min-width:0; } }
.vk-price span { display:block; font-size:12px; color:var(--muted); }
.vk-price b { font:800 18px var(--font-display),system-ui; color:var(--text); }
.vk-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; background:var(--accent); color:#fff; font:800 13.5px var(--font-display),system-ui; text-decoration:none; }
.vk-btn:hover { background:var(--accent-hover); color:#fff; text-decoration:none; }
@media (max-width:480px){ .vk-ad { grid-template-columns:1fr; padding:16px; } .vk-ic { display:none; } }

/* ---------- telefonda bosqichlar: yonma-yon suriladigan ixcham tasma ---------- */
@media (max-width:640px){
  .yg-steps { display:flex; overflow-x:auto; gap:6px; scroll-snap-type:x mandatory; padding:2px 2px 6px; margin-left:-2px; margin-right:-2px; scrollbar-width:none; }
  .yg-steps::-webkit-scrollbar { display:none; }
  .yg-st { flex:0 0 auto; scroll-snap-align:start; padding:8px 12px 8px 8px; gap:8px; }
  .yg-st small { display:none; }
  .yg-st .n { width:26px; height:26px; border-radius:8px; }
  .yg-st b { white-space:nowrap; font-size:13px; }
}
/* qurilma kartasidagi "ko'rildi" belgisi nomni yopmasin */
.yg-pc { padding-right:28px; }
@media (max-width:640px){ .yg-pc { gap:8px; padding:7px 26px 7px 7px; } .yg-pc .art { width:46px; height:38px; } .yg-pc .nm { font-size:12.5px; } }

/* qo'llanmali yig'ishda oldingi sahnani ko'rish: eslatma va joriy qadamga qaytish */
.yg-backnote { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px; padding:9px 12px; border-radius:12px; background:var(--accent-soft, var(--surface)); border:1px solid var(--border); font-size:13.5px; color:var(--text); }
.yg-backnote .yg-btn { padding:7px 12px; font-size:13px; }