/* mistVCC — /how-to-use.php görsel kılavuz (vcc.css üzerine). Çizimler tamamen HTML/CSS: dış görsel yok. */
.ht-hero .hero__art{height:440px}
.ht-float{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow2);z-index:3}
.ht-float small{display:block;font-size:12px;color:var(--mut)}
.ht-float b{font:700 18px var(--display);color:var(--ink)}
.ht-float i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.ht-float--bal{inset-inline-start:0;top:6px;animation:float 6s ease-in-out infinite}
.ht-float--net{inset-inline-end:0;bottom:96px;animation:float 6.5s ease-in-out infinite .8s}
.ht-float--net i{background:#26A17B;font:700 18px var(--display)}
.ht-float--ok{inset-inline-start:8%;bottom:10px;animation:float 7s ease-in-out infinite 1.4s}
.ht-float--ok i{background:var(--ok)}

/* adımlar: zaman çizelgesi + mini ekran */
.ht-steps{position:relative;display:grid;gap:28px;max-width:1040px;margin:0 auto}
.ht-steps::before{content:"";position:absolute;inset-inline-start:27px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--c2),rgba(59,130,246,.1))}
.ht-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.95fr);gap:26px;align-items:center}
.ht-n{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font:700 22px var(--display);color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 12px 26px -12px rgba(37,99,235,.8);z-index:1}
.ht-step h3{font-size:22px;margin-bottom:8px}
.ht-step p{color:var(--ink2);font-size:15.5px}
.ht-mock{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.ht-mock::before{content:"";display:block;width:46px;height:5px;border-radius:9px;background:#e2e8f0;margin:0 auto 14px}
.ht-field{border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:9px;font-size:13px;color:var(--mut);display:flex;justify-content:space-between;align-items:center;background:var(--soft)}
.ht-field b{color:var(--ink);font:600 14px var(--body)}
.ht-ok{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok)}
.ht-btn{display:block;text-align:center;border-radius:11px;padding:10px;font:600 14px var(--body);color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));margin-top:10px}
.ht-amt{font:700 30px var(--display);color:var(--ink);margin:2px 0 10px}
.ht-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ht-chip{padding:7px 12px;border-radius:99px;border:1px solid var(--line);font:600 13px var(--body);color:var(--ink2);background:var(--soft)}
.ht-chip.on{border-color:#26A17B;color:#047857;background:#ecfdf5}
.ht-qr{display:grid;grid-template-columns:repeat(11,1fr);gap:1px;width:100px;aspect-ratio:1;padding:7px;border:1px solid var(--line);border-radius:10px;margin-inline-start:auto;background:#fff}
.ht-qr span{border-radius:1px}
.ht-qr span.b{background:var(--ink)}
.ht-row2{display:flex;gap:14px;align-items:center}
.ht-row2>div:first-child{flex:1;min-width:0}
.ht-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ht-tile{border-radius:14px;padding:12px 10px;min-height:74px;display:flex;flex-direction:column;justify-content:space-between;font:600 13px var(--body);color:#1e293b;background:var(--g)}
.ht-tile i{font-size:18px;opacity:.8}
.ht-tile.on{outline:2px solid var(--c2);outline-offset:2px}
.g-ads{--g:linear-gradient(135deg,#8ea9ff 0%,#a9bcff 38%,#d2dbff 70%,#ece6ff 100%)}
.g-travel{--g:linear-gradient(135deg,#ffd9a3 0%,#ffcdb8 40%,#efc4cf 70%,#d9c8f2 100%)}
.g-subs{--g:linear-gradient(135deg,#f6b6e6 0%,#e7bdf6 40%,#d6c6ff 70%,#d4e1ff 100%)}
.ht-mini{border-radius:14px;padding:14px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;gap:10px;font:600 13px var(--display)}
.ht-mini .n{letter-spacing:.12em;font-size:15px}
.ht-mini .r{display:flex;justify-content:space-between;align-items:center;opacity:.92}
.ht-tx{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.ht-tx:last-of-type{border-bottom:0}
.ht-tx b{font:600 13px var(--body);color:var(--ink)}
.ht-tx .ok{color:var(--ok);font-weight:600}

/* kullanım alanları */
.ht-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ht-use{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s,box-shadow .2s}
.ht-use:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ht-use .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:20px;color:#fff;margin-bottom:14px}
.ht-use h3{font-size:16.5px;margin-bottom:6px}
.ht-use p{color:var(--ink2);font-size:14.5px}
.ic-1{background:linear-gradient(135deg,#2563eb,#60a5fa)}.ic-2{background:linear-gradient(135deg,#7c3aed,#a78bfa)}.ic-3{background:linear-gradient(135deg,#0891b2,#22d3ee)}.ic-4{background:linear-gradient(135deg,#0f766e,#2dd4bf)}
.ic-5{background:linear-gradient(135deg,#ea580c,#fbbf24)}.ic-6{background:linear-gradient(135deg,#db2777,#f472b6)}.ic-7{background:linear-gradient(135deg,#dc2626,#fb7185)}.ic-8{background:linear-gradient(135deg,#4f46e5,#818cf8)}

/* USDT bölümü (koyu) */
.ht-usdt{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.ht-usdt>div>p{color:#cbd5e1;margin-top:12px}
.ht-ol{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.ht-ol li{display:grid;grid-template-columns:40px 1fr;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px}
.ht-ol .k{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 17px var(--display);background:#26A17B;color:#fff}
.ht-ol h3{color:#fff;font-size:16.5px;margin-bottom:4px}
.ht-ol p{color:#cbd5e1;font-size:14.5px}
.ht-net{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px}
.ht-net h3{color:#fff;margin-bottom:14px}
.ht-netrow{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);margin-bottom:10px}
.ht-netrow .coin{width:42px;justify-content:center;padding:10px 0;font-size:18px}
.ht-netrow b{color:#fff;display:block}
.ht-netrow small{color:#94a3b8}
.ht-warn{display:flex;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);color:#fde68a;font-size:14px}

/* ipuçları */
.ht-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ht-tip{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.ht-tip>i{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--ink-b);background:#eff6ff;font-size:17px}
.ht-tip p{color:var(--ink2);font-size:14.5px;margin-top:4px}

@media (max-width:960px){
  .ht-step{grid-template-columns:56px minmax(0,1fr)}
  .ht-step .ht-mock{grid-column:2}
  .ht-uses{grid-template-columns:1fr 1fr}
  .ht-usdt{grid-template-columns:1fr}
  .ht-tips{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .ht-hero .hero__art{height:330px}
  .ht-steps::before{inset-inline-start:21px}
  .ht-step{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .ht-n{width:44px;height:44px;border-radius:14px;font-size:18px}
  .ht-step h3{font-size:19px}
  .ht-uses,.ht-tips{grid-template-columns:1fr}
  .ht-tiles{gap:6px}.ht-tile{min-height:64px;font-size:12px;padding:10px 8px}
  .ht-float{padding:9px 12px}.ht-float b{font-size:15px}.ht-float i{width:32px;height:32px}
}