/* ── Mihsap case study (/mihsap-case-study/) — r.4 2026-09-03: HİKÂYE ─────
   Önek: cs-, ch (bölüm), vp (görsel panel), flow/queue/dig/steps/chk/chat
   (sahne parçaları). Token'lar app.css'ten. Zemin: hero (g-hero) → hikâye
   (d-deep) → CTA (d-hero). Tarih/kullanım rakamı yok; tutarlılık skoru
   sayısız (doğruluk-yüzdesi yasağı). */

/* ── HERO ─────────────────────────────────────────────────────────────── */
.cs-hero{background:var(--g-hero);color:#fff;padding:64px 0 72px;overflow:hidden}
.cs-hero .eyebrow{color:var(--d-muted)}
.cs-hero__row{display:flex;flex-direction:column;gap:40px}
.cs-hero__msg{flex:1 1 auto;min-width:0}
.cs-brand{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin:22px 0 26px}
.cs-brand__logo{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:9px 14px}
.cs-brand__logo img{height:32px;width:auto}
.cs-brand__role{font:400 14px/20px Inter,sans-serif;color:var(--d-muted)}
.cs-hero h1{color:#fff;max-width:16ch;margin-bottom:18px}
.cs-hero__deck{font:400 17px/28px Inter,sans-serif;color:var(--d-body);max-width:52ch;margin-bottom:22px}
.cs-hero__jump{display:inline-block;font:600 15px/22px Inter,sans-serif;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hi-mint)}
.cs-hero__jump:hover{color:var(--hi-mint)}
.cs-hero__shot{margin:0;flex:0 0 auto;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--d-line-2);box-shadow:0 24px 64px -24px rgba(0,0,0,.7)}
.cs-hero__shot img{width:100%;height:auto}

/* ── HİKÂYE ───────────────────────────────────────────────────────────── */
.cs-story{background:var(--d-deep);color:#fff;padding:80px 0 72px}
.cs-story .eyebrow{color:var(--hi-mint)}
.ch{display:grid;grid-template-columns:1fr;gap:28px;padding:0 0 72px;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.ch.is-in,.quote.is-in{opacity:1;transform:none}
.ch__rail{display:none}
.ch__dot{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--d-line-2);background:var(--d-hero);font:600 14px/1 "JetBrains Mono",monospace;color:#fff}
.ch__txt h2{margin:14px 0 18px;font-size:30px;line-height:38px;max-width:20ch}
.ch__txt p{font:400 16px/27px Inter,sans-serif;color:var(--d-body);margin-bottom:14px;max-width:56ch}
.ch__txt p b{color:#fff;font-weight:600}
.ch__sum{color:#fff!important;font-weight:500!important;border-left:2px solid var(--hi-mint);padding-left:16px;margin-top:22px}
.ch__vis{min-width:0}
.ch__vis--two{display:grid;gap:16px}

/* mihsap.com bağlantısı — bölüm 1'in altında sade */
.cs-link{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font:400 15px/22px Inter,sans-serif;color:var(--d-body)}
.cs-link b{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hi-mint)}
.cs-link:hover b{color:var(--hi-mint)}
.cs-link__ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(79,227,177,.14);color:var(--hi-mint)}
.cs-link__row{display:flex;justify-content:center;margin:0 0 36px}
.cs-link--lg{font-size:17px;line-height:26px;gap:12px}
.cs-link--lg .cs-link__ico{width:32px;height:32px;border-radius:9px}
.cs-link__ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Mihsap'ın rakamları — açık bant (hero ile hikâye arasında) */
.cs-nums{background:var(--s-2);color:var(--ink);padding:56px 0 52px;border-top:1px solid var(--line)}
.cs-nums__title{text-align:center;color:var(--ink);font-size:26px;line-height:34px;margin:0 auto 32px}
.cs-nums__grid{display:grid;gap:14px}
.cs-num{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 26px;box-shadow:var(--sh-card)}
.cs-num__v{font:600 40px/44px Inter,sans-serif;letter-spacing:-1.2px;color:var(--ink)}
.cs-num__l{font:400 15px/23px Inter,sans-serif;color:var(--body);margin-top:8px}

/* bölüm 2: iki ayrı gereksinim — renkli numara rozeti */
.ch__k{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;margin:0 10px 3px 0;vertical-align:middle;font:600 12px/1 "JetBrains Mono",monospace}
.ch__k--a{background:rgba(255,201,74,.18);color:var(--hi-amber)}
.ch__k--b{background:rgba(111,168,255,.18);color:var(--hi-blue)}
/* ── GÖRSEL PANELLER ──────────────────────────────────────────────────── */
.vp{border-radius:18px;border:1px solid var(--d-line);background:rgba(255,255,255,.03);padding:20px 22px 22px}
.vp__lbl{font:600 11px/16px Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--d-muted);margin-bottom:14px}
.vp__lbl--mt{margin-top:22px}
.mono,.queue__t,.chk__doc span,.chat__src span,.steps__span span{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}

/* akış (bölüm 1) */
.flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
.flow__in{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.flow__chip{font:500 12px/18px Inter,sans-serif;padding:5px 11px;border-radius:999px;border:1px solid var(--d-line-2);color:var(--d-body);background:rgba(255,255,255,.03)}
.flow__arrow{width:1px;height:26px;margin:6px auto;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.35));position:relative}
.flow__arrow::after{content:"";position:absolute;left:-4px;bottom:-1px;border:4.5px solid transparent;border-top:6px solid rgba(255,255,255,.45)}
.flow__box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 18px;border-radius:14px;background:#fff;color:var(--ink)}
.flow__box img{height:26px;width:auto}
.flow__box span{font:500 13px/18px Inter,sans-serif;color:var(--body)}
.flow__out{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.flow__out span{font:500 13px/18px Inter,sans-serif;color:var(--d-body);margin-right:6px}
.flow__out i{width:34px;height:22px;border-radius:5px;border:1px solid var(--d-line-2);background:rgba(255,255,255,.04)}

/* onay kuyruğu + arama yolu (bölüm 2) */
.queue{display:flex;flex-direction:column;gap:8px}
.queue li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--d-line)}
.queue__doc{width:16px;height:20px;border-radius:3px;background:#fff;opacity:.9;flex:none}
.queue__t{flex:1;font-size:12.5px;color:var(--d-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue__btn{font:600 11px/16px Inter,sans-serif;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,201,74,.5);color:var(--hi-amber);white-space:nowrap}
.queue__more{justify-content:center;color:var(--d-muted);font:400 13px/18px Inter,sans-serif;background:none!important;border-style:dashed!important}
.dig__q{display:block;font:500 15px/22px Inter,sans-serif;color:#fff;margin-bottom:12px}
.dig__path{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.dig__path span{font:500 12.5px/18px Inter,sans-serif;padding:6px 11px;border-radius:8px;border:1px solid var(--d-line-2);color:var(--d-body)}
.dig__path i{width:18px;height:1px;background:rgba(255,255,255,.35)}

/* adımlar (bölüm 3) */
.steps{display:flex;flex-direction:column;gap:0;counter-reset:s}
.steps li{position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:0 0 22px}
.steps li::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.steps li:last-child::before{display:none}
.steps__n{grid-row:span 2;width:30px;height:30px;border-radius:50%;background:rgba(79,227,177,.14);color:var(--hi-mint);font:600 13px/30px "JetBrains Mono",monospace;text-align:center}
.steps li b{font:600 15px/22px Inter,sans-serif;color:#fff}
.steps li span:not(.steps__n){font:400 13.5px/20px Inter,sans-serif;color:var(--d-body)}
.steps__span{display:flex;align-items:center;gap:10px;margin-top:4px}
.steps__span i{flex:1;height:1px;background:rgba(79,227,177,.4)}
.steps__span span{font-size:12px;color:var(--hi-mint);letter-spacing:.3px}

/* çapraz kontrol (bölüm 4a) */
.chk__doc{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:#fff;color:var(--ink);margin-bottom:12px}
.chk__tag{align-self:flex-start;font:600 10px/14px Inter,sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--s-wash-blue);color:var(--blue);margin-bottom:4px}
.chk__doc b{font:600 14px/20px Inter,sans-serif}
.chk__doc span{font-size:11.5px;color:var(--body)}
.chk__rows{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.chk__row{display:grid;grid-template-columns:78px 1fr 16px;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--d-line)}
.chk__row span{font:600 12px/16px Inter,sans-serif;color:var(--d-body)}
.chk__row em{font:500 12.5px/16px "JetBrains Mono",monospace;font-style:normal;color:#fff}
.chk__row i.ok{width:16px;height:16px;border-radius:50%;background:var(--hi-mint);position:relative}
.chk__row i.ok::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;border:solid #06301F;border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk__score{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font:600 12px/16px Inter,sans-serif;color:var(--d-body);margin-bottom:12px}
.chk__score b{color:var(--hi-mint)}
.chk__bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.chk__bar i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#4FE3B1,#1FD9BC)}
.chk__res{text-align:center;font:600 13px/18px Inter,sans-serif;padding:9px 12px;border-radius:10px;background:rgba(79,227,177,.14);color:var(--hi-mint)}

/* sohbet (bölüm 4b) */
.chat{display:flex;flex-direction:column;gap:10px}
.chat__q{align-self:flex-end;max-width:90%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:rgba(111,168,255,.18);color:#fff;font:500 14px/20px Inter,sans-serif}
.chat__a{align-self:flex-start;max-width:96%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.05);border:1px solid var(--d-line);display:flex;flex-direction:column;gap:6px}
.chat__a b{font:600 15px/22px Inter,sans-serif;color:#fff}
.chat__a>span{font:400 13px/19px Inter,sans-serif;color:var(--d-body)}
.chat__src{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chat__src span{font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--d-line-2);color:var(--d-body)}

/* alıntı (yer tutucu) + sonraki */
.quote{margin:8px auto 0;max-width:820px;padding:30px 34px 28px;border-radius:20px;border:1px solid var(--d-line);background:rgba(255,255,255,.03);text-align:center;position:relative;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.quote::before{content:"\201C";display:block;font:600 56px/40px Inter,sans-serif;color:var(--hi-mint);margin-bottom:6px}
.quote blockquote{margin:0 0 14px;font:500 20px/31px Inter,sans-serif;letter-spacing:-.2px;color:#fff}
.quote figcaption{font:600 14px/20px Inter,sans-serif;color:var(--d-body)}
.quote figcaption::before{content:"";display:inline-block;width:18px;height:1px;background:var(--hi-mint);margin:0 10px 4px 0}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.cs-cta{background:var(--s-2);color:var(--ink);padding:88px 0 96px;text-align:center;border-top:1px solid var(--line)}
.cs-cta h2{color:var(--ink);margin-bottom:14px}
.cs-cta p{font:400 17px/28px Inter,sans-serif;color:#3D4D66;max-width:56ch;margin:0 auto 32px}

/* ── KIRILIMLAR ───────────────────────────────────────────────────────── */
@media (min-width:680px){
  .cs-nums__grid{grid-template-columns:repeat(2,1fr)}
  .ch__vis--two{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .cs-hero{padding:88px 0 96px}
  .cs-hero__row{flex-direction:row;align-items:center;gap:56px}
  .cs-hero__msg{flex:0 1 520px}
  .cs-hero__shot{flex:1 1 0;min-width:0}
  .cs-story{padding:104px 0 96px}
  .ch{grid-template-columns:56px minmax(0,520px) minmax(0,1fr);column-gap:40px;padding-bottom:96px;align-items:start}
  .ch__rail{display:block;position:relative;height:100%}
  .ch__rail::after{content:"";position:absolute;left:18px;top:44px;bottom:-96px;width:1px;background:rgba(255,255,255,.12)}
  .ch--last .ch__rail::after{display:none}
  .ch__txt h2{font-size:34px;line-height:42px}
  .ch__vis{position:sticky;top:112px}
  .cs-nums{padding:80px 0 72px}
  .cs-nums__title{font-size:32px;line-height:40px;margin-bottom:44px;white-space:nowrap}
  .cs-nums__grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .ch__vis--two{grid-template-columns:1fr;position:static}
}
@media (min-width:1240px){
  .ch{grid-template-columns:56px minmax(0,560px) minmax(0,1fr);column-gap:56px}
  .ch__vis--two{grid-template-columns:1fr 1fr}
}