/* ═══ YENİ BÖLÜMLER (09-01, Serdar): #caps + #icp ═══════════════════════
   Önekler: caps- / icp- / co (açıklama etiketi) + sahne önekleri s0/s1/s2c/s3
   ve ortak .win — sayfa sınıflarıyla adaşlık YASAK (.panel dersi; banka
   sahnesi s2 değil s2c).
   r.4 (09-01): #icp BEYAZ zemin; sahne DOĞRUDAN beyaza oturur (koyu kutu
   kaldırıldı), 740×460 TASARIM pikseli (sections.js --icps ile ölçekler,
   mobilde en az .62 + yatay kaydırma); adımları açıklayan .co etiketleri. */

/* ── ANA DEĞER ÖNERİLERİ (AÇIK GRİ — r.5) ─────────────────────────────── */
.caps{background:var(--s-2);color:var(--ink);padding:88px 0 96px}
.caps .eyebrow{color:var(--muted)}
.caps__head{max-width:820px;margin-bottom:48px}
.caps__head h2{color:var(--ink);margin:14px 0 16px}
.caps__deck{font:400 16px/27px Inter,sans-serif;color:var(--body)}
.caps__l2{display:block}   /* ikinci cümle kendi satırında (Serdar r.5) */
.caps__grid{display:grid;gap:14px}
/* r.2: yalnız metin kartı — rozet/numara/bağ yok; r.5: beyaz kart + hairline;
   r.6: renkli ikon karosu (4 ton) + hover'da mavi kenar */
.caps__card{display:flex;flex-direction:column;gap:14px;padding:24px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card);
  transition:box-shadow var(--t-2),transform var(--t-2),border-color var(--t-2)}
.caps__card:hover{box-shadow:var(--sh-raise);transform:translateY(-2px);border-color:rgba(42,107,224,.35)}
.caps__ico,.icp__ico{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.caps__ico svg,.icp__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.caps__ico--blue,.icp__ico--blue{background:var(--s-wash-blue);color:var(--blue)}
.caps__ico--mint,.icp__ico--mint{background:var(--s-wash-green);color:var(--evidence)}
.caps__ico--amber,.icp__ico--amber{background:var(--s-wash-amber);color:var(--caution)}
.caps__ico--violet,.icp__ico--violet{background:#EFEBFD;color:#6D4FD6}
.caps__t{font:400 16px/25px Inter,sans-serif;color:var(--body)}
.caps__t b{color:var(--ink);font-weight:600}
/* tez cümlesi — eski ayrı şeridin yerine, bölümün altında ortalı; vurgu gradyanlı */
.caps__thesis{margin:64px auto 0;max-width:820px;text-align:center;font:600 22px/32px Inter,sans-serif;letter-spacing:-.4px;color:var(--ink)}
.caps__thesis em{font-style:normal;background:linear-gradient(90deg,#2A6BE0,#0B9A86);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

@media (min-width:680px){.caps__grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (min-width:1080px){
  .caps{padding:112px 0 120px}
  .caps__grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .caps__head{margin-bottom:56px}
  .caps__thesis{margin-top:80px;font:600 26px/36px Inter,sans-serif;letter-spacing:-.5px}
}

/* ── ICP AKORDEONU (BEYAZ) ────────────────────────────────────────────── */
.icp{background:#fff;color:var(--ink);padding:80px 0 88px;border-top:1px solid var(--line)}
.icp .eyebrow{color:var(--muted)}
.icp__head{max-width:820px;margin-bottom:40px}
.icp__head h2{color:var(--ink);margin:14px 0 16px}
.icp__deck{font:400 16px/27px Inter,sans-serif;color:var(--body)}
.icp__deck b{color:var(--ink);font-weight:600}
.icp__body{display:flex;flex-direction:column;gap:32px}

/* akordeon: kapalı = yalnız başlık (gri), açık = AÇIK GRİ kart + hairline.
   Geçiş animasyonu YOK — kart anında açılır. */
.icp__acc{display:flex;flex-direction:column;gap:2px}
.icp__item{position:relative;overflow:hidden;border-radius:20px;border:1px solid transparent;padding:12px 22px}
.icp__item.is-on{background:var(--s-1);border-color:var(--line);box-shadow:var(--sh-card);padding:24px 26px 22px;margin:6px 0}
/* r.6: seçili kartın sol kenarında marka gradyanı çubuğu + persona ikonu */
.icp__item.is-on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#2A6BE0,#0B9A86)}
.icp__btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  font:600 20px/28px Inter,sans-serif;letter-spacing:-.3px;color:var(--body);transition:color var(--t-1)}
.icp__btn:hover{color:var(--ink)}
.icp__item.is-on .icp__btn{color:var(--ink);font:600 23px/30px Inter,sans-serif;letter-spacing:-.4px;cursor:default}
.icp__item:not(.is-on) .icp__ico{opacity:.85}
.icp__x{display:none}
.icp__item.is-on .icp__x{display:block}
.icp__need{margin:8px 0 14px;font:400 15px/24px Inter,sans-serif;color:var(--body)}
/* dolgulu yeşil tik — tasarıma renk (Serdar r.4) */
.icp__list li{font:400 14.5px/22px Inter,sans-serif;color:var(--ink-2);padding-left:34px;margin-bottom:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%2310B981'/%3E%3Cpath d='M6.6 11.3l3 3 5.8-6.2' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:22px;background-position:0 0}
.icp .tlink{color:var(--blue);font:400 15px/24px Inter,sans-serif;margin-top:8px}

/* sahne: doğrudan beyaz zeminde; ölçü/ölçek sections.js yazar (--icps + px) */
.icp__stagewrap{min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
.icp__stage{position:relative;width:740px;height:380px}
.icp__scene{position:absolute;left:0;top:0;width:740px;height:380px;transform-origin:0 0;
  transform:scale(var(--icps,1));opacity:0;visibility:hidden;transition:opacity .35s}
.icp__scene.is-on{opacity:1;visibility:visible}
.icp__in{position:absolute;inset:0}
/* sahne cümlesi: sahnenin DIŞINDA, normal akışta (mobilde kesilmez) */
.icp__caps{margin-top:20px;max-width:740px}
.icp__cap{display:none;font:400 14.5px/22px Inter,sans-serif;color:var(--body)}
.icp__cap.is-on{display:block}
.icp__cap b{color:var(--ink);font-weight:600}
/* pencere altı özet şeridi (üç pencereli sahnede ortak) */
.win__sum{position:absolute;left:18px;right:18px;top:318px;background:var(--s-1);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;font:400 11px/16px Inter,sans-serif;color:var(--body);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.win__sum b{font-weight:600;color:var(--ink)}
.g7 .s0__sum,.g6 .s2c__sum,.g6 .s3__sum{opacity:1;transform:none}

/* açıklama etiketi: marka gradyanı, beyaz nokta; sahne adımıyla belirir */
.co{position:absolute;z-index:3;padding:6px 12px 6px 27px;border-radius:9px;font:600 11px/15px Inter,sans-serif;color:#fff;white-space:nowrap;
  background:linear-gradient(90deg,#2A6BE0,#0F9E7E);box-shadow:0 8px 20px rgba(42,107,224,.28);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.co::before{content:"";position:absolute;left:11px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.g1 .co--g1,.g2 .co--g2,.g3 .co--g3,.g4 .co--g4,.g5 .co--g5,.g6 .co--g6,.g7 .co--g7{opacity:1;transform:none}
.g4 .co--off4{opacity:0;transform:translateY(-4px)}   /* ilk etiket, kart değişince çekilir */

/* ortak beyaz ürün penceresi — beyaz zeminde hairline + yumuşak gölge;
   krom HEP partner'ın ("their …") */
.win{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(11,21,38,.13);color:var(--ink)}
.win__bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--s-1);border-radius:15px 15px 0 0}
.win__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.win__t{margin-left:8px;font:600 11px/16px Inter,sans-serif;color:var(--ink-2)}
.win__brand{margin-left:auto;font:600 8.5px/14px Inter,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);background:var(--s-2);border-radius:7px;padding:1px 8px}

/* ── SAHNE 0 · muhasebe yazılımı (kuyruk + karar çekmecesi + özet) ────── */
.s0__q{position:absolute;left:18px;top:56px;width:330px}
.s0__row{position:relative;display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;font:400 11px/16px Inter,sans-serif;color:var(--body);transition:border-color .3s,background .3s}
.s0__row b{font:600 11px/16px Inter,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s0__k{font:600 8px/14px Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);
  background:var(--s-wash-blue);border-radius:6px;padding:0 6px;flex:none}
.s0__a{margin-left:auto;font:500 10.5px/16px "JetBrains Mono",monospace;color:var(--ink-2)}
.s0__st{position:absolute;right:-8px;top:-8px;font:600 8.5px/16px Inter,sans-serif;letter-spacing:.4px;text-transform:uppercase;
  border-radius:8px;padding:0 7px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.s0__st--mint{background:var(--s-wash-green);color:var(--evidence);box-shadow:0 0 0 1px rgba(11,122,104,.25)}
.s0__st--amb{background:var(--s-wash-amber);color:var(--caution);box-shadow:0 0 0 1px rgba(143,93,11,.25)}
/* ödendi çipi SOL-altta (sağ-alt, alt satırın çipiyle çakışıyordu) */
.s0__st--paid{top:auto;bottom:-8px;right:auto;left:12px;background:#fff;color:var(--evidence);box-shadow:0 0 0 1px rgba(11,122,104,.35);text-transform:none;letter-spacing:0}
.s0__row--0{border-color:var(--blue);background:var(--s-1)}
.g4 .s0__row--0{border-color:var(--line);background:#fff}
.g4 .s0__row--0 .s0__st--mint{opacity:1;transform:none}
.g7 .s0__row--0 .s0__st--paid{opacity:1;transform:none}
.g5 .s0__row--1{border-color:var(--caution);background:var(--s-1)}
.g6 .s0__row--1 .s0__st--amb{opacity:1;transform:none}
.s0__dec{position:absolute;left:372px;top:56px;width:344px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;box-shadow:var(--sh-raise)}
.g1 .s0__dec--1{opacity:1;transform:none}
.g4 .s0__dec--1{opacity:0;transform:translateY(-6px)}
.g5 .s0__dec--2{opacity:1;transform:none}
.s0__eb{font:600 8.5px/13px Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.s0__eb--amb{color:var(--caution)}
.s0__t{margin-top:4px;font:600 13.5px/18px Inter,sans-serif;color:var(--ink)}
.s0__why{margin-top:5px;font:400 11px/16px Inter,sans-serif;color:var(--body)}
.s0__ruled{margin-top:7px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.s0__ruled span{font:600 7.5px/14px Inter,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.s0__ruled s{font:400 9.5px/16px Inter,sans-serif;color:var(--muted);background:var(--s-2);border-radius:6px;padding:0 6px}
.s0__conf{margin-top:8px;display:flex;align-items:center;gap:8px}
.s0__bar{flex:1;height:4px;border-radius:2px;background:var(--s-2);overflow:hidden}
.s0__bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--evidence);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.g2 .s0__bar i{width:86%}
.s0__cn{font:500 9.5px/14px "JetBrains Mono",monospace;color:var(--evidence);white-space:nowrap}
.s0__btn{margin-top:11px;display:inline-block;background:var(--blue);color:#fff;border-radius:9px;
  padding:7px 18px;font:600 11.5px/16px Inter,sans-serif;transition:transform .18s,background .18s}
.g3 .s0__btn{transform:scale(.94);background:var(--blue-hover)}
.s0__chip{margin-top:10px;display:inline-block;background:var(--s-wash-amber);color:var(--caution);
  border-radius:9px;padding:4px 10px;font:600 10px/15px Inter,sans-serif}
/* banka mini kartı: ödendi çipini açıklar (g7) */
.s0__eb--mint{color:var(--evidence)}
.s0__bank{position:absolute;left:372px;top:212px;width:344px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.s0__bl{margin-top:5px;display:flex;flex-direction:column;gap:2px;font:400 10px/14px "JetBrains Mono",monospace;color:var(--muted)}
.s0__bl b{font:600 10.5px/15px "JetBrains Mono",monospace;color:var(--evidence)}
.g7 .s0__bank{opacity:1;transform:none}

/* ── SAHNE 1 · ön-muhasebe (telefon + soru-cevap + heads-up; beyaz zemin) ── */
.s1__phone{position:absolute;left:30px;top:8px;width:220px;height:364px;border-radius:26px;background:#fff;
  box-shadow:0 14px 40px rgba(11,21,38,.22),0 0 0 6px #1B2740,0 0 0 7px rgba(11,21,38,.18);overflow:hidden}
.s1__notch{position:absolute;left:50%;top:8px;width:56px;height:7px;border-radius:4px;background:#1B2740;transform:translateX(-50%);z-index:2}
.s1__apptag{position:absolute;right:10px;top:24px;z-index:2;font:600 7.5px/13px Inter,sans-serif;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);background:var(--s-2);border-radius:6px;padding:0 6px}
.s1__shot{position:absolute;inset:0;background:linear-gradient(180deg,#22314D 0%,#101B2E 100%)}
.s1__paper{position:absolute;left:42px;top:66px;width:136px;height:196px;border-radius:6px;background:#F2EFE6;
  box-shadow:0 10px 24px rgba(0,0,0,.4);transform:rotate(-2deg)}
.s1__paper::after{content:"";position:absolute;left:16px;right:16px;top:20px;height:132px;
  background:repeating-linear-gradient(180deg,#C9C3B2 0 3px,transparent 3px 17px)}
.s1__flash{position:absolute;inset:0;background:#fff;opacity:0}
.g1 .s1__flash{animation:s1flash .5s ease-out}
@keyframes s1flash{0%{opacity:0}18%{opacity:.9}100%{opacity:0}}
.s1__card{position:absolute;left:14px;top:58px;width:192px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;box-shadow:var(--sh-raise)}
.g2 .s1__card{opacity:1;transform:none}
.g2 .s1__shot{transition:opacity .5s;opacity:.25}
.s1__f{display:flex;justify-content:space-between;gap:8px;font:400 10px/20px Inter,sans-serif;color:var(--body);border-bottom:1px solid var(--s-2)}
.s1__f b{font:600 10px/20px "JetBrains Mono",monospace;color:var(--ink)}
.s1__chip{display:inline-block;margin-top:9px;background:var(--s-wash-green);color:var(--evidence);border-radius:8px;
  padding:2px 9px;font:600 9.5px/15px Inter,sans-serif;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s}
.g3 .s1__chip{opacity:1;transform:none}
.s1__chat{position:absolute;left:292px;top:26px;width:420px}
.s1__q{position:relative;background:#E9F2FF;color:var(--ink);border-radius:15px;padding:11px 14px;
  font:500 12.5px/18px Inter,sans-serif;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s}
.s1__q i{position:absolute;left:14px;bottom:-8px;width:14px;height:9px;background:#E9F2FF;clip-path:polygon(0 0,100% 0,26% 100%)}
.g4 .s1__q{opacity:1;transform:none}
.s1__ans{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-raise);
  padding:13px 15px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.g5 .s1__ans{opacity:1;transform:none}
.s1__eb{font:600 8.5px/13px Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--blue)}
.s1__eb--amb{color:var(--caution)}
.s1__t{margin-top:4px;font:600 15px/20px Inter,sans-serif;color:var(--ink)}
.s1__s{margin-top:3px;font:400 11.5px/16px Inter,sans-serif;color:var(--body)}
.s1__cite{display:inline-block;margin-top:9px;background:var(--s-wash-green);color:var(--evidence);border-radius:10px;
  padding:2px 10px;font:600 10px/16px Inter,sans-serif;box-shadow:0 0 0 1px rgba(11,122,104,.25)}
.s1__alert{margin-top:12px;background:var(--s-wash-amber);border:1px solid rgba(143,93,11,.22);border-radius:12px;
  padding:10px 13px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.g6 .s1__alert{opacity:1;transform:none}
.s1__at{margin-top:3px;font:400 11.5px/16px Inter,sans-serif;color:var(--ink-2)}

/* ── SAHNE 2c · ERP banka akışı (eşleşme + "no match" + anomali) ──────── */
.s2c__lane{position:absolute;left:18px;top:56px;width:330px}
.s2c__bl{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;
  opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .35s}
.g1 .s2c__bl--0{opacity:1;transform:none}
.g4 .s2c__bl--1{opacity:1;transform:none}
.s2c__k{font:600 8px/14px Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);
  background:var(--s-wash-blue);border-radius:6px;padding:0 6px;margin-right:7px}
.s2c__bl b{font:600 12px/18px "JetBrains Mono",monospace;color:var(--ink)}
.s2c__d{display:block;margin-top:3px;font:400 9.5px/14px "JetBrains Mono",monospace;color:var(--muted)}
.s2c__wire{position:absolute;left:0;top:0;width:740px;height:380px;pointer-events:none}
.s2c__wire path{fill:none;stroke:var(--evidence);stroke-width:1.4;stroke-dasharray:130;stroke-dashoffset:130;opacity:.7}
.g2 .s2c__wire path{transition:stroke-dashoffset .5s ease-out;stroke-dashoffset:0}
.s2c__inv{position:absolute;left:420px;top:70px;width:300px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;transition:border-color .35s,box-shadow .35s}
.g2 .s2c__inv{border-color:var(--evidence);box-shadow:0 0 0 1px rgba(11,122,104,.3)}
.s2c__it{font:600 11px/16px "JetBrains Mono",monospace;color:var(--ink)}
.s2c__is{margin-top:3px;font:400 9.5px/14px Inter,sans-serif;color:var(--muted)}
.s2c__m{position:absolute;left:420px;top:130px;font:600 10px/20px "JetBrains Mono",monospace;color:var(--evidence);
  background:var(--s-wash-green);border-radius:9px;padding:0 9px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.g3 .s2c__m{opacity:1;transform:none}
.s2c__no{position:absolute;left:420px;top:196px;width:300px;background:var(--s-1);border:1px dashed var(--line-strong);
  border-radius:10px;padding:11px 13px;font:400 11px/16px Inter,sans-serif;color:var(--body);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.s2c__no b{color:var(--abstain);font-weight:600}
.g5 .s2c__no{opacity:1;transform:none}
.s2c__anom{position:absolute;left:18px;top:214px;width:330px;background:var(--s-wash-amber);border:1px solid rgba(143,93,11,.22);
  border-radius:10px;padding:10px 12px;font:400 10.5px/15px Inter,sans-serif;color:var(--caution);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.s2c__anom b{font-weight:700}
.g6 .s2c__anom{opacity:1;transform:none}

/* ── SAHNE 3 · e-fatura entegratörü (XML → anlam; mükerrer → tek kayıt) ── */
.s3__xml{position:absolute;left:18px;top:60px;width:240px;background:var(--s-1);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .35s}
.g1 .s3__xml{opacity:1;transform:none}
.s3__xt{font:600 8px/14px Inter,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);
  background:var(--s-wash-blue);border-radius:6px;padding:0 6px;display:inline-block;margin-bottom:6px}
.s3__xt--scan{color:var(--caution);background:var(--s-wash-amber)}
.s3__xml code{display:block;font:400 9.5px/16px "JetBrains Mono",monospace;color:var(--body)}
.s3__wire{position:absolute;left:0;top:0;width:740px;height:380px;pointer-events:none}
.s3__wire path{fill:none;stroke:var(--blue);stroke-width:1.4;stroke-dasharray:130;stroke-dashoffset:130;opacity:.6}
.g2 .s3__wire path{transition:stroke-dashoffset .45s ease-out;stroke-dashoffset:0}
.s3__mean{position:absolute;left:380px;top:58px;width:336px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;box-shadow:var(--sh-raise);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.g2 .s3__mean{opacity:1;transform:none}
.s3__eb{font:600 8.5px/13px Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.s3__t{margin-top:4px;font:600 13.5px/18px Inter,sans-serif;color:var(--ink)}
.s3__pill{display:inline-block;margin:8px 6px 0 0;background:var(--s-wash-green);color:var(--evidence);
  border-radius:8px;padding:1px 8px;font:600 9px/15px Inter,sans-serif}
.s3__acct{display:block;width:max-content;margin-top:9px;font:600 9.5px/18px "JetBrains Mono",monospace;color:var(--blue);
  background:var(--s-wash-blue);border-radius:8px;padding:0 8px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.g6 .s3__acct{opacity:1;transform:none}
.s3__dup{position:absolute;left:18px;top:206px;width:240px;background:#FBFAF5;border:1px solid #E6E1D3;
  border-radius:10px;padding:11px 13px;transform:rotate(-1.6deg) translateX(-14px);opacity:0;transition:opacity .35s,transform .35s}
.g3 .s3__dup{opacity:1;transform:rotate(-1.6deg)}
.s3__ds{font:400 10px/15px Inter,sans-serif;color:var(--body)}
.s3__verdict{position:absolute;left:18px;top:286px;font:600 10.5px/22px Inter,sans-serif;color:var(--caution);
  background:var(--s-wash-amber);border-radius:10px;padding:0 11px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.g4 .s3__verdict{opacity:1;transform:none}
.s3__count{position:absolute;left:380px;top:250px;width:336px;background:var(--s-1);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font:400 12px/17px Inter,sans-serif;color:var(--body);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.s3__count b{font-weight:700;color:var(--ink)}
.g5 .s3__count{opacity:1;transform:none}

/* ≥1000: akordeon solda (%40), sahne sağda; üstten hizalı, panel yapışkan */
@media (min-width:1000px){
  .icp{padding:104px 0 112px}
  .icp__head{margin-bottom:48px}
  .icp__body{flex-direction:row;align-items:flex-start;gap:40px}
  .icp__acc{flex:0 0 40%;max-width:560px}
  .icp__stagewrap{flex:1 1 auto;min-width:0;overflow:visible;position:sticky;top:112px;padding-bottom:0}
}

/* ── GELİŞTİRİCİLER (KOYU, r.7): metin solda, JSON in/out demosu sağda ── */
.dev{background:var(--d-deep);color:#fff;padding:96px 0 104px;border-top:1px solid var(--d-line)}
.dev__head{max-width:820px;margin-bottom:44px}
.dev__head h2{color:#fff;margin:14px 0 16px}
.dev__deck{font:400 16px/27px Inter,sans-serif;color:var(--d-body)}
.dev__body{display:flex;flex-direction:column;gap:44px}
/* r.8: maddeler üstte ızgara (≥680 2, ≥1000 3 sütun) */
.dev__list{display:grid;gap:14px 28px}
.dev__list li{position:relative;padding-left:32px;margin:0;font:400 15px/24px Inter,sans-serif;color:var(--d-body);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234FE3B1'/%3E%3Cpath d='M6 10.3l2.7 2.7 5.3-5.6' fill='none' stroke='%230B1526' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:20px;background-position:0 2px}
.dev__list b{color:#fff;font-weight:600}
.dev__demo{min-width:0}
.dev__meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;min-height:16px}
.dev__nm{font:600 11.5px/16px Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--hi-blue)}
.dev__dots i{display:inline-block;width:6px;height:6px;border-radius:3px;margin-left:6px;background:rgba(255,255,255,.2);transition:width .25s,background .25s}
.dev__dots i.is-on{width:18px;background:#fff}
.dev__pane{background:#0F1D33;border:1px solid var(--d-line-2);border-radius:14px;overflow:hidden;transition:opacity .3s}
.dev__bar{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--d-line);background:rgba(255,255,255,.03)}
.dev__tag{font:600 9.5px/16px Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--d-muted)}
.dev__tag--ok{color:var(--hi-mint)}
.dev__m{font:500 10.5px/16px "JetBrains Mono",monospace;color:var(--d-muted)}
.dev__code{margin:0;padding:14px 16px;min-height:76px;font:400 12.5px/20px "JetBrains Mono",monospace;color:var(--d-body);white-space:pre-wrap;word-break:break-word}
.dev__code.is-typing::after{content:"";display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--hi-blue);animation:devcaret .8s steps(1) infinite}
@keyframes devcaret{50%{opacity:0}}
.j-k{color:var(--hi-blue)} .j-s{color:var(--hi-mint)} .j-n{color:var(--hi-amber)} .j-b{color:var(--hi-violet)}
.dev__ln{min-height:20px}
/* istek → yanıt: mobilde alt alta (dikey akış noktaları), ≥1000 YAN YANA
   (yatay akış noktaları) + sağda açıklama rayı. Yükseklik JS'te ayrılır. */
.dev__io{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.dev__flow{height:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.dev__flow i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18)}
.dev__flow.is-on i{animation:devflow .9s linear infinite}
.dev__flow.is-on i:nth-child(2){animation-delay:.15s} .dev__flow.is-on i:nth-child(3){animation-delay:.3s}
@keyframes devflow{0%{background:rgba(255,255,255,.18);transform:translateY(-3px)}50%{background:var(--hi-blue);transform:translateY(0)}100%{background:rgba(255,255,255,.18);transform:translateY(3px)}}
@keyframes devflowx{0%{background:rgba(255,255,255,.18);transform:translateX(-3px)}50%{background:var(--hi-blue);transform:translateX(0)}100%{background:rgba(255,255,255,.18);transform:translateX(3px)}}
.dev__rail{position:relative;display:none;align-self:stretch;transition:opacity .3s}
.dev__rail .co{position:absolute;left:0;white-space:nowrap}
.co.is-on{opacity:1;transform:none}
/* ("Illustrative payloads" notu r.8'de Serdar'ın isteğiyle kaldırıldı — alan
   adlarının geçici olduğu index.html baş yorumunda kayıtlı) */
@media (min-width:680px){.dev__list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .dev{padding:112px 0 120px}
  .dev__head{margin-bottom:52px}
  .dev__list{grid-template-columns:repeat(3,1fr);gap:18px 32px}
  .dev__io{grid-template-columns:minmax(0,5fr) 44px minmax(0,8fr) 236px;gap:14px}
  .dev__flow{height:auto;flex-direction:row;margin-top:104px;gap:5px}
  .dev__flow.is-on i{animation-name:devflowx}
  .dev__rail{display:block}
}

/* reduced-motion: sahnelerin SON karesi (sections.js .icp--calm basar +
   tüm g-adımlarını ekler); geçişler kapalı */
@media (prefers-reduced-motion:reduce){
  .caps__card,.caps__card:hover{transform:none;transition:none}
  .icp__scene,.co,.win__sum,.s0__dec,.s0__st,.s0__bar i,.s0__btn,.s0__bank,.s1__card,.s1__chip,.s1__q,.s1__ans,.s1__alert,
  .s2c__bl,.s2c__inv,.s2c__m,.s2c__no,.s2c__anom,.s3__xml,.s3__mean,.s3__acct,.s3__dup,.s3__verdict,.s3__count{transition:none!important}
  .g1 .s1__flash{animation:none}
  .s2c__wire path,.s3__wire path{transition:none!important}
  .dev__code.is-typing::after,.dev__flow.is-on i{animation:none}
}