/* ═══════════════════════════════════════════════════════════════
   STEP INDICATOR DESIGNS — 6 belirgin farklı tasarım
   Body üzerinde data-step-style="1..6"
   Hedef: hem ilan-ekle hem ilan-ekle-mezat step indicator'ları
   Ortak selektörler:
     - .mz-steps, .sp-steps  (container)
     - .mz-step, .sp-step    (adım item)
     - .mz-step-circle, .sp-step-circle (numara daire)
     - .mz-step-lbl, .sp-step-lbl (label)
     - .mz-step-line, .sp-step-line (birleştirici çizgi)
   Aktif: [data-active="1"]  |  Tamamlandı: [data-done="1"]
   ═══════════════════════════════════════════════════════════════ */

/* ORTAK — tüm tasarımlarda tıklanabilir */
.mz-step, .sp-step { cursor:pointer; transition:transform .2s }
.mz-step:hover, .sp-step:hover { transform:translateY(-2px) }

/* ═══ GLOBAL: AKTİF step'te sayı net görünür (her stilde) ═══ */
.mz-step[data-active="1"] .mz-step-circle,
.sp-step[data-active="1"] .sp-step-circle{
  background:linear-gradient(135deg,var(--p,#6c63ff),var(--pd,var(--p,#6c63ff)))!important;
  color:#fff!important;
  border-color:var(--p,#6c63ff)!important;
  box-shadow:0 4px 14px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.35);
}

/* ═══ GLOBAL: TAMAMLANAN step — yeşil blur + beyaz tik işareti ═══ */
.mz-step[data-done="1"] .mz-step-circle,
.sp-step[data-done="1"] .sp-step-circle{
  background:linear-gradient(135deg,#10b981,#059669)!important;
  border-color:#10b981!important;
  color:transparent!important;          /* rakamı gizle */
  font-size:0!important;
  position:relative;
  box-shadow:0 4px 14px rgba(16,185,129,.35),inset 0 0 10px rgba(255,255,255,.15);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.mz-step[data-done="1"] .mz-step-circle::after,
.sp-step[data-done="1"] .sp-step-circle::after{
  content:"\f00c"; /* Font Awesome check */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:16px;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
  z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
/* Tamamlanan step'i birleştirici çizgi de yeşil */
.mz-step[data-done="1"] .mz-step-line,
.sp-step[data-done="1"] .sp-step-line{
  background:linear-gradient(90deg,#10b981,#059669)!important;
}

/* ═══ GLOBAL ROTATING BORDER — aktif step'e dönen conic gradient border ═══
   body[data-step-anim="1"] aktifken aktif step'in dairesinde döner.
   z-index:-1 + isolation:isolate ile iç sayı ASLA kaplanmaz. */
body[data-step-anim="1"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-anim="1"] .sp-step[data-active="1"] .sp-step-circle{
  position:relative;
  isolation:isolate;
  overflow:visible!important;
}
body[data-step-anim="1"] .mz-step[data-active="1"] .mz-step-circle::before,
body[data-step-anim="1"] .sp-step[data-active="1"] .sp-step-circle::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  padding:3px;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.9) 70deg,var(--s,var(--p)) 140deg,transparent 240deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:spStepRotate 2.8s linear infinite;
  z-index:-1;
  pointer-events:none;
}
@keyframes spStepRotate{to{transform:rotate(360deg)}}

/* INVALID / EKSİK DURUM — kırmızı shake animasyon */
.mz-step[data-invalid="1"] .mz-step-circle,
.sp-step[data-invalid="1"] .sp-step-circle{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
  color:#fff!important;
  border-color:#ef4444!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.18),0 6px 18px rgba(239,68,68,.4)!important;
  animation:spStepShake .45s cubic-bezier(.36,.07,.19,.97) both
}
.mz-step[data-invalid="1"] .mz-step-lbl,
.sp-step[data-invalid="1"] .sp-step-lbl{color:#ef4444!important;font-weight:900!important}
@keyframes spStepShake{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(2px,0,0)}
  30%,50%,70%{transform:translate3d(-4px,0,0)}
  40%,60%{transform:translate3d(4px,0,0)}
}

/* ═══ STYLE 1: MODERN GRADIENT (varsayılan - mevcut) ═══ */
body[data-step-style="1"] .mz-step-circle,
body[data-step-style="1"] .sp-step-circle{
  width:38px;height:38px;border-radius:50%;background:var(--bg2);color:var(--tl);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
  transition:all .3s;border:2px solid var(--brd)
}
body[data-step-style="1"] .mz-step-line,
body[data-step-style="1"] .sp-step-line{background:var(--brd)}
body[data-step-style="1"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-style="1"] .sp-step[data-active="1"] .sp-step-circle{
  background:linear-gradient(135deg,var(--p),var(--pd,var(--p)));color:#fff;border-color:var(--p);
  box-shadow:0 4px 14px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.35);transform:scale(1.1)
}
body[data-step-style="1"] .mz-step[data-done="1"] .mz-step-circle,
body[data-step-style="1"] .sp-step[data-done="1"] .sp-step-circle{
  background:#10b981;color:#fff;border-color:#10b981
}
body[data-step-style="1"] .mz-step[data-active="1"] .mz-step-lbl,
body[data-step-style="1"] .sp-step[data-active="1"] .sp-step-lbl{color:var(--p);font-weight:800}

/* ═══ STYLE 2: SQUARE BRUTALIST — Kare, kalın, offset shadow ═══ */
body[data-step-style="2"] .mz-step-circle,
body[data-step-style="2"] .sp-step-circle{
  width:44px;height:44px;border-radius:0;background:var(--white);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;
  border:3px solid var(--text,#1e1e3a);box-shadow:3px 3px 0 var(--brd);
  transition:all .2s
}
body[data-step-style="2"] .mz-step-line,
body[data-step-style="2"] .sp-step-line{background:var(--text,#1e1e3a);height:3px}
body[data-step-style="2"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-style="2"] .sp-step[data-active="1"] .sp-step-circle{
  background:var(--p);color:#fff;box-shadow:5px 5px 0 var(--text,#1e1e3a);transform:translate(-2px,-2px)
}
body[data-step-style="2"] .mz-step[data-done="1"] .mz-step-circle,
body[data-step-style="2"] .sp-step[data-done="1"] .sp-step-circle{
  background:#10b981;color:#fff;box-shadow:3px 3px 0 var(--text,#1e1e3a)
}
body[data-step-style="2"] .mz-step-lbl,
body[data-step-style="2"] .sp-step-lbl{text-transform:uppercase;letter-spacing:.5px;font-weight:900}

/* ═══ STYLE 3: GLASS PILL — Şeffaf uzun pill ═══ */
body[data-step-style="3"] .mz-steps,
body[data-step-style="3"] .sp-steps{
  background:linear-gradient(135deg,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.08),rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.02));
  padding:10px 14px;border-radius:50px;border:1px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.2);
  backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.05)
}
body[data-step-style="3"] .mz-step-circle,
body[data-step-style="3"] .sp-step-circle{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.7);color:var(--tl);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  backdrop-filter:blur(6px);border:1.5px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.2);
  transition:all .25s
}
body[data-step-style="3"] .mz-step-line,
body[data-step-style="3"] .sp-step-line{background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.25);height:2px;top:16px}
body[data-step-style="3"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-style="3"] .sp-step[data-active="1"] .sp-step-circle{
  background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.9);color:#fff;border-color:var(--p);
  box-shadow:0 6px 18px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.35)
}
body[data-step-style="3"] .mz-step[data-done="1"] .mz-step-circle,
body[data-step-style="3"] .sp-step[data-done="1"] .sp-step-circle{
  background:rgba(16,185,129,.85);color:#fff;border-color:#10b981
}

/* ═══ STYLE 4: NEON CIRCLE — Parlak neon çember ═══ */
body[data-step-style="4"] .mz-step-circle,
body[data-step-style="4"] .sp-step-circle{
  width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--tl);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
  border:2.5px solid var(--brd);position:relative;transition:all .3s
}
body[data-step-style="4"] .mz-step-line,
body[data-step-style="4"] .sp-step-line{background:var(--brd);height:3px}
body[data-step-style="4"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-style="4"] .sp-step[data-active="1"] .sp-step-circle{
  background:var(--white);color:var(--p);border-color:var(--p);
  box-shadow:0 0 0 4px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.15), 0 0 24px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.4);
  transform:scale(1.15)
}
body[data-step-style="4"] .mz-step[data-active="1"] .mz-step-circle::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--p);
  opacity:.4;animation:stepPulse 1.5s ease-in-out infinite
}
@keyframes stepPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.1;transform:scale(1.15)}}
body[data-step-style="4"] .mz-step[data-done="1"] .mz-step-circle,
body[data-step-style="4"] .sp-step[data-done="1"] .sp-step-circle{
  background:#10b981;color:#fff;border-color:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.15), 0 0 16px rgba(16,185,129,.3)
}

/* ═══ STYLE 5: PROGRESS BAR (v4.3: Blurlu tik + sağdan sola progress) ═══ */
body[data-step-style="5"] .mz-steps,
body[data-step-style="5"] .sp-steps{position:relative;gap:0}
body[data-step-style="5"] .mz-steps::before,
body[data-step-style="5"] .sp-steps::before{
  content:'';position:absolute;left:5%;right:5%;top:22px;height:8px;
  background:linear-gradient(90deg,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.08),rgba(var(--s-r,255),var(--s-g,101),var(--s-b,132),.04));
  border-radius:10px;z-index:0;backdrop-filter:blur(4px);border:1px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.1)
}
/* Progress fill (sağdan sola uzanan) */
body[data-step-style="5"] .mz-steps::after,
body[data-step-style="5"] .sp-steps::after{
  content:'';position:absolute;right:5%;top:22px;height:8px;
  width:var(--step5-progress,0%);
  background:linear-gradient(90deg,var(--p),var(--s),var(--p));
  background-size:200% 100%;
  border-radius:10px;z-index:0;
  animation:step5Shine 3s ease infinite;
  transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 14px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.3)
}
@keyframes step5Shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
body[data-step-style="5"] .mz-step,
body[data-step-style="5"] .sp-step{position:relative;z-index:1;flex:1;max-width:160px}
body[data-step-style="5"] .mz-step-line,
body[data-step-style="5"] .sp-step-line{display:none}
body[data-step-style="5"] .mz-step-circle,
body[data-step-style="5"] .sp-step-circle{
  width:48px;height:48px;border-radius:50%;
  background:rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.12);
  backdrop-filter:blur(10px);
  color:var(--tl);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;
  border:1.5px solid rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.25);
  transition:all .3s cubic-bezier(.4,0,.2,1);position:relative
}
body[data-step-style="5"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-style="5"] .sp-step[data-active="1"] .sp-step-circle{
  background:linear-gradient(135deg,var(--p),var(--s));color:#fff;
  border-color:rgba(255,255,255,.6);
  box-shadow:0 0 0 4px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.3), 0 8px 22px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.5);
  transform:scale(1.1)
}
body[data-step-style="5"] .mz-step[data-done="1"] .mz-step-circle,
body[data-step-style="5"] .sp-step[data-done="1"] .sp-step-circle{
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(16,185,129,.35),0 4px 12px rgba(16,185,129,.4)
}
body[data-step-style="5"] .mz-step[data-done="1"] .mz-step-circle::after,
body[data-step-style="5"] .sp-step[data-done="1"] .sp-step-circle::after{
  content:'✓';font-size:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))
}
body[data-step-style="5"] .mz-step[data-done="1"] .mz-step-circle > *,
body[data-step-style="5"] .sp-step[data-done="1"] .sp-step-circle > *{display:none}

/* ═══ STYLE 6: CARD STEPS — Her adım mini kart ═══ */
body[data-step-style="6"] .mz-steps,
body[data-step-style="6"] .sp-steps{gap:12px}
body[data-step-style="6"] .mz-step,
body[data-step-style="6"] .sp-step{
  background:var(--white);border:2px solid var(--brd);border-radius:14px;
  padding:12px 16px 10px;flex-direction:row;gap:10px;align-items:center;
  transition:all .25s;min-width:130px
}
body[data-step-style="6"] .mz-step-line,
body[data-step-style="6"] .sp-step-line{display:none}
body[data-step-style="6"] .mz-step-circle,
body[data-step-style="6"] .sp-step-circle{
  width:32px;height:32px;border-radius:10px;background:var(--bg2);color:var(--tl);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;border:none
}
body[data-step-style="6"] .mz-step-lbl,
body[data-step-style="6"] .sp-step-lbl{margin:0;text-align:left;font-size:12px}
body[data-step-style="6"] .mz-step[data-active="1"],
body[data-step-style="6"] .sp-step[data-active="1"]{
  background:linear-gradient(135deg,rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.08),rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.02));
  border-color:var(--p);
  box-shadow:0 6px 16px rgba(var(--p-r,108),var(--p-g,99),var(--p-b,255),.2)
}
body[data-step-style="6"] .mz-step[data-active="1"] .mz-step-circle,
body[data-step-style="6"] .sp-step[data-active="1"] .sp-step-circle{
  background:linear-gradient(135deg,var(--p),var(--pd,var(--p)));color:#fff
}
body[data-step-style="6"] .mz-step[data-done="1"],
body[data-step-style="6"] .sp-step[data-done="1"]{border-color:#10b981;background:rgba(16,185,129,.05)}
body[data-step-style="6"] .mz-step[data-done="1"] .mz-step-circle,
body[data-step-style="6"] .sp-step[data-done="1"] .sp-step-circle{background:#10b981;color:#fff}
body[data-step-style="6"] .mz-step-lbl,
body[data-step-style="6"] .sp-step-lbl{font-weight:700}

/* Mobil uyum */
@media (max-width:900px){
  body[data-step-style="5"] .mz-step-lbl,
  body[data-step-style="5"] .sp-step-lbl,
  body[data-step-style="6"] .mz-step-lbl,
  body[data-step-style="6"] .sp-step-lbl{font-size:11px}
}