/* ------------------------------------------------------------------
 * Vitrin — tekil detay sayfası (single-vitrin.php).
 * style.css + demo.css bileşenlerinin (.page-hero, .page-section,
 * .app, .proc-track, .stats-grid/.stat, .chip, .cta) ÜSTÜNE yalnız
 * ek/override; hepsi `sc-` önekli. Renk/gölge/yarıçap :root token'ları.
 * ---------------------------------------------------------------- */

/* ---------- hero: 2 sütun (metin + monitör) ---------- */
.sc-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:60px;align-items:center}
.sc-hero h1{max-width:18ch;margin-top:18px}
.sc-hero h1 .grad{background:linear-gradient(96deg,#8FBAFF 0%,#3B82F6 55%,#0E63C8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-hero .sub{max-width:52ch}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sc-chips span{font-size:12.5px;font-weight:700;color:#9FC3F5;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.24);padding:6px 13px;border-radius:100px}
.sc-promise{display:flex;gap:14px;align-items:flex-start;border-left:2px solid var(--accent);padding:4px 0 4px 20px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:#E7EEF9;max-width:46ch;margin-top:30px}
.sc-promise svg{flex:none;margin-top:4px;color:#7EB2FF}

/* monitör (.app) içinde ekran görüntüsü */
.sc-monitor .app .chrome .url{margin-left:6px;font-size:10.5px;color:#6E85A8;font-weight:600;letter-spacing:0}
.sc-monitor .app .body{height:auto;aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;background:radial-gradient(rgba(94,140,220,.10) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(160deg,#12203C,#0A1220)}
.sc-monitor .app .body img{width:100%;height:100%;object-fit:cover}
.sc-monitor .app .body .ph{color:#4A6089;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ---------- 5·6 problem / çözüm ---------- */
.sc-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sc-col{border:1px solid var(--line);border-radius:var(--r-card);padding:36px 34px;background:#fff;display:grid;gap:16px;align-content:start}
.sc-col.solve{background:linear-gradient(180deg,#F4F8FE,#FFFFFF);border-color:#D9E7FA}
.sc-col .lead{display:flex;align-items:center;gap:12px}
.sc-col .lead .eyebrow{margin:0}
.sc-col .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.sc-col.prob .ic{background:#FEF2F2;border:1px solid #FCD9D9;color:#DC5050}
.sc-col.solve .ic{background:linear-gradient(160deg,#EAF2FC,#F5F9FF);border:1px solid #DBE7F7;color:var(--primary)}
.sc-col p{font-size:16.5px;color:var(--text-2);line-height:1.65}

/* ---------- 7 akış: madde sayısı ne olursa olsun TEK SIRA ---------- */
/* 4 sütun ızgara yerine esnek satır: N adım = N eşit sütun, sarma yok. */
.sc-flow{display:flex;gap:20px}
.sc-flow .step{flex:1 1 0;min-width:0}
.sc-flow .step b{font-size:16px}
.sc-flow .step p{font-size:13px}
@media(max-width:900px){
  .sc-flow{flex-direction:column;gap:30px}
  .sc-flow .step{flex:0 0 auto}
}

/* ---------- 8 yetenekler ---------- */
.sc-caps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.sc-caps li{display:flex;gap:13px;align-items:flex-start;font-size:16px;font-weight:600;color:var(--text-2)}
.sc-caps li svg{flex:none;margin-top:3px;color:var(--primary)}
.sc-caps li b{color:var(--text);font-weight:800;display:block;font-size:16.5px;letter-spacing:-.01em}

/* ---------- 9 teknoloji temeli ---------- */
.sc-tech{display:flex;flex-wrap:wrap;gap:12px}
.sc-tech-block{margin-top:52px}
.sc-tech .chip .sq{background:linear-gradient(160deg,#2563EB,#0057B8)}

/* ---------- 10 faydalar notu ---------- */
.sc-note{margin-top:26px;font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:9px}
.sc-note svg{color:var(--text-3);flex:none}

/* ---------- 11 örnek senaryo ---------- */
.sc-scenario{position:relative;border-radius:22px;overflow:hidden;background:var(--ink-2);color:#fff;padding:52px 56px;isolation:isolate}
.sc-scenario::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(94,140,220,.13) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse 80% 90% at 15% 0%,#000,transparent 75%)}
.sc-scenario .eyebrow{margin-bottom:18px}
.sc-scenario blockquote{font-size:clamp(20px,2.2vw,27px);line-height:1.42;font-weight:700;letter-spacing:-.02em;max-width:52ch;color:#EAF1FB}
.sc-scenario .who{margin-top:22px;font-size:14px;color:#8296B4;font-weight:600}

/* ---------- 12 görsel galerisi ---------- */
.sc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sc-shot{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(148,178,230,.16);background:radial-gradient(rgba(94,140,220,.12) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(160deg,#12203C,#0A1220);aspect-ratio:4/3;box-shadow:var(--shadow-soft)}
.sc-shot img{width:100%;height:100%;object-fit:cover}
.sc-shot .tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;color:#9FC3F5;background:rgba(8,14,26,.55);border:1px solid rgba(148,178,230,.24);padding:5px 10px;border-radius:100px}

@media(max-width:960px){
  .sc-hero .wrap{grid-template-columns:1fr;gap:40px}
  .sc-cols{grid-template-columns:1fr}
  .sc-caps{grid-template-columns:1fr}
  .sc-gallery{grid-template-columns:1fr}
  .sc-scenario{padding:40px 28px}
}