/* ==========================================================================
   MitosOne — ana sayfa anlatısı
   site.css token'larını kullanır; burada ham renk yok.
   Sahne (3B) değerleri --scene-* altında toplandı: kamera açısı, plaka
   kalınlığı, zamanlama. Malzeme renkleri site.css'teki --plate-* token'ları
   (tema başına yeniden bağlanır — açıkta beyaz plaka + yumuşak gölge,
   koyuda yükseltilmiş yüzey + derin gölge).
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.h-hero {
  border-top: 0;
  padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  overflow: clip;
}
.h-hero-grid { display: grid; gap: clamp(1rem, 0.5rem + 2vw, 2rem); align-items: center; }
@media (min-width: 1000px) {
  .h-hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; min-height: min(640px, calc(100svh - var(--header-h) - 150px)); }
}
.h-hero h1 { margin-top: 22px; max-width: 13ch; }
.h-hero .lead { margin-top: 24px; max-width: 46ch; }
.h-hero .hero-actions { margin-top: 32px; }
.h-hero .hero-note { margin-top: 20px; }
.h-proof { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); margin-bottom: 0; }
.h-proof .proof-cell { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.h-proof dd { margin: 0; }
.h-proof dt { max-width: 26ch; }

/* --- İmza sahnesi (CSS 3B) ----------------------------------------------- */
.scene {
  --scene-rx: 56deg;          /* kamera eğimi */
  --scene-rz: -40deg;         /* kamera yönü */
  --scene-t: 12px;            /* plaka kalınlığı */
  --scene-lift: 14px;         /* monolit katman aralığı */
  margin: 0;
  container-type: inline-size;
  position: relative;
}
.scene-view {
  position: relative;
  height: 72cqw;
  max-height: 600px;
  perspective: 2200px;
  perspective-origin: 50% 20%;
  display: grid;
  place-items: center;
}
.scene-cam { transform-style: preserve-3d; }
.scene-floor {
  --rx: var(--scene-rx);
  --rz: var(--scene-rz);
  position: relative;
  width: 82cqw;
  height: 71.75cqw;           /* 640 × 560 tasarım alanı */
  max-width: 660px;
  max-height: 577.5px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
}
/* Zemin ızgarası: mimari çizim kâğıdı — plakaları kesmemesi için maske
   yalnız bu sahte katmana uygulanır. Dolgu yok, yalnız çizgi. */
.scene-floor::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image:
    linear-gradient(to right, var(--floor-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--floor-line) 1px, transparent 1px);
  background-size: calc(100% / 18) calc(100% / 16);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

.scene-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}
.scene-wires .w {
  stroke: var(--wire);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.scene-wires .w--flow { stroke: var(--brand); stroke-width: 2; }
.scene-wires .w--new { stroke: var(--brand); stroke-dasharray: 0.018 0.012; }

/* Plaka: taban (z=0, gölgeyi zemine düşürür) + üst yüz + iki görünür yan yüz. */
.plate {
  position: absolute;
  left: calc(var(--x) * 100% / 640);
  top: calc(var(--y) * 100% / 560);
  width: calc(148 * 100% / 640);
  height: calc(96 * 100% / 560);
  transform-style: preserve-3d;
  border-radius: 3px;
  box-shadow: 10px 14px 26px -6px var(--plate-shadow);
}
.plate-top {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--scene-t));
  background: var(--plate-top);
  border: 1px solid var(--plate-edge);
  border-radius: 3px;
  padding: 9% 9%;
  display: grid;
  align-content: start;
  gap: 9%;
}
/* Üst yüzdeki "alan" çizgileri — kayıt türünün soyut hâli. */
.plate-top b {
  display: block;
  height: 14%;
  width: 44%;
  border-radius: 2px;
  background: var(--ink-3);
  opacity: 0.55;
  font-size: 0;
}
.plate-top i { display: block; height: 7%; border-radius: 2px; background: var(--line-2); }
.plate-top i:nth-of-type(2) { width: 72%; }
.plate-top i:nth-of-type(3) { width: 56%; }
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  background: var(--plate-side);
  border: 1px solid var(--plate-edge);
}
.plate::before { /* güney yüzü (+y) */
  left: 0; top: 100%; width: 100%; height: var(--scene-t);
  transform-origin: top; transform: rotateX(90deg);
}
.plate::after { /* batı yüzü (-x) */
  top: 0; right: 100%; width: var(--scene-t); height: 100%;
  transform-origin: right; transform: rotateY(90deg);
  filter: brightness(0.94);
}
.plate--active .plate-top { border-color: var(--brand-line); }
.plate--active .plate-top b { background: var(--brand); opacity: 1; }

.plate--new .plate-top {
  background: color-mix(in oklab, var(--plate-top) 88%, var(--brand));
  border: 1px dashed var(--brand);
}
.plate--new .plate-top b { background: var(--brand); opacity: 1; }
.plate--new .plate-top i { background: var(--brand-line); }

/* Etiket: kameraya dönük (billboard) — zemin dönüşünün tersi. */
.plate-lbl {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  /* Son translateZ kamera ekseninde öne alır: etiket düzlemi komşu plakaların
     içinden geçmez (derinlik kesişmesi), izdüşümdeki yeri neredeyse değişmez. */
  transform: translateZ(calc(var(--scene-t) + 2px)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(-50%, calc(-100% - 10px)) translateZ(90px);
  white-space: nowrap;
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--ink-0);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
  box-shadow: var(--elev-1);
}
.plate-lbl em {
  display: block;
  margin-top: 3px;
  font: 500 var(--t-micro)/1 var(--font-mono);
  font-style: normal;
  letter-spacing: 0;
  color: var(--brand-ink);
}
.plate--new .plate-lbl { border-color: var(--brand-line); }

.scene-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 4px;
  font: 400 var(--t-caption)/1.4 var(--font-sans);
  color: var(--ink-2);
}
.scene-cap span { display: inline-flex; align-items: center; gap: 7px; }
.scene-cap .k { width: 12px; height: 8px; border-radius: 2px; flex: none; }
.scene-cap .k--std { background: var(--plate-top); border: 1px solid var(--plate-edge); }
.scene-cap .k--new { border: 1px dashed var(--brand); background: var(--brand-soft); }
.scene-cap .k--wire { height: 0; border-top: 2px solid var(--brand); border-radius: 0; }

/* Açılış sekansı — betiksiz çalışır (CSS animasyonu).
   1) altı katman tek bir monolit hâlinde durur (katı ERP)
   2) modüllere ayrılıp yerlerine oturur
   3) ilişkiler çizilir
   4) şirkete özel yeni kayıt türü sisteme iner ve bağlanır. */
@media (prefers-reduced-motion: no-preference) {
  /* Opaklık animasyonu 3B bağlamın DIŞINDA: .scene-floor üzerinde olsaydı
     tarayıcı alt ağacı düzleştirir, yan yüzler ve etiketler zemine yapışırdı. */
  .scene-view { animation: scene-in 600ms var(--ease-out) both; }
  .plate:not(.plate--new) {
    animation: plate-open 950ms var(--ease-emph) calc(300ms + (5 - var(--i)) * 50ms) both;
  }
  .plate:not(.plate--new) .plate-lbl { animation: lbl-in 320ms var(--ease-out) calc(1100ms + var(--i) * 40ms) both; }
  .scene-wires .w { stroke-dashoffset: 1; animation: wire 600ms var(--ease-in-out) calc(1150ms + var(--i, 0) * 80ms) forwards; }
  .scene-wires .w--new { stroke-dasharray: 0.018 0.012; stroke-dashoffset: 0; opacity: 0; animation: fade 400ms var(--ease-out) 2300ms forwards; }
  /* Yeni plaka: yalnız konum anime edilir; opaklık yaprak öğelerde (üst yüz,
     yan yüzler) — plakanın kendisinde opaklık 3B bağlamı düzleştirirdi. */
  .plate--new { animation: plate-drop 650ms var(--ease-out) 1700ms both, shadow-in 650ms var(--ease-out) 1700ms both; }
  .plate--new .plate-top,
  .plate--new::before,
  .plate--new::after { animation: fade-in-op 240ms linear 1700ms both; }
  .plate--new .plate-lbl { animation: lbl-in 320ms var(--ease-out) 2250ms both; }
}
@keyframes scene-in { from { opacity: 0; } }
@keyframes plate-open {
  from {
    translate:
      calc((246 - var(--x)) / 148 * 100%)
      calc((232 - var(--y)) / 96 * 100%)
      calc(var(--i) * var(--scene-lift));
  }
  to { translate: 0 0 0; }
}
@keyframes plate-drop { from { translate: 0 0 170px; } to { translate: 0 0 0; } }
@keyframes shadow-in { from { box-shadow: 0 0 0 transparent; } }
@keyframes fade-in-op { from { opacity: 0; } }
@keyframes lbl-in { from { opacity: 0; } }
@keyframes wire { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

@media (max-width: 999px) {
  .scene { max-width: 620px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .scene { --scene-t: 9px; }
  .scene-view { height: 74cqw; }
  .scene-floor { width: 84cqw; height: 73.5cqw; }
  .plate-lbl { font-size: var(--t-micro); padding: 4px 6px; }
  /* Dar ekranda alt satır komşu etiketin ("Ürün") üstüne biniyordu; anlamı lejant zaten taşıyor. */
  .plate-lbl em { display: none; }
  .scene-cap { gap: 4px 12px; }
}

/* --- 01 · Karşılaştırma matrisi ------------------------------------------ */
.mx-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); overflow: hidden; }
.mx { width: 100%; border-collapse: collapse; }
.mx th, .mx td { text-align: start; vertical-align: top; padding: 18px 22px; }
.mx thead th {
  font: 500 13px/1.3 var(--font-sans);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
  white-space: nowrap;
}
.mx thead th.mx-us { color: var(--ink-0); }
.mx thead .brand-mark { width: 18px; height: 18px; border-radius: 4px; font-size: 7.5px; display: inline-grid; vertical-align: -4px; margin-inline-end: 8px; }
.mx tbody th { width: 24%; font-size: 14.5px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.01em; }
.mx tbody td { font-size: 14.5px; color: var(--ink-2); width: 25.3%; }
.mx tbody tr + tr > * { border-top: 1px solid var(--line-subtle); }
.mx .mx-us { background: var(--brand-soft); }
.mx tbody td.mx-us { color: var(--ink-0); }
.mx thead th.mx-us { box-shadow: inset 0 2px 0 var(--brand); }

@media (max-width: 759px) {
  .mx thead { display: none; }
  .mx, .mx tbody, .mx tr, .mx th, .mx td { display: block; width: auto; }
  .mx tbody tr { padding: 18px 18px 14px; }
  .mx tbody tr + tr { border-top: 1px solid var(--line); }
  .mx tbody tr + tr > * { border-top: 0; }
  .mx tbody th { padding: 0 0 10px; font-size: 15px; }
  .mx tbody td { padding: 7px 0 7px 112px; position: relative; font-size: 14px; }
  .mx tbody td::before {
    content: attr(data-l);
    position: absolute;
    left: 0;
    top: 9px;
    font: 500 var(--t-caption)/1.3 var(--font-sans);
    color: var(--ink-2);
  }
  .mx tbody td.mx-us { background: none; }
  .mx tbody td.mx-us::before { color: var(--brand-ink); }
}

/* --- 02 · Studio temsili --------------------------------------------------- */
.studio {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--elev-3);
  overflow: hidden;
  font-size: 13px;
}
.studio-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.studio-bar .brand-mark { width: 20px; height: 20px; border-radius: 5px; font-size: 8.5px; }
.studio-crumb {
  font: 500 13px/1.2 var(--font-sans);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.studio-crumb b { color: var(--ink-0); font-weight: 500; }
.studio-ver { margin-inline-start: auto; }
.studio-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.studio-tabs span { padding: 7px 10px 9px; font-size: 13px; color: var(--ink-2); }
.studio-tabs .on { color: var(--ink-0); font-weight: 500; box-shadow: inset 0 -2px 0 var(--brand); }
.studio-fields { width: 100%; border-collapse: collapse; }
.studio-fields th {
  text-align: start;
  font: 500 var(--t-caption)/1 var(--font-sans);
  color: var(--ink-2);
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.studio-fields td { padding: 9px 14px; border-bottom: 1px solid var(--line-subtle); color: var(--ink-1); vertical-align: middle; }
.studio-fields td:first-child { font: 500 12.5px/1.3 var(--font-mono); color: var(--ink-0); white-space: nowrap; }
.studio-fields td:last-child { font-size: 12.5px; }
.studio-fields small { color: var(--ink-2); font-size: 12px; margin-inline-start: 4px; font-family: var(--font-mono); }
.studio-fields code { font: 12px/1.3 var(--font-mono); color: var(--brand-ink); }
.ft {
  display: inline-block;
  font: 500 var(--t-micro)/1 var(--font-mono);
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-1);
  white-space: nowrap;
}
.ft--rel { color: var(--info); border-color: var(--info-line); background: var(--info-soft); }
.ft--calc { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.studio-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 11px 14px;
  font: 500 var(--t-caption)/1.4 var(--font-sans);
  color: var(--ink-2);
}
.studio-foot b { color: var(--ink-0); font-weight: 500; }
@media (max-width: 560px) {
  .studio-fields th:nth-child(3), .studio-fields td:nth-child(3) { display: none; }
  .studio-tabs span:nth-child(n+3) { display: none; }
}
/* Alanlar bir bir eklenir: tasarımcıda alan eklemenin karşılığı. */
@media (prefers-reduced-motion: no-preference) {
  .js .studio tbody tr { opacity: 0; transform: translateY(-4px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 70ms); }
  .js .studio.is-in tbody tr { opacity: 1; transform: none; }
}

/* --- Tasarım Danışmanı ----------------------------------------------------- */
.adv {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--elev-3);
  overflow: hidden;
}
.adv-ver { margin-inline-start: auto; }
.adv-body { display: grid; gap: 12px; padding: 16px; }
.adv-msg { display: grid; gap: 4px; max-width: 88%; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); font-size: 14px; color: var(--ink-0); }
.adv-msg p { line-height: 1.5; }
.adv-msg small { font-size: var(--t-caption); color: var(--ink-2); }
.adv-msg--you { justify-self: end; background: var(--brand-soft); }
.adv-who { font: 500 var(--t-label)/1 var(--font-sans); color: var(--ink-2); }
.adv-plan { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.adv-plan-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.adv-plan-head b { font-weight: 500; color: var(--ink-0); }
.adv-plan-head span { font: 500 var(--t-label)/1.6 var(--font-mono); color: var(--ink-2); }
.adv-steps { list-style: none; margin: 0; padding: 0; }
.adv-steps li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-subtle);
  font-size: 13.5px;
  color: var(--ink-1);
}
.adv-steps li:first-child { border-top: 0; }
.adv-steps i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out); }
.adv-steps em { font: 500 var(--t-caption)/1.3 var(--font-sans); font-style: normal; color: var(--ink-2); text-align: end; }
.adv-steps .is-done i { background: var(--brand); border-color: var(--brand); }
.adv-steps .is-done em { color: var(--brand-ink); }
.adv-steps .is-next { background: var(--brand-soft); }
.adv-steps .is-next i { border-color: var(--brand); }
.adv-steps .is-next em { grid-column: 2 / -1; text-align: start; }
.adv-steps .is-next .btn { grid-row: 1; grid-column: 3; }
.adv-steps .is-next.is-done .btn { display: none; }
.adv-steps .is-next.is-done { background: transparent; }
.adv-steps .is-next.is-done em { grid-column: 3; text-align: end; }
.adv-steps .is-busy i { border-color: var(--brand); border-top-color: transparent; animation: spin 700ms linear infinite; }
.adv-steps .is-risk i { border-color: var(--warn-line); border-style: dashed; }
.adv-steps .is-risk em { color: var(--warn); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .adv-steps li { grid-template-columns: 16px minmax(0, 1fr); }
  .adv-steps em, .adv-steps .is-next em, .adv-steps .is-next.is-done em { grid-column: 2; text-align: start; }
  .adv-steps .is-next .btn { grid-row: auto; grid-column: 2; justify-self: start; }
}
/* Sohbet sırayla belirir: soru → cevap → plan. */
@media (prefers-reduced-motion: no-preference) {
  .js .adv .adv-body > * { opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 420ms); }
  .js .adv.is-in .adv-body > * { opacity: 1; transform: none; }
}

/* --- 03 · Süreç ----------------------------------------------------------- */
.flow {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  overflow: hidden;
}
.flow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.flow-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.flow-rec .mono { font-size: 12.5px; color: var(--ink-0); }
.flow-rec-name { font-size: 14px; color: var(--ink-1); }
.flow-play { margin-inline-start: auto; }

.flow-track {
  --n: 5;
  --p: 0;                    /* geçerli aşama indeksi — betik yazar */
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 0;
  padding: 28px 18px 26px;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
/* Ray + dolan ilerleme çizgisi. Dolum, aşama değişimini mekânsal olarak taşır. */
.flow-track::before,
.flow-track::after {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(18px + (100% - 36px) / var(--n) / 2);
  height: 2px;
  border-radius: 2px;
}
.flow-track::before { right: calc(18px + (100% - 36px) / var(--n) / 2); background: var(--line); }
.flow-track::after {
  /* Dolum ölçekle anime edilir (yerleşim değil): tam ray boyu sabit, scaleX ilerlemeyi taşır. */
  width: calc((100% - 36px) / var(--n) * (var(--n) - 1));
  transform-origin: left center;
  transform: scaleX(calc(var(--p) / (var(--n) - 1)));
  background: var(--brand);
  transition: transform 700ms var(--ease-in-out);
}
.flow-st { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding-inline: 6px; }
.flow-st i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: var(--bg-1);
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  transition: border-color 300ms var(--ease-out), background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.flow-st b { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color 300ms var(--ease-out); }
.flow-st small { font: 400 var(--t-caption)/1.4 var(--font-sans); color: var(--ink-2); max-width: 22ch; }
.flow-st.is-done i { border-color: var(--brand); background: var(--brand); }
.flow-st.is-done b { color: var(--ink-0); }
.flow-st.is-now i { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.flow-st.is-now b { color: var(--ink-0); }

.flow-body { display: grid; }
@media (min-width: 900px) { .flow-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.flow-log-wrap, .flow-nodes { padding: 18px 18px 20px; }
@media (min-width: 900px) { .flow-nodes { border-inline-start: 1px solid var(--line); } }
@media (max-width: 899px) { .flow-nodes { border-top: 1px solid var(--line); } }
.flow-cap {
  font: 500 13px/1.2 var(--font-sans);
  color: var(--ink-0);
  margin-bottom: 12px;
}
.flow-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.flow-log li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-subtle);
  font-size: 13.5px;
  color: var(--ink-1);
  max-width: 62ch;
}
.flow-log li:first-child { border-top: 0; }
.flow-log .mono { font-size: 12px; color: var(--ink-2); padding-top: 1px; }
.flow-log em { grid-column: 2; font: 400 var(--t-caption)/1.3 var(--font-sans); font-style: normal; color: var(--ink-2); }
.js .flow-log li { transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
/* Henüz yaşanmamış adım: eskiden %28 opaklıkla okunmaz hâle geliyordu (kontrast ~1,3:1).
   Şimdi metin AA'da kalır; "bekliyor" bilgisini kesik çizgi ve sönük zaman taşır. */
.js .flow-log li.is-off { color: var(--ink-2); border-top-style: dashed; }
.js .flow-log li.is-off .mono { color: var(--ink-2); }
.js .flow-log li.is-off em::after { content: " · sırada"; }
.js .flow-log li:not(.is-off) .mono { color: var(--brand-ink); }
.js .flow-log li.is-new { animation: log-in 420ms var(--ease-out); }
@keyframes log-in { from { opacity: 0; transform: translateY(-4px); } }

.nodes { margin: 0; display: grid; gap: 10px; }
.nodes div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.nodes dt { font: 500 var(--t-caption)/1.5 var(--font-sans); color: var(--ink-0); }
.nodes dd { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 759px) {
  .flow-track { grid-template-columns: 1fr; gap: 0; padding: 20px 18px 8px; }
  .flow-track::before, .flow-track::after { display: none; }
  .flow-st { grid-template-columns: 18px minmax(0, 1fr); justify-items: start; text-align: start; column-gap: 12px; row-gap: 2px; padding: 0 0 16px; }
  .flow-st i { grid-row: span 2; margin: 0; }
  .flow-st:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
  .flow-st.is-done:not(:last-child)::before { background: var(--brand); }
  .flow-play { margin-inline-start: 0; }
}

/* --- 04 · Yetki ----------------------------------------------------------- */
.guard {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  overflow: hidden;
}
@media (min-width: 900px) { .guard { grid-template-columns: 250px minmax(0, 1fr); } }
.guard-roles { display: grid; align-content: start; padding: 10px; gap: 2px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .guard-roles { border-bottom: 0; border-inline-end: 1px solid var(--line); } }
@media (max-width: 899px) { .guard-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guard-roles button {
  display: grid;
  gap: 3px;
  text-align: start;
  padding: 10px 12px;
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  position: relative;
}
.guard-roles small { font: 400 var(--t-caption)/1.3 var(--font-sans); color: var(--ink-2); }
@media (hover: hover) { .guard-roles button:hover { background: var(--bg-2); color: var(--ink-0); } }
/* Ürün kuralı: hover NÖTR, seçili BRAND tint + çubuk. */
.guard-roles button[aria-checked="true"] { background: var(--brand-soft); color: var(--ink-0); box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 559px) { .guard-roles small { display: none; } .guard-roles button { font-size: 13px; padding: 10px; } }

.guard-main { display: grid; align-content: start; min-width: 0; }
.guard-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: baseline;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.guard-cap { font: 500 var(--t-caption)/1.4 var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.guard-rule code { font: 12.5px/1.5 var(--font-mono); color: var(--brand-ink); overflow-wrap: anywhere; }
@media (max-width: 559px) { .guard-rule { grid-template-columns: 1fr; gap: 2px; } .guard-rule code + .guard-cap { margin-top: 8px; } }
.guard-tbl { overflow-x: auto; }
.guard .tbl td, .guard .tbl th { white-space: nowrap; }
.guard .tbl tr[hidden] { display: none; }
.guard .tbl tr.is-in td { animation: fade-in 260ms var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }
.guard td[data-cost]::after { content: attr(data-shown); }
.guard td[data-cost].is-masked { color: var(--ink-3); letter-spacing: 0.12em; }
.guard .tbl tr:last-child td { border-bottom: 1px solid var(--line-subtle); }
.guard-foot { padding: 12px 16px; max-width: 64ch; font-size: 13px; color: var(--ink-2); }
.guard-foot span { font: 500 var(--t-caption)/1 var(--font-mono); color: var(--ink-0); margin-inline-end: 10px; letter-spacing: 0.04em; }
@media (max-width: 559px) {
  .guard .tbl th:nth-child(3), .guard .tbl td:nth-child(3) { display: none; }
  .guard .tbl td, .guard .tbl th { padding-inline: 10px; }
}

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }
.facts li { padding: 18px 0; border-bottom: 1px solid var(--line-subtle); font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.facts b { display: block; color: var(--ink-0); font-weight: 500; font-size: 15px; margin-bottom: 4px; letter-spacing: -0.01em; }


/* --- 05 · Görünümler ------------------------------------------------------ */
.views {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--elev-2);
  overflow: hidden;
}
.views-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 52px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.views-bar .brand-mark { width: 20px; height: 20px; border-radius: 5px; font-size: 8.5px; }
.views-tabs {
  display: flex;
  margin-inline-start: auto;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-1);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.views-tabs button {
  border: 0;
  background: transparent;
  padding: 7px 13px;
  min-height: 34px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
@media (hover: hover) { .views-tabs button:hover { color: var(--ink-0); background: var(--bg-2); } }
.views-tabs button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; }
@media (max-width: 620px) { .views-tabs { margin-inline-start: 0; width: 100%; } .views-tabs button { flex: 1; padding-inline: 6px; } }

.views-stage {
  --stage-h: 430px;
  position: relative;
  height: var(--stage-h);
  margin: 16px;
  contain: layout paint;
}
@media (max-width: 620px) { .views-stage { --stage-h: 400px; margin: 12px; } }

.views-note {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.fine { font-size: 12.5px; color: var(--ink-2); }

/* Kayıt öğesi — beş görünümde de AYNI DOM düğümü; yalnız kutusu ve içeriği değişir.
   Geçişte içerik kısa süre söner (.is-swap), kutu yeni yerine kayar, içerik geri gelir:
   göz, verinin kaybolmadığını — yalnız biçim değiştirdiğini — takip eder. */
.rec {
  --c: var(--ink-3);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  color: var(--ink-1);
  will-change: transform;
  transition:
    transform 540ms var(--ease-in-out),
    width 540ms var(--ease-in-out),
    height 540ms var(--ease-in-out),
    background-color 420ms var(--ease-out),
    border-color 420ms var(--ease-out),
    border-radius 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
  transition-delay: calc(var(--k, 0) * 14ms);
}
.rec[data-s="1"] { --c: var(--chart-3); }
.rec[data-s="2"] { --c: var(--chart-2); }
.rec[data-s="3"] { --c: var(--chart-1); }
.rec > span { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 220ms var(--ease-out); }
.views-stage.is-swap .rec > span { opacity: 0; transition-duration: 90ms; }
.rec .r-id { font: 500 12px/1.2 var(--font-mono); color: var(--ink-0); }
.rec .r-amt { font: 500 12.5px/1.2 var(--font-mono); color: var(--ink-0); }
.rec .r-st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-inline-end: 7px; vertical-align: 1px; }

/* Liste: satır */
.views-stage[data-view="list"] .rec { border-radius: 0; border-bottom-color: var(--line-subtle); padding: 0 8px; }
.views-stage[data-view="list"] .rec > span { display: block; }
.views-stage[data-view="list"] .rec .r-id { width: 84px; flex: none; }
.views-stage[data-view="list"] .rec .r-cari { flex: 1.6; color: var(--ink-0); }
.views-stage[data-view="list"] .rec .r-bolge { flex: 1; color: var(--ink-2); }
.views-stage[data-view="list"] .rec .r-st { flex: 1; }
.views-stage[data-view="list"] .rec .r-date { width: 64px; flex: none; font: 12px/1.2 var(--font-mono); color: var(--ink-2); }
.views-stage[data-view="list"] .rec .r-amt { width: 96px; flex: none; text-align: end; }
@media (max-width: 760px) {
  .views-stage[data-view="list"] .rec :is(.r-bolge, .r-date) { display: none; }
}
@media (max-width: 480px) {
  .views-stage[data-view="list"] .rec .r-st { display: none; }
  .views-stage[data-view="list"] .rec .r-id { width: 70px; }
  .views-stage[data-view="list"] .rec .r-amt { width: 84px; }
}
/* Kanban: kart */
.views-stage[data-view="kanban"] .rec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 5px 8px;
  padding: 0 10px;
  background: var(--bg-1);
  border-color: var(--line);
  box-shadow: var(--elev-1);
}
.views-stage[data-view="kanban"] .rec :is(.r-id, .r-cari, .r-amt) { display: block; }
.views-stage[data-view="kanban"] .rec .r-id { grid-row: 1; grid-column: 1; }
.views-stage[data-view="kanban"] .rec .r-cari { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--ink-0); }
.views-stage[data-view="kanban"] .rec .r-amt { grid-row: 1; grid-column: 2; font-size: 11.5px; color: var(--ink-2); }
/* Dar kanban (telefon): kimlik ve tutar düşer, cari adı iki satıra sarar. */
.views-stage[data-view="kanban"].is-narrow .rec { padding: 0 7px; grid-template-columns: minmax(0, 1fr); }
.views-stage[data-view="kanban"].is-narrow .rec :is(.r-amt, .r-id) { display: none; }
.views-stage[data-view="kanban"].is-narrow .rec .r-cari {
  grid-row: 1; font-size: 11.5px; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.views-stage.is-narrow .ov-h { font-size: var(--t-micro); letter-spacing: 0; }
/* Takvim: çip */
.views-stage[data-view="cal"] .rec {
  padding: 0 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--c) 14%, var(--bg-1));
  box-shadow: inset 2px 0 0 var(--c);
}
.views-stage[data-view="cal"] .rec .r-id { display: block; font-size: var(--t-micro); }
/* Pivot ve grafik: dolu blok — büyüklük = tutar */
.views-stage:is([data-view="pivot"], [data-view="chart"]) .rec { background: var(--c); border-radius: 2px; }

/* Görünüm iskeleleri (sütun başlıkları, takvim ızgarası, eksenler) */
.vw-ov { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms; pointer-events: none; }
.vw-ov.is-on { opacity: 1; visibility: visible; transition: opacity 360ms var(--ease-out) 200ms, visibility 0s; }
.vw-ov > * { position: absolute; }
.ov-h { font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ov-h b { color: var(--ink-0); font-weight: 500; margin-inline-start: 6px; }
.ov-rule { height: 1px; background: var(--line); }
.ov-col { border-radius: 8px; background: var(--bg-2); }
.ov-cell { border: 1px solid var(--line-subtle); }
.ov-cell--off { background: var(--bg-2); }
.ov-day { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--ink-2); }
.ov-day--hol { color: var(--warn); font-weight: 600; }
.ov-hol { font: 500 var(--t-micro)/1.2 var(--font-mono); color: var(--warn); white-space: nowrap; }
.ov-sum { font: 600 13px/1 var(--font-mono); color: var(--ink-0); letter-spacing: -0.01em; white-space: nowrap; }
.ov-sum small { display: block; font: 400 var(--t-micro)/1.4 var(--font-mono); color: var(--ink-2); letter-spacing: 0; margin-top: 3px; }
.ov-key { display: flex; gap: 12px; font: 500 var(--t-micro)/1 var(--font-mono); color: var(--ink-2); }
.ov-key span { display: inline-flex; align-items: center; gap: 6px; }
.ov-key i { width: 8px; height: 8px; border-radius: 2px; }

.views-stage.no-anim .rec, .views-stage.no-anim .vw-ov { transition: none !important; }
.views-stage[data-view="cal"].is-narrow .rec .r-id { display: none; }
.ov-c { text-align: center; }
/* Liste başlığı — satırlarla aynı sütun kuralları */
.ov-lh { display: flex; align-items: center; gap: 12px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--bg-2); border-radius: 6px 6px 0 0; }
.ov-lh > span { font: 500 var(--t-caption)/1 var(--font-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.ov-lh .r-id { width: 84px; flex: none; }
.ov-lh .r-cari { flex: 1.6; }
.ov-lh .r-bolge, .ov-lh .r-st { flex: 1; }
.ov-lh .r-date { width: 64px; flex: none; }
.ov-lh .r-amt { width: 96px; flex: none; text-align: end; }
@media (max-width: 760px) { .ov-lh :is(.r-bolge, .r-date) { display: none; } }
@media (max-width: 480px) { .ov-lh .r-st { display: none; } .ov-lh .r-id { width: 70px; } .ov-lh .r-amt { width: 84px; } }

/* --- 06 · Katmanlar -------------------------------------------------------- */
.layers { display: grid; gap: 10px; }
.layer {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
@media (min-width: 900px) { .layer { grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 24px; } }
.layer-k { font: 500 13px/1.5 var(--font-sans); color: var(--ink-0); }
.layer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.layer li {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13.5px;
  color: var(--ink-0);
  background: var(--bg-1);
}
.layer--own { border-style: dashed; border-color: var(--brand-line); background: transparent; }
.layer--own .layer-k { color: var(--brand-ink); }
.layer--own li { border-style: dashed; border-color: var(--brand-line); background: var(--brand-soft); }
.layer--own li.more { border: 0; background: none; color: var(--ink-2); }
.layer--mods ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 0 20px; }
.layer--mods li { border: 0; border-radius: 0; border-top: 1px solid var(--line-subtle); padding: 10px 0; background: none; display: grid; gap: 2px; }
.layer--mods li b { font-weight: 500; font-size: 14px; }
.layer--mods li span { font-size: 12.5px; color: var(--ink-2); }
.layer--base { background: var(--bg-0); }
:root[data-theme="dark"] .layer--base { background: var(--bg-2); }
.layer--base li { font: 500 12px/1.4 var(--font-mono); color: var(--ink-1); background: var(--bg-2); border-color: var(--line); }

/* --- 07 · Türkiye ---------------------------------------------------------- */
.pipe { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 18px 20px 20px; }
.pipe-k { font: 500 14px/1.4 var(--font-sans); color: var(--ink-0); margin-bottom: 16px; }
.pipe-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
@media (min-width: 820px) { .pipe-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.pipe-steps li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; position: relative; background: var(--bg-1); }
@media (min-width: 820px) {
  .pipe-steps li { border-radius: 0; margin-inline-start: -1px; }
  .pipe-steps li:first-child { border-radius: 8px 0 0 8px; margin: 0; }
  .pipe-steps li:last-child { border-radius: 0 8px 8px 0; border-color: var(--brand-line); box-shadow: inset 0 2px 0 var(--brand); z-index: 1; }
  .pipe-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
    background: var(--bg-1);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
  }
}
.pipe-steps .mono { font-size: var(--t-caption); color: var(--brand-ink); }
.pipe-steps b { font-size: 15px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.01em; }
.pipe-steps small { font-size: 13px; color: var(--ink-2); line-height: 1.45; }

.tr-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1100px) { .tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } }
.tr-grid article { padding: 20px 0; border-bottom: 1px solid var(--line-subtle); display: grid; gap: 6px; align-content: start; }
@media (min-width: 1100px) { .tr-grid article { border-bottom: 0; } }
.tr-grid h3 { font-size: 15.5px; letter-spacing: -0.01em; }
.tr-grid p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.tr-grid code { font: 12.5px/1 var(--font-mono); color: var(--brand-ink); }

/* --- 08 · Kurulum ---------------------------------------------------------- */
.deploy { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 900px) { .deploy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.dep { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: 22px; display: grid; gap: 18px; align-content: start; }
.dep-k { font-size: 17px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.015em; }
.dep-stack { display: grid; gap: 4px; }
.dep-stack span {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  font: 500 var(--t-caption)/1.2 var(--font-mono);
  color: var(--ink-1);
}
.dep-stack .dep-db { background: transparent; border-style: dashed; border-color: var(--brand-line); color: var(--brand-ink); }
/* --- Son çağrı (koyu ada) -------------------------------------------------- */
.h-final { border-top: 0; }
/* Koyu temada ada sayfa zemininden bir basamak yukarı kalkar (ürün sidebar'ı gibi). */
:root[data-theme="dark"] .h-final { background: oklch(0.19 0.0126 163); border-top: 1px solid var(--line); }
.h-final-grid { display: grid; gap: 40px; align-items: end; }
@media (min-width: 1000px) { .h-final-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 72px; } }
.h-final h2 { max-width: 18ch; }
.h-final-steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: s; border-top: 1px solid var(--line); }
.h-final-steps li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--line); }
.h-final-steps li::before { content: "0" counter(s); grid-row: span 2; font: 500 var(--t-caption)/1.7 var(--font-mono); color: var(--brand); }
.h-final-steps b { color: var(--ink-0); font-weight: 500; font-size: 15px; }
.h-final-steps span { font-size: 13.5px; color: var(--ink-2); }

@media print {
  .scene, .views-stage { display: none; }
}

/* Dokunmatik: hedefler en az 44px. */
@media (pointer: coarse) {
  .views-tabs button { min-height: 44px; }
  .flow-play { min-height: 44px; }
}

/* --- 02 · Studio haritası -------------------------------------------------
   Sol: üründeki Studio kenar çubuğu — üründe olduğu gibi İKİ temada da koyu ada; hover NÖTR, seçili BRAND
   tint + 3px çubuk. Sağ: seçili ekranın anlatımı + grubun ürün benzeri küçük ekranı.
   Geniş ekranda (betik + hareket izni varken) bölüm "kaydırma sahnesi"dir: sahne yapışık kalır, sayfa
   kaydıkça menü öğeden öğeye ilerler (.is-scrolly). Dar ekranda, betiksiz ya da hareket azaltmada kartlar
   alt alta okunur — içerik hiçbir kipte gizlenmez. */
.studio-map { position: relative; }
.st-sticky { display: grid; gap: 20px; }
.sn { border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 14px 10px 12px; position: relative; overflow: hidden; }
.sn ul { list-style: none; margin: 0; padding: 0; }
.sn-eyebrow { font: 500 13px/1.2 var(--font-sans); color: var(--ink-0); padding: 4px 10px 12px; }
.sn-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.sn-progress i { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(var(--p, 0)); background: var(--brand); transition: transform 120ms linear; }
.sn-gh { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-1); border-radius: 6px; }
.sn-group.is-open > .sn-gh { color: var(--ink-0); }
.sn-gh span { margin-inline-start: auto; font: 500 var(--t-label)/1 var(--font-mono); color: var(--ink-2); }
.sn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); }
.sn-group > ul { margin: 2px 0 6px 17px; border-inline-start: 1px solid var(--line); padding-inline-start: 6px; }
.sn-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px;
  border: 0; border-radius: 6px; background: transparent; text-align: start; font-size: 13px; color: var(--ink-1); cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
@media (hover: hover) { .sn-item:hover { background: var(--bg-2); color: var(--ink-0); } }
.sn-item[aria-current="true"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; }
.sn-item[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--brand); }
.sn-top { font-size: 13.5px; margin-bottom: 4px; }
.sn-top svg { color: var(--brand); }

.st-detail { display: grid; gap: 16px; }
.st-panel {
  display: grid; gap: 28px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1);
  padding: clamp(22px, 3vw, 40px);
}
@media (min-width: 1100px) { .st-panel { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; } }
.st-text { display: grid; gap: 14px; align-content: start; }
.st-count { font: 500 13px/1.2 var(--font-sans); color: var(--ink-2); }
.st-count span { color: var(--brand-ink); }
.st-panel h3 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); letter-spacing: -0.03em; line-height: 1.08; }
.st-text > p:not(.st-count) { font-size: 16.5px; line-height: 1.6; color: var(--ink-1); max-width: 46ch; }
.st-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-chips li { font-size: 12.5px; color: var(--ink-1); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--bg-0); }
.st-vis {
  position: relative; min-height: 240px; border-radius: 12px; overflow: hidden;
  background:
    linear-gradient(to right, var(--line-subtle) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(to bottom, var(--line-subtle) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--bg-0);
  display: grid; place-items: center; padding: 22px;
}

/* Kaydırma sahnesi (JS: .is-scrolly — yalnız geniş ekran ve hareket izni) */
.studio-map.is-scrolly { height: calc(var(--n) * 30vh + 100vh); }
.studio-map.is-scrolly .st-sticky {
  position: sticky; top: calc(var(--header-h) + max(20px, (100vh - var(--header-h) - 620px) / 2)); height: min(620px, calc(100vh - var(--header-h) - 40px));
  grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: stretch;
}
.studio-map.is-scrolly .sn-group:not(.is-open) > ul { display: none; }
.studio-map.is-scrolly .st-detail { position: relative; display: block; }
.studio-map.is-scrolly .st-panel {
  position: absolute; inset: 0; align-content: center;
  opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden;
  transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out), visibility 0s linear 460ms;
}
.studio-map.is-scrolly .st-panel.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
/* Aynı grupta geçişte küçük ekran yerinde kalır (yalnız metin değişir) — göz yeri kaybetmesin. */
.studio-map.is-scrolly .st-panel.is-active.same-group { transform: none; }
@media (max-width: 899px) { .sn { display: none; } }

/* ── Küçük ekranlar (dekoratif; anlam metinde) ── */
.v-chat { width: min(100%, 360px); display: grid; gap: 8px; font-size: 12.5px; }
.v-b { justify-self: start; max-width: 85%; padding: 8px 11px; border-radius: 10px; background: var(--bg-2); color: var(--ink-0); }
.v-b--me { justify-self: end; background: var(--brand-soft); }
.v-plan { margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); padding: 10px 12px; display: grid; gap: 6px; }
.v-plan b { font-size: 12px; font-weight: 500; color: var(--ink-0); }
.v-plan i { font-style: normal; color: var(--ink-1); display: flex; align-items: center; gap: 8px; }
.v-plan i::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; }
.v-plan i.ok::before { background: var(--brand); border-color: var(--brand); }
.v-plan i.now::before { border-color: var(--brand); }
.v-plan u { text-decoration: none; margin-inline-start: auto; font-size: var(--t-micro); font-weight: 600; color: var(--on-brand); background: var(--brand); border-radius: 5px; padding: 3px 8px; }
.v-rows { width: min(100%, 380px); border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); overflow: hidden; }
.v-rows div { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line-subtle); }
.v-rows div:first-child { border-top: 0; }
.v-rows code { font: 500 12px/1 var(--font-mono); color: var(--ink-0); }
.v-rows em { font: 500 var(--t-micro)/1 var(--font-mono); font-style: normal; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-1); }
.v-rows em.rel { color: var(--info); border-color: var(--info-line); background: var(--info-soft); }
.v-rows em.calc { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.v-views { width: min(100%, 420px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v-views > div { height: 150px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); padding: 10px; }
.v-list { display: grid; gap: 8px; align-content: start; }
.v-list i { height: 10px; border-radius: 3px; background: var(--bg-3); }
.v-list i:nth-child(odd) { width: 80%; }
.v-kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.v-kan span { display: grid; gap: 5px; align-content: start; background: var(--bg-2); border-radius: 5px; padding: 4px; }
.v-kan i { height: 22px; border-radius: 3px; background: var(--bg-1); border: 1px solid var(--line); }
.v-bars { display: flex; align-items: flex-end; gap: 6px; }
.v-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: var(--chart-1); opacity: 0.85; }
.v-bars i:nth-child(2n) { background: var(--chart-2); }
.v-pid { width: min(100%, 440px); height: auto; overflow: visible; }
.v-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; max-width: 460px; }
.v-flow span { font-size: 12px; color: var(--ink-0); border: 1px solid var(--line-2); background: var(--bg-1); border-radius: 7px; padding: 8px 11px; }
.v-flow span + span::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--line-2); margin: 0 8px 0 -30px; vertical-align: middle; }
.v-flow span + span { margin-inline-start: 22px; }
.v-flow .t { border-color: var(--brand-line); background: var(--brand-soft); }
.v-flow .a { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.v-doc { position: relative; }
.v-doc .pg { width: 220px; height: 280px; background: var(--bg-1); border-radius: 4px; box-shadow: 0 0 0 1px var(--line), var(--elev-1); padding: 20px 18px; display: grid; gap: 10px; align-content: start; }
.v-doc b { font: 600 var(--t-label)/1 var(--font-mono); letter-spacing: 0; color: var(--ink-0); margin-bottom: 6px; }
.v-doc i { display: block; height: 7px; border-radius: 2px; background: var(--bg-3); }
.v-doc .tb { display: grid; gap: 5px; padding: 8px 0; border-block: 1px solid var(--line); }
.v-doc .badge { position: absolute; right: -14px; bottom: 26px; font: 700 var(--t-micro)/1 var(--font-mono); color: var(--on-brand); background: var(--brand); border-radius: 5px; padding: 6px 8px; }
.v-ext { display: grid; gap: 12px; width: min(100%, 380px); }
.v-ext .fm { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); padding: 14px; display: grid; gap: 8px; }
.v-ext .fm b { font-size: 12.5px; font-weight: 500; color: var(--ink-0); }
.v-ext .fm i { display: block; height: 24px; border: 1px solid var(--line-2); border-radius: 5px; }
.v-ext .fm i.f { border-style: dashed; }
.v-ext .fm span { justify-self: start; font-size: var(--t-label); font-weight: 600; color: var(--on-brand); background: var(--brand); border-radius: 5px; padding: 5px 10px; }
.v-ext pre, .v-gov pre { margin: 0; font: 12px/1.7 var(--font-mono); color: var(--ink-1); background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-variant-ligatures: none; }
.v-gov { display: grid; gap: 12px; width: min(100%, 380px); }
.v-gov .c { color: var(--ink-2); }
.v-gov ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.v-gov li { font-size: 12.5px; color: var(--ink-1); padding: 8px 12px; border-top: 1px solid var(--line-subtle); }
.v-gov li:first-child { border-top: 0; }
.v-gov li b { font: 600 var(--t-label)/1 var(--font-mono); color: var(--brand-ink); margin-inline-end: 8px; }


/* Proses şeması küçük ekranı — ürünün .dg sınıflarının site token'larıyla karşılığı
   (ürün globals.css'i sitede yok; renk sözleşmesi aynı: durum = success, seviye = info, çizgi = mürekkep). */
.v-pid .dg-face { fill: var(--bg-1); }
.v-pid .dg-line { fill: none; stroke: var(--ink-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.v-pid .dg-level { fill: color-mix(in oklab, var(--info) 30%, transparent); }
.v-pid .dg-state { fill: var(--ok); }
.v-pid .dg-state-soft { fill: var(--ok-soft); }
.v-pid .dg-l { fill: none; stroke: var(--ink-1); stroke-linejoin: round; }
.v-pid .dg-l-process { stroke-width: 2.2; }
.v-pid .dg-l-signal { stroke-width: 1.2; stroke-dasharray: 4 3; }
.v-pid .dg-txt { fill: var(--ink-0); font-family: var(--font-mono); font-weight: 600; }
.v-pid .dg-value { fill: var(--ink-0); font-family: var(--font-mono); font-weight: 600; }
/* Dar ekranda küçük ekran yalnız grubun ilk kartında (aynı grupta tekrar ederdi); kartlar sıkılaşır. */
@media (max-width: 899px) {
  .st-panel:not(.st-lead) .st-vis { display: none; }
  .st-panel { gap: 18px; box-shadow: none; }
  .st-vis { min-height: 0; padding: 16px; }
}