/* ============================================================
   Subly — Yardım Merkezi animasyonlu anlatım sahnesi
   Tek dosya; her yardım sayfası styles.css + help-anim.css kullanır.
   Sahne (.ha-scene) editörü taklit eder: sol ray + panel + telefon önizleme.
   Hareketli imleç (.ha-cursor) + adımlar (.ha-steps).
   ============================================================ */

.ha-wrap{max-width:880px;margin:0 auto}
.ha-stage{position:relative;background:linear-gradient(135deg,#eef3fb,#f7f3ff 55%,#f0fbff);
  border:1px solid var(--glass-brd,rgba(20,40,90,.1));border-radius:26px;padding:26px;
  box-shadow:0 26px 60px -28px rgba(20,40,90,.4)}
.ha-stage.dark{background:linear-gradient(135deg,#10162b,#1b1340 60%,#0c1830)}

/* ── Editör penceresi ───────────────────────────────────── */
.ha-scene{position:relative;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(20,40,90,.5);border:1px solid rgba(20,40,90,.07);
  aspect-ratio:16/10;min-height:300px;font-family:var(--display,'Plus Jakarta Sans'),sans-serif}
.ha-topbar{height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid #eef1f7;background:#fff;position:relative}
.ha-dots{display:flex;gap:6px}
.ha-dots i{width:10px;height:10px;border-radius:50%;display:block}
.ha-dots i:nth-child(1){background:#ff5f57}.ha-dots i:nth-child(2){background:#febc2e}.ha-dots i:nth-child(3){background:#28c840}
.ha-seg{position:absolute;left:50%;top:7px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;
  background:#f3f5fa;border:1px solid #e7ebf3;border-radius:20px;padding:3px 4px;font-size:11px;font-weight:700;color:#8b93ab}
.ha-seg b{padding:3px 12px;border-radius:16px;font-weight:700}
.ha-seg b.on{background:var(--brand,#2b8cff);color:#fff}

.ha-main{display:flex;height:calc(100% - 38px)}
.ha-rail{width:46px;flex:none;border-right:1px solid #eef1f7;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;background:#fbfcfe}
.ha-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#9aa3bd}
.ha-ic svg{width:17px;height:17px}
.ha-ic.on{background:#eaf2ff;color:var(--brand,#2b8cff)}

.ha-panel{width:208px;flex:none;border-right:1px solid #eef1f7;padding:13px 13px 0;overflow:hidden;background:#fff}
.ha-ph{font-size:15px;font-weight:800;color:#0f1530;display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.ha-tog{display:inline-flex;background:#f3f5fa;border-radius:9px;padding:2px;font-size:10.5px;font-weight:700;color:#8b93ab}
.ha-tog b{padding:3px 9px;border-radius:7px}
.ha-tog b.on{background:#fff;color:#0f1530;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ha-sech{font-size:11px;font-weight:800;color:#0f1530;display:flex;align-items:center;gap:6px;margin:4px 0 8px}
.ha-tag{font-size:8.5px;font-weight:800;letter-spacing:.04em;color:#2b8cff;background:#eaf2ff;border-radius:5px;padding:2px 5px}
.ha-tag.new{color:#e2851a;background:#fff2e0}

/* Şablon kartları */
.ha-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ha-card{aspect-ratio:1/1.04;border-radius:9px;background:#2a2f44;display:grid;place-items:center;
  font-size:9px;font-weight:800;color:#fff;text-align:center;line-height:1.15;border:2px solid transparent;position:relative;overflow:hidden}
.ha-card.a{background:#1f2540}.ha-card.b{background:#3a2230}.ha-card.c{background:#1c3a2e}
.ha-card.d{background:#33203a}.ha-card.e{background:#2b2a14}.ha-card.f{background:#142a33}
.ha-card .hl{background:#ffd23f;color:#111;border-radius:3px;padding:0 3px}
.ha-card.sel{border-color:var(--brand,#2b8cff)}
.ha-card .chk{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--brand,#2b8cff);
  color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.4)}
.ha-card .chk svg{width:9px;height:9px}

/* Genel panel bileşenleri */
.ha-drop{border:2px dashed #cdd6e8;border-radius:13px;height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;color:#8b93ab;font-size:11px;font-weight:600;text-align:center;background:#fafbff}
.ha-drop svg{width:26px;height:26px;color:#b7c0d6}
.ha-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #eef1f7;border-radius:10px;margin-bottom:7px;font-size:12px;font-weight:600;color:#3a4258}
.ha-row .sw{width:18px;height:18px;border-radius:5px;flex:none}
.ha-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand,#2b8cff);color:#fff;
  font-size:12px;font-weight:700;border-radius:9px;padding:9px 12px;width:100%}
.ha-btn.g{background:#eef1f7;color:#3a4258}
.ha-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e7ebf3;border-radius:20px;
  padding:5px 11px;font-size:11px;font-weight:700;color:#3a4258}
.ha-pill .b{color:#f0a500}
.ha-sel{display:flex;align-items:center;justify-content:space-between;border:1px solid #e7ebf3;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:600;color:#3a4258;margin-bottom:8px}

/* ── Telefon önizleme ───────────────────────────────────── */
.ha-prev{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f4f7fc,#eaf0fb);padding:14px}
.ha-phone{position:relative;height:100%;max-height:300px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  background:#11203a;box-shadow:0 14px 30px -16px rgba(20,40,90,.6)}
.ha-phone video,.ha-phone img{width:100%;height:100%;object-fit:cover;display:block}
.ha-phone .ha-capbox{position:absolute;left:0;right:0;bottom:13%;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:0 10px}
.ha-capw{font-family:var(--anton,'Anton'),'Plus Jakarta Sans',sans-serif;font-weight:800;color:#fff;font-size:18px;
  letter-spacing:.01em;text-shadow:0 2px 5px rgba(0,0,0,.5);line-height:1.05}
.ha-capw.box{background:#ffd23f;color:#16140a;border-radius:5px;padding:1px 6px;text-shadow:none}

/* ── Hareketli imleç + vurgu halkası ────────────────────── */
.ha-cursor{position:absolute;width:22px;height:22px;z-index:30;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.ha-cursor svg{width:100%;height:100%}
.ha-cursor::after{content:"";position:absolute;left:-7px;top:-7px;width:34px;height:34px;border-radius:50%;
  background:rgba(43,140,255,.35);transform:scale(0);}
  box-shadow:0 0 0 4px rgba(43,140,255,.15)}

/* ── Adımlar ────────────────────────────────────────────── */
.ha-steps{display:grid;gap:10px;margin-top:22px}
.ha-step{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);
  border:1px solid var(--glass-brd,rgba(20,40,90,.08));border-radius:14px;padding:13px 16px}
.ha-step .n{width:26px;height:26px;flex:none;border-radius:8px;background:var(--grad,linear-gradient(135deg,#2b8cff,#1a6fd4));
  color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;font-family:var(--display)}
.ha-step h4{font-size:15px;font-weight:700;color:#0f1530;margin:1px 0 2px}
.ha-step p{font-size:14px;color:#5a6480;margin:0;line-height:1.55}

/* ── Ortak animasyonlar ─────────────────────────────────── */
@keyframes haClickPulse{0%,55%,100%{transform:scale(0);opacity:0}60%{transform:scale(0);opacity:.7}80%{transform:scale(1);opacity:0}}
@keyframes haRing{0%,100%{opacity:0;transform:scale(.96)}12%,80%{opacity:1;transform:scale(1)}}
@keyframes haPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes haFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes haCapWord{0%,30%{opacity:0;transform:translateY(6px) scale(.9)}45%,100%{opacity:1;transform:none}}
@keyframes haCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes haFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes haSelOn{to{border-color:var(--brand,#2b8cff)}}
@keyframes haChk{to{opacity:1;transform:scale(1)}}

/* Hareketi azalt tercihi */
@media (prefers-reduced-motion:reduce){
  .ha-cursor,.ha-card .chk,.ha-capw{animation:none!important}
  .ha-card .chk{opacity:1;transform:none}.ha-capw{opacity:1;transform:none}
}

/* Mobil */
@media (max-width:640px){
  .ha-stage{padding:14px;border-radius:18px}
  .ha-scene{aspect-ratio:auto;min-height:0;height:340px}
  .ha-panel{width:170px}
  .ha-rail{width:40px}
}

/* ============================================================
   PAYLAŞIMLI ETKİLEŞİM (imleç→tıkla→sonuç) — tüm yeni sayfalar kullanır
   Her sayfa yalnızca @keyframes haCur (hedef koordinatı) tanımlar.
   ha-tgt = tıklanan öğe · ha-res = beliren sonuç · ha-pop = çıkan rozet
   ============================================================ */
.ha-tgt{position:relative;animation:haTgt 9s ease-in-out infinite}
.ha-cur{left:44%;top:34%;animation:haTap 9s ease-in-out infinite}
.ha-cur::after{animation:haClick 9s ease-in-out infinite}
.ha-res{opacity:0;animation:haRes 9s ease-in-out infinite}
.ha-pop{opacity:0;animation:haPop 9s ease-in-out infinite}
.ha-slide{opacity:0;animation:haSlide 9s ease-in-out infinite}
.ha-plainout{animation:haPlainOut 9s ease-in-out infinite}
.ha-cardsel{animation:haCardSel 9s ease-in-out infinite}
.ha-cardchk{opacity:0;transform:scale(.4);animation:haChk 9s ease-in-out infinite}
@keyframes haTap{0%{transform:translate(13px,13px) scale(.9);opacity:0}14%{opacity:1}30%{transform:translate(0,0) scale(1);opacity:1}38%{transform:translate(0,0) scale(.85)}46%{transform:translate(0,0) scale(1)}80%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(13px,13px) scale(.9);opacity:0}}
@keyframes haClick{0%,30%,48%,100%{transform:scale(0);opacity:0}36%{opacity:.55}44%{transform:scale(1);opacity:0}}
@keyframes haTgt{0%,32%{transform:none;filter:none}40%{transform:scale(.96);filter:brightness(.94)}52%,100%{transform:none;filter:none}}
@keyframes haRes{0%,44%{opacity:0;transform:translateY(8px)}56%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@keyframes haPop{0%,46%{opacity:0;transform:scale(.4)}57%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
@keyframes haSlide{0%,46%{opacity:0;transform:translateX(-12px)}57%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-12px)}}
@keyframes haPlainOut{0%,46%{opacity:1}56%,100%{opacity:0}}
@keyframes haCardSel{0%,38%{border-color:transparent;box-shadow:none}46%,100%{border-color:var(--brand,#2b8cff)}}
@keyframes haChk{0%,42%{opacity:0;transform:scale(.4)}50%,100%{opacity:1;transform:scale(1)}}
@keyframes haProg{0%,40%{width:0}70%,92%{width:100%}100%{width:0}}
@keyframes haCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Kimlik / form kartı (hesap, abonelik) */
.ha-center{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f4f7fc,#eef0fb);padding:18px}
.ha-auth{width:230px;background:#fff;border:1px solid #eef1f7;border-radius:16px;box-shadow:0 14px 30px -18px rgba(20,40,90,.4);padding:18px 18px 20px;text-align:center}
.ha-auth h5{font-size:14px;font-weight:800;color:#0f1530;margin:0 0 12px}
.ha-field{display:flex;align-items:center;height:34px;border:1px solid #e1e6f0;border-radius:9px;padding:0 10px;font-size:12px;color:#3a4258;margin-bottom:9px;background:#fbfcfe;gap:2px}
.ha-field .ph{color:#aab2c6}
.ha-caret{width:1.5px;height:15px;background:var(--brand,#2b8cff);animation:haCaret 1s steps(1) infinite}
.ha-or{font-size:10px;color:#aab2c6;margin:9px 0;position:relative}
.ha-gbtn{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e1e6f0;border-radius:9px;height:34px;font-size:12px;font-weight:700;color:#3a4258;margin-bottom:9px;background:#fff}
.ha-ok{display:inline-flex;align-items:center;gap:6px;color:#16a06a;font-size:12px;font-weight:800;margin-top:8px}
.ha-ok .c{width:20px;height:20px;border-radius:50%;background:#16a06a;color:#fff;display:grid;place-items:center}.ha-ok .c svg{width:12px;height:12px}

/* Renk kümesi / stil düzenleme */
.ha-swatches{display:flex;gap:8px;margin:4px 0 12px}
.ha-sw2{width:24px;height:24px;border-radius:7px;border:2px solid #fff;box-shadow:0 0 0 1px #e1e6f0;position:relative}
.ha-sw2.sel{box-shadow:0 0 0 2px var(--brand,#2b8cff)}

/* Emoji */
.ha-emoji{font-size:17px;line-height:1;display:inline-block}

/* Üye satırı (ajans) */
.ha-member{display:flex;align-items:center;gap:9px;border:1px solid #eef1f7;border-radius:10px;padding:8px 10px;margin-bottom:7px;font-size:12px;font-weight:600;color:#3a4258}
.ha-avatar{width:24px;height:24px;border-radius:50%;background:var(--grad,linear-gradient(135deg,#2b8cff,#1a6fd4));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.ha-role{margin-left:auto;font-size:10px;font-weight:700;color:#8b93ab;background:#f3f5fa;border-radius:6px;padding:2px 7px}

/* Plan kartları (abonelik) */
.ha-plans{display:flex;gap:8px;width:100%;max-width:330px}
.ha-plan{flex:1;background:#fff;border:1.5px solid #e7ebf3;border-radius:13px;padding:12px 10px;text-align:center}
.ha-plan.rec{border-color:var(--brand,#2b8cff);box-shadow:0 10px 24px -16px rgba(43,140,255,.6)}
.ha-plan .pn{font-size:11px;font-weight:800;color:#0f1530}
.ha-plan .pp{font-size:17px;font-weight:800;color:#0f1530;margin:5px 0}
.ha-plan .pp small{font-size:9px;color:#8b93ab;font-weight:600}
.ha-plan .pb{margin-top:8px;border-radius:8px;font-size:10.5px;font-weight:700;padding:6px 0;background:#eef1f7;color:#3a4258}
.ha-plan.rec .pb{background:var(--brand,#2b8cff);color:#fff}

/* İlerleme / indirme */
.ha-prog{height:7px;border-radius:6px;background:#e7ebf3;overflow:hidden;margin-top:10px}
.ha-prog i{display:block;height:100%;border-radius:6px;background:var(--grad,linear-gradient(135deg,#2b8cff,#1a6fd4));width:0;animation:haProg 9s ease-in-out infinite}

/* Logo/görsel overlay (telefonda) */
.ha-logo{position:absolute;top:8%;right:7%;background:rgba(255,255,255,.92);border-radius:8px;padding:4px 8px;font-family:var(--display);font-weight:800;font-size:11px;color:#1a2440;box-shadow:0 4px 10px rgba(0,0,0,.25);z-index:14}

/* Fatura satırı */
.ha-bill{display:flex;align-items:center;gap:9px;border:1px solid #eef1f7;border-radius:10px;padding:9px 11px;margin-bottom:7px;font-size:12px;color:#3a4258}
.ha-bill .amt{margin-left:auto;font-weight:700}
.ha-bill .dl{width:26px;height:26px;border-radius:7px;background:#eef4ff;color:var(--brand,#2b8cff);display:grid;place-items:center}.ha-bill .dl svg{width:14px;height:14px}

/* Mini zaman çizelgesi (logo/görsel ekleme) */
.ha-tl{border-top:1px solid #eef1f7;padding:8px;background:#fbfcfe}
.ha-tlbar{display:flex;gap:6px;margin-bottom:6px}
.ha-tlbtn{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#3a4258;border:1px solid #e7ebf3;border-radius:7px;padding:4px 8px;background:#fff}
.ha-tlrow{height:14px;border-radius:5px;background:#eef1f7;position:relative;margin-bottom:4px}
.ha-tlrow.v{background:linear-gradient(90deg,#cfe0ff,#b9d2ff)}
.ha-tlrow .blk{position:absolute;top:0;bottom:0;border-radius:5px}

/* Düzenle (metin) satırları */
.ha-line{display:flex;align-items:center;gap:7px;border:1px solid #eef1f7;border-radius:9px;padding:7px 9px;margin-bottom:6px;font-size:11.5px;color:#3a4258}
.ha-line .t{font-size:9px;color:#aab2c6;font-weight:700;flex:none}