/* ==========================================================================
   İZKOL 5.0 — scene 02 · interactive service showcase
   One service is in focus at a time. No grid of six equal cards.
   ========================================================================== */

/* layout --------------------------------------------------------------- */
.services-layout{
  display:grid;
  grid-template-columns:minmax(0,clamp(240px,23vw,304px)) 1fr;
  gap:clamp(22px,3vw,54px);
  min-height:0;
}
.services-aside{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.services-aside h2{font-size:clamp(28px,2.6vw,42px);line-height:1.09;margin:16px 0 14px}
.services-lead{font-size:14.5px;line-height:1.7;color:var(--muted);max-width:28ch}

.services-stage{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(16px,1.7vh,24px);min-height:0}

/* the index ----------------------------------------------------------- */
.service-index{margin-top:auto;padding-top:24px;display:flex;flex-direction:column}
.service-index li{
  display:flex;
  align-items:stretch;
  border-top:1px solid var(--line-faint);
  transition:border-color var(--fast-dur) var(--soft-ease);
}
.service-index li:last-child{border-bottom:1px solid var(--line-faint)}
.service-index li.is-active{border-color:var(--blue-light)}
.service-index button{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  padding:10px 4px;
  text-align:left;
  color:var(--muted);
  transition:color var(--fast-dur) var(--soft-ease);
}
.service-index-num{
  flex:0 0 auto;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted-soft);
  transition:color var(--fast-dur) var(--soft-ease);
}
.service-index-name{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.service-index a{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;
  font-size:16px;
  color:var(--line-strong);
  transition:color var(--fast-dur) var(--soft-ease);
}
.service-index li:hover .service-index a{color:var(--muted)}
.service-index li.is-active .service-index-num{color:var(--blue)}
.service-index li.is-active .service-index-name{color:var(--navy)}
.service-index li.is-active button{color:var(--navy)}
.service-index a:hover{color:var(--blue-deep)!important}

/* the stage photograph ------------------------------------------------ */
.service-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--cream);
  min-height:220px;
}
.service-media .media-img{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 620ms var(--soft-ease),transform 1300ms var(--scene-ease);
}
.service-media .media-img.active{opacity:1;transform:scale(1)}

/* the active service -------------------------------------------------- */
.service-detail{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px clamp(20px,3vw,44px)}
.service-counter{
  flex:0 0 auto;
  align-self:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--blue);
}
.service-detail h3{flex:0 0 auto;font-size:clamp(20px,1.85vw,28px);line-height:1.2;max-width:20ch}
.service-detail p{flex:1 1 260px;min-width:0;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:46ch}
.service-actions{display:flex;align-items:center;gap:8px 20px;flex:0 0 auto;margin-left:auto}

/* text swap animation -------------------------------------------------- */
.service-detail .is-swapping{opacity:0;transform:translate3d(0,10px,0)}
.service-detail h3,.service-detail p,.service-counter,.service-actions{
  transition:opacity 300ms var(--soft-ease),transform 300ms var(--soft-ease);
}

/* mobile: one big active card + a horizontal selector ------------------ */
@media (max-width:1023.98px){
  .services-layout{gap:22px}
  .services-aside{overflow:visible}
  .services-stage{grid-template-rows:auto auto;gap:18px}
  .service-media{aspect-ratio:3/2;min-height:0}
  .service-index{
    margin-top:22px;
    padding-top:0;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .service-index::-webkit-scrollbar{display:none}
  .service-index li{
    flex:0 0 auto;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--paper-bright);
    scroll-snap-align:start;
  }
  .service-index li:last-child{border-bottom:1px solid var(--line)}
  .service-index li.is-active{background:var(--navy);border-color:var(--navy)}
  .service-index li.is-active .service-index-name{color:var(--paper)}
  .service-index li.is-active .service-index-num{color:var(--cyan)}
  .service-index button{min-height:44px;padding:9px 16px;gap:9px}
  .service-index-name{font-size:14px;white-space:nowrap}
  .service-index-num{font-size:10px}
  .service-index a{display:none}
  .service-detail{gap:8px 18px}
  .service-detail h3{flex:1 1 100%;font-size:22px}
  .service-detail p{flex:1 1 100%;font-size:14.5px;max-width:100%}
  .service-actions{margin-left:0;width:100%}
  .service-actions .button{flex:1 1 auto}
}
@media (max-width:599.98px){
  .service-index{margin-top:18px}
  .service-counter{align-self:flex-start}
  .service-actions{gap:10px 18px}
  .service-actions .text-cta{min-height:48px}
}

/* tablet two-column ---------------------------------------------------- */
@media (min-width:640px) and (max-width:1023.98px){
  .services-layout{grid-template-columns:minmax(190px,240px) 1fr}
  .services-aside h2{font-size:clamp(26px,3.4vw,34px)}
  .service-index button{min-height:48px;gap:10px}
  .service-index-name{font-size:14px}
}