/* Proses Case Index — scoped styles. Tokens mirror the Proses T.İ.M. hero. */
.pci-index{
  --pci-bg:#12151b; --pci-panel:#171b23; --pci-text:#fff; --pci-muted:#a9b2bd;
  --pci-faint:#8891a0; --pci-line:#2a303b; --pci-accent:#12a488; --pci-on-accent:#12151b;
  --pci-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pci-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --pci-list:56%; --pci-gap:64px; --pci-row-pad:28px; --pci-sticky-top:96px;
  --pci-ratio:4 / 5; --pci-ratio-m:16 / 10; --pci-img-fit:contain;
  /* panel caption position */
  --pci-cap-y:flex-end; --pci-scrim-dir:to top; --pci-scrim-reach:55%; --pci-cap-x:stretch; --pci-cap-align:left; --pci-cap-pad:28px;
  /* panel large number */
  --pci-pnum-oy:22px; --pci-pnum-ox:28px;
  --pci-pnum-top:var(--pci-pnum-oy); --pci-pnum-bottom:auto; --pci-pnum-left:auto; --pci-pnum-right:var(--pci-pnum-ox);
  --pci-pnum-z:2; --pci-pnum-size:clamp(64px,8vw,120px);
  --pci-pnum-color:color-mix(in srgb,var(--pci-text) 10%,transparent); --pci-radius:14px; --pci-fade:480ms;
  --pci-ease:cubic-bezier(.22,.61,.36,1);

  position:relative; box-sizing:border-box;
  background:var(--pci-bg); color:var(--pci-text);
  font-family:var(--pci-sans); font-size:16px; line-height:1.6;
  padding:80px 20px; -webkit-font-smoothing:antialiased;
}
.pci-index *,.pci-index *::before,.pci-index *::after{box-sizing:border-box}
.pci-index h2,.pci-index h3,.pci-index p,.pci-index ol,.pci-index figure{margin:0;padding:0}
.pci-index ol{list-style:none}
/* Keep theme / Elementor Kit heading fonts from leaking in */
.pci-index .pci-index__heading,.pci-index .pci-index__title{font-family:var(--pci-sans)}
.pci-index a{color:inherit;text-decoration:none}
@media (min-width:1025px){.pci-index{padding:112px 48px}}

/* ---------- Header ---------- */
.pci-index__head{max-width:1240px;margin:0 auto 48px}
@media (min-width:1025px){.pci-index__head{margin-bottom:72px}}
.pci-index__eyebrow{
  font-family:var(--pci-mono);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--pci-accent);display:flex;align-items:center;gap:9px
}
.pci-index__eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--pci-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pci-accent) 18%,transparent)
}
.pci-index__heading{
  font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-1px;line-height:1.1;
  margin-top:16px;max-width:22ch;color:var(--pci-text)
}
.pci-index__intro{color:var(--pci-muted);font-size:15.5px;line-height:1.7;max-width:56ch;margin-top:16px}

/* ---------- Body grid ---------- */
.pci-index__body{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1025px){
  .pci-index__body{grid-template-columns:minmax(0,var(--pci-list)) minmax(0,1fr);column-gap:var(--pci-gap);align-items:start}
}

/* ---------- List ---------- */
.pci-index__list{border-top:1px solid var(--pci-line)}
.pci-index__item{border-bottom:1px solid var(--pci-line)}
.pci-index__row{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 40px;
  column-gap:clamp(16px,2.4vw,32px);align-items:start;padding:var(--pci-row-pad) 0;
  outline-offset:4px;border-radius:2px
}
.pci-index__row::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--pci-accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--pci-fade) var(--pci-ease)
}
.pci-index__item.is-active .pci-index__row::after{transform:scaleX(1)}
.pci-index__row:focus-visible{outline:2px solid var(--pci-accent)}

.pci-index__num{
  font-family:var(--pci-mono);font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--pci-faint);
  padding-top:6px;min-width:2.4ch;transition:color .2s
}
.pci-index__item.is-active .pci-index__num{color:var(--pci-accent)}

.pci-index__meta{
  display:block;font-family:var(--pci-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--pci-faint)
}
.pci-index__title{
  font-size:clamp(20px,2.1vw,28px);font-weight:700;letter-spacing:-.5px;line-height:1.2;
  margin-top:6px;color:var(--pci-text);transition:color .25s var(--pci-ease)
}
.pci-index__desc{
  color:var(--pci-muted);font-size:14px;line-height:1.6;margin-top:10px;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.pci-index__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pci-index__tag{
  font-family:var(--pci-mono);font-size:11px;color:var(--pci-muted);
  border:1px solid var(--pci-line);border-radius:999px;padding:3px 10px;line-height:1.5
}

.pci-index__arrow{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--pci-line);color:var(--pci-text);
  transition:background .2s,border-color .2s,color .2s,transform .25s var(--pci-ease)
}
.pci-index__arrow svg{width:14px;height:14px}
.pci-index__item.is-active .pci-index__arrow{background:var(--pci-accent);border-color:var(--pci-accent);color:var(--pci-on-accent)}

/* Mobile/tablet drawer: preview under the active title (replaces the right panel) */
.pci-index__drawer{display:grid;grid-template-rows:0fr;opacity:0}
.pci-index__item.is-active .pci-index__drawer,
.pci-index[data-mobile="inline"] .pci-index__drawer{grid-template-rows:1fr;opacity:1}
/* Opening animates; closing is instant so the tapped row doesn't jump. */
.pci-index__item.is-active .pci-index__drawer{
  transition:grid-template-rows var(--pci-fade) var(--pci-ease),opacity var(--pci-fade) var(--pci-ease)
}
.pci-index__drawer-inner{min-height:0;overflow:hidden}
.pci-index__mini{
  width:100%;flex-shrink:0;
  position:relative;display:block;margin-top:14px;aspect-ratio:var(--pci-ratio-m);
  border-radius:calc(var(--pci-radius) * .8);overflow:hidden;background:var(--pci-panel);
  border:1px solid var(--pci-line);isolation:isolate
}
.pci-index__mini .pci-index__caption{gap:0}
.pci-index__mini .pci-index__metric{padding-top:0;border-top:0}
.pci-index__mini .pci-index__metric-value{font-size:22px}
.pci-index__mini .pci-index__metric-label{font-size:11px}
@media (min-width:1025px){.pci-index__drawer{display:none}}
@media (max-width:1024px){
  .pci-index{--pci-cap-pad:14px 16px;--pci-pnum-oy:10px;--pci-pnum-ox:14px;--pci-pnum-size:48px}
}

/* ---------- Sticky panel ---------- */
.pci-index__panel{display:none}
@media (min-width:1025px){
  .pci-index__panel{display:block;align-self:stretch}
  .pci-index__sticky{position:sticky;top:var(--pci-sticky-top)}

  /* Editorial dimming: inactive titles recede */
  .pci-index__item:not(.is-active) .pci-index__title{color:var(--pci-muted)}
}

.pci-index__stage{
  position:relative;aspect-ratio:var(--pci-ratio);border-radius:var(--pci-radius);overflow:hidden;
  background:var(--pci-panel);border:1px solid var(--pci-line);isolation:isolate
}
.pci-index__slide{
  position:absolute;inset:0;opacity:0;transform:scale(1.035);
  transition:opacity var(--pci-fade) var(--pci-ease),transform calc(var(--pci-fade) * 1.6) var(--pci-ease);
  will-change:opacity
}
.pci-index__slide.is-active{opacity:1;transform:scale(1);z-index:1}
/* Locked to the frame: themes/Elementor ship `img{height:auto;max-width:100%}` rules that would
   otherwise let each image fall back to its own proportions. */
.pci-index .pci-index__img{
  position:absolute !important;inset:0 !important;z-index:0;display:block;
  width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;
  margin:0 !important;object-fit:var(--pci-img-fit) !important;object-position:center;border-radius:0;box-shadow:none
}
.pci-index__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(var(--pci-scrim-dir),color-mix(in srgb,var(--pci-bg) 88%,transparent) 0%,transparent var(--pci-scrim-reach))
}

.pci-index__fallback{
  position:absolute;inset:0;display:block;z-index:0;
  background:
    radial-gradient(ellipse 90% 70% at 20% 10%,color-mix(in srgb,var(--pci-accent) 22%,transparent),transparent 70%),
    repeating-linear-gradient(60deg,rgba(255,255,255,.04) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(-60deg,rgba(255,255,255,.04) 0 1px,transparent 1px 26px),
    var(--pci-panel)
}
.pci-index__panel-num{
  position:absolute;z-index:var(--pci-pnum-z);pointer-events:none;
  top:var(--pci-pnum-top);bottom:var(--pci-pnum-bottom);left:var(--pci-pnum-left);right:var(--pci-pnum-right);
  font-family:var(--pci-mono);font-weight:600;font-size:var(--pci-pnum-size);line-height:1;letter-spacing:-.04em;
  color:var(--pci-pnum-color)
}

.pci-index__caption{
  position:absolute;inset:0;z-index:3;padding:var(--pci-cap-pad);
  display:flex;flex-direction:column;gap:14px;
  justify-content:var(--pci-cap-y);align-items:var(--pci-cap-x);text-align:var(--pci-cap-align)
}
.pci-index__caption-title{font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.25;color:var(--pci-text);max-width:24ch}
.pci-index__metric{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--pci-text) 14%,transparent)}
.pci-index__metric-value{font-family:var(--pci-mono);font-weight:600;font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:var(--pci-accent)}
.pci-index__metric-label{font-size:12px;color:var(--pci-muted)}

.pci-index__counter{display:flex;align-items:center;gap:14px;margin-top:16px;font-family:var(--pci-mono);font-size:11.5px;color:var(--pci-faint)}
.pci-index__counter-current{color:var(--pci-text)}
.pci-index__counter-bar{position:relative;flex:1;height:2px;background:var(--pci-line);overflow:hidden;border-radius:2px}
.pci-index__counter-fill{
  position:absolute;inset:0;background:var(--pci-accent);transform-origin:left;
  transform:scaleX(var(--pci-progress,0));transition:transform var(--pci-fade) var(--pci-ease)
}

/* ---------- Hover-capable enhancements ---------- */
@media (hover:hover) and (pointer:fine){
  .pci-index__row{cursor:default}
  a.pci-index__row{cursor:pointer}
  a.pci-index__row:hover .pci-index__arrow{transform:translate(2px,-2px)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pci-index__slide,.pci-index__item.is-active .pci-index__drawer,.pci-index__row::after,.pci-index__counter-fill,.pci-index__arrow,.pci-index__title{transition:none}
  .pci-index__slide{transform:none}
}