.idel-stage{
  --idel-stage-flow-color:#fdd835;
  --idel-stage-base-ring-color:#ddd;
  --idel-stage-base-ring-width:1px;
  --idel-stage-flow-ring-width:6px;
  --idel-stage-size:250px;
  --idel-stage-number-size:38px;
  --idel-stage-number-half:19px;
  --idel-stage-ring-start-offset:calc(var(--idel-stage-size) * 0.090909); /* 20/220 */
  --idel-stage-text-color:#666;
  --idel-stage-title-color:#202020;
  --idel-stage-number-bg:var(--idel-stage-flow-color);
  --idel-stage-number-color:#111;
  --idel-stage-surface-bg:#e9e9e9;
  /* SVG circle path 220 kutuda x=20..200 aralığında; teğet için 40px iç boşluk kadar bindir */
  --idel-stage-overlap:calc(var(--idel-stage-size) * 0.181818); /* 40/220 */
  --idel-stage-overlap-mobile:calc(var(--idel-stage-size) * 0.181818); /* 40/220 */
  --idel-stage-draw-duration:.95s;
  --idel-stage-step-stagger:1.05s;
}
.idel-stage__container{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0;
}
.idel-stage__step{
  position:relative;
  width:var(--idel-stage-size);
  height:var(--idel-stage-size);
  display:flex;
  justify-content:center;
  align-items:center;
}
.idel-stage__step + .idel-stage__step{
  margin-left:calc(-1 * var(--idel-stage-overlap,38px));
}
.idel-stage__ring{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.idel-stage__ring-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.idel-stage__ring-base{
  fill:none;
  stroke:var(--idel-stage-base-ring-color);
  stroke-width:var(--idel-stage-base-ring-width);
  stroke-linecap:round;
  stroke-dasharray:none;
}
.idel-stage__ring-flow{
  fill:none;
  stroke:var(--idel-stage-flow-color);
  stroke-width:var(--idel-stage-flow-ring-width);
  stroke-linecap:butt;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  opacity:0;
  animation:idel-stage-draw var(--idel-stage-draw-duration) cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc((var(--idel-stage-step-index,1) - 1) * var(--idel-stage-step-stagger,1.05s));
}
.idel-stage__ring-flow--mobile{
  display:none;
}
.idel-stage__ring-flow--tail{
  display:none;
}
.idel-stage__step:last-child .idel-stage__ring-flow--tail{
  display:block;
  animation-delay:calc((var(--idel-stage-step-index,1) - 1) * var(--idel-stage-step-stagger,1.05s) + var(--idel-stage-draw-duration,.95s) - .02s);
}
.idel-stage__step:last-child .idel-stage__ring-flow--desktop,
.idel-stage__step:last-child .idel-stage__ring-flow--mobile,
.idel-stage__step:last-child .idel-stage__ring-flow--tail{
  animation-timing-function:linear;
}
.idel-stage__ring-flow--tail-mobile{
  display:none;
}
.idel-stage__number{
  position:absolute;
  left:calc((-1 * var(--idel-stage-number-half,19px)) + (var(--idel-stage-overlap,38px) / 2));
  top:50%;
  transform:translateY(-50%);
  width:var(--idel-stage-number-size,38px);
  height:var(--idel-stage-number-size,38px);
  border-radius:50%;
  background:var(--idel-stage-number-bg);
  color:var(--idel-stage-number-color);
  /* Çizgi birleşimindeki sarı çıkıntıları rakam çevresinde temizle */
  box-shadow:0 0 0 calc(var(--idel-stage-flow-ring-width,6px) + 2px) var(--idel-stage-number-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.1rem;
  z-index:10;
  opacity:1;
  animation:none;
}
.idel-stage__step:first-child .idel-stage__number{
  /* İlk numara: halkanın gerçek başlangıç stroke hattı */
  left:calc(var(--idel-stage-ring-start-offset,22px) - var(--idel-stage-number-half,19px));
}
.idel-stage__content{
  text-align:center;
  z-index:5;
  padding:10px;
  width:62%;
  max-width:62%;
  margin:0 auto;
}
.idel-stage__icon{
  margin:0 0 8px;
}
.idel-stage__icon img{
  width:var(--idel-stage-icon-size,28px);
  height:var(--idel-stage-icon-size,28px);
  object-fit:contain;
  display:inline-block;
}
.idel-stage__title{
  margin:0 0 5px;
  font-size:var(--idel-stage-title-size,.85rem);
  font-weight:700;
  color:var(--idel-stage-title-color);
}
.idel-stage__text{
  margin:0;
  font-size:var(--idel-stage-text-size,.7rem);
  line-height:1.3;
  color:var(--idel-stage-text-color);
  padding:0;
}
.idel-stage__text p{
  margin:0;
}
@keyframes idel-stage-draw{
  0%{
    stroke-dashoffset:100;
    opacity:0;
  }
  2%{
    opacity:1;
  }
  100%{
    stroke-dashoffset:0;
    opacity:1;
  }
}
@keyframes idel-stage-number-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes idel-stage-number-activate{
  from{
    background:#cfd3d8;
    color:#4b5563;
    box-shadow:0 0 0 calc(var(--idel-stage-flow-ring-width,6px) + 2px) #cfd3d8;
  }
  to{
    background:var(--idel-stage-number-bg);
    color:var(--idel-stage-number-color);
    box-shadow:0 0 0 calc(var(--idel-stage-flow-ring-width,6px) + 2px) var(--idel-stage-number-bg);
  }
}
@media (min-width:901px){
  /* Desktop: 1 sabit sarı, diğerleri başlangıçta gri */
  .idel-stage__step:not(:first-child) .idel-stage__number{
    background:#cfd3d8;
    color:#4b5563;
    box-shadow:0 0 0 calc(var(--idel-stage-flow-ring-width,6px) + 2px) #cfd3d8;
    animation:idel-stage-number-activate .35s ease-in-out forwards;
    animation-delay:calc((var(--idel-stage-step-index,1) - 2) * var(--idel-stage-step-stagger,1.05s) + var(--idel-stage-draw-duration,.95s));
  }
}
@media (max-width:900px){
  .idel-stage{
    --idel-stage-size:288px;
  }
  .idel-stage__container{
    flex-direction:column;
    gap:0;
    align-items:center;
  }
  .idel-stage__step + .idel-stage__step{
    margin-left:0;
    margin-top:calc(-1 * var(--idel-stage-overlap-mobile,38px));
  }
  .idel-stage__number{
    left:50%;
    top:calc(-1 * var(--idel-stage-number-half,19px));
    transform:translateX(-50%);
  }
  .idel-stage__step:first-child .idel-stage__number{
    left:50%;
    top:calc(var(--idel-stage-ring-start-offset,22px) - var(--idel-stage-number-half,19px));
    transform:translateX(-50%);
  }
  .idel-stage__step + .idel-stage__step .idel-stage__number{
    /* 2,3,4... numaraları iki halkanın kesişim orta noktasına koy */
    top:calc((var(--idel-stage-overlap-mobile,38px) / 2) - var(--idel-stage-number-half,19px));
  }
  /* Mobil: masaüstündeki gibi 1 hariç numaralar başta gri olsun */
  .idel-stage__step:not(:first-child) .idel-stage__number{
    background:#cfd3d8;
    color:#4b5563;
    box-shadow:0 0 0 calc(var(--idel-stage-flow-ring-width,6px) + 2px) #cfd3d8;
    animation:idel-stage-number-activate .35s ease-in-out forwards;
    animation-delay:calc((var(--idel-stage-step-index,1) - 2) * var(--idel-stage-step-stagger,1.05s) + var(--idel-stage-draw-duration,.95s));
  }
  .idel-stage__ring-flow--desktop{
    display:none;
  }
  .idel-stage__ring-flow--mobile{
    display:block;
  }
  .idel-stage__ring-flow--tail-desktop{
    display:none !important;
  }
  .idel-stage__step:last-child .idel-stage__ring-flow--tail-mobile{
    display:block;
  }
  /* Bizim mantık: tekler sağ yarım, çiftler sol yarım */
  .idel-stage__step:nth-child(odd) .idel-stage__ring-flow--mobile{
    transform:rotate(355deg);
    transform-origin:50% 50%;
  }
  /* 1. adımda başlangıç noktası üst-orta olsun (numara ile birebir hizalı) */
  .idel-stage__step:first-child .idel-stage__ring-flow--mobile{
    transform:none;
  }
  .idel-stage__step:nth-child(even) .idel-stage__ring-flow--mobile{
    transform:rotate(350deg);
    transform-origin:50% 50%;
  }
  .idel-stage__title{
    font-size:var(--idel-stage-title-size-mobile,var(--idel-stage-title-size,.85rem));
  }
  .idel-stage__text{
    font-size:var(--idel-stage-text-size-mobile,var(--idel-stage-text-size,.7rem));
  }
  .idel-stage__content{
    width:60%;
    max-width:60%;
    padding-top:26px;
  }
  .idel-stage__icon img{
    width:var(--idel-stage-icon-size-mobile,var(--idel-stage-icon-size,28px));
    height:var(--idel-stage-icon-size-mobile,var(--idel-stage-icon-size,28px));
  }
}
@media (prefers-reduced-motion:reduce){
  .idel-stage__ring-flow,
  .idel-stage__number{
    animation:none;
  }
  .idel-stage__ring-flow{
    stroke-dashoffset:0;
  }
  .idel-stage__number{
    opacity:1;
  }
}