/* ==========================================================================
   NewB2B — Sayfa bilesenleri
   Mimari diyagram · AI modul kartlari · Interaktif demolar · Marka explorer
   ========================================================================== */

/* ==========================================================================
   1. MIMARI DIYAGRAM
   ========================================================================== */
.arch { display: grid; gap: 14px; }
.arch__row { display: grid; gap: 12px; }
.arch__label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 10px;
}
.arch__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.arch__channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.chan {
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: var(--panel);
  cursor: pointer; transition: all 0.3s var(--ease); position: relative; overflow: hidden;
}
.chan:hover, .chan.on { border-color: color-mix(in srgb, var(--a, var(--blue)) 55%, transparent); background: color-mix(in srgb, var(--a, var(--blue)) 9%, transparent); transform: translateY(-3px); }
.chan b { display: block; font-size: 15px; letter-spacing: -0.02em; }
.chan span { font-size: 12px; color: var(--muted); }
.chan__list { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease), margin 0.45s var(--ease); }
.chan.on .chan__list { max-height: 200px; margin-top: 12px; }
.chan__list li { font-size: 12.5px; color: var(--ink-2); padding: 3px 0 3px 14px; position: relative; }
.chan__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--a, var(--blue)); }

.arch__gateway {
  padding: 15px 22px; border-radius: var(--r); text-align: center; font-weight: 700; font-size: 13.5px;
  background: linear-gradient(100deg, #16202b, #1d2b39); border: 1px solid var(--line-2);
  letter-spacing: 0.02em; color: var(--ink-2); position: relative; overflow: hidden;
}
.arch__gateway::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(91, 157, 255, 0.13), transparent);
  animation: sweep 4.5s var(--ease-io) infinite;
}
@keyframes sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

.arch__domains { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dom {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: var(--panel);
  position: relative; overflow: hidden; transition: all 0.35s var(--ease); cursor: pointer;
}
.dom::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--a); opacity: 0.75; }
.dom:hover, .dom.on { transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 45%, transparent); background: color-mix(in srgb, var(--a) 8%, transparent); box-shadow: var(--shadow-sm); }
.dom h4 { font-size: 14.5px; margin-bottom: 12px; letter-spacing: -0.02em; }
.dom ul li { font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.dom__ev { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 5px; }
.dom__ev code { font-family: var(--mono); font-size: 10.5px; padding: 3px 7px; border-radius: 5px; background: color-mix(in srgb, var(--a) 14%, transparent); color: var(--a); }
.dom__ai { margin-top: 10px; font-size: 11px; color: var(--faint); }

.arch__bus {
  padding: 13px 20px; text-align: center; font-size: 13px; font-weight: 600; border-radius: var(--r);
  background: rgba(41, 74, 120, 0.22); border: 1px dashed rgba(91, 157, 255, 0.35); color: #a8c6f0;
}
.arch__infra { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.infra { padding: 13px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); font-size: 12.5px; transition: all 0.3s; }
.infra:hover { border-color: var(--line-2); background: var(--panel-2); }
.infra b { display: block; font-size: 13px; margin-bottom: 2px; }
.infra span { color: var(--faint); font-size: 11px; }

/* akis / journey */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 12px; }
.flow__step { padding: 22px 20px; border: 1px solid var(--line); border-right: 0; position: relative; background: var(--panel); transition: background 0.3s; }
.flow__step:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.flow__step:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.flow__step:hover { background: var(--panel-2); }
.flow__step::after {
  content: ""; position: absolute; right: -7px; top: 50%; width: 13px; height: 13px; z-index: 3;
  border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
  transform: translateY(-50%) rotate(45deg); background: var(--bg-2);
}
.flow__step:last-child::after { display: none; }
.flow__no { font-family: var(--mono); font-size: 11px; color: var(--coral); font-weight: 700; }
.flow__actor { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.flow__step h4 { font-size: 17px; margin: 9px 0 8px; }
.flow__step p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.flow__ai { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.flow__ai a { font-size: 10.5px; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--purple) 16%, transparent); color: #c3aeff; transition: 0.2s; }
.flow__ai a:hover { background: var(--purple); color: #fff; }

/* durum makinesi */
.states { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.states span {
  padding: 8px 15px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2);
}
.states i { color: var(--faint); font-style: normal; }

/* split scope */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.scope__col { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.scope__col.core { background: linear-gradient(160deg, rgba(255, 106, 77, 0.11), transparent 65%); border-color: rgba(255, 106, 77, 0.28); }
.scope__col.out { background: linear-gradient(160deg, rgba(91, 157, 255, 0.09), transparent 65%); }
.scope__col h3 { font-size: 21px; }
.scope__col > span { font-size: 12.5px; color: var(--muted); display: block; margin: 6px 0 20px; }
.scope__col li { font-size: 14px; color: var(--ink-2); padding: 9px 0 9px 26px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.scope__col li:last-child { border-bottom: 0; }
.scope__col li::before {
  content: "→"; position: absolute; left: 0; top: 9px; color: var(--coral); font-size: 13px;
}
.scope__col.out li::before { content: "↗"; color: var(--blue); }

/* ==========================================================================
   2. AI MODUL KARTLARI
   ========================================================================== */
.mod-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.fbtn {
  padding: 9px 17px; border-radius: 99px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted); transition: all 0.25s var(--ease);
}
.fbtn:hover { color: var(--ink); border-color: var(--line-2); }
.fbtn.on { background: var(--ink); color: #0a0e13; border-color: var(--ink); }

.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mod {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; background: var(--panel);
  cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s var(--ease);
  display: flex; flex-direction: column; min-height: 250px;
}
.mod::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--a), transparent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.mod:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--a) 45%, transparent); box-shadow: var(--shadow); background: color-mix(in srgb, var(--a) 6%, transparent); }
.mod:hover::after { transform: scaleX(1); }
.mod__no { font-family: var(--mono); font-size: 11px; color: var(--a); font-weight: 700; letter-spacing: 0.08em; }
.mod h3 { font-size: 17.5px; margin: 12px 0 8px; letter-spacing: -0.025em; line-height: 1.22; }
.mod__tag { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.mod__foot { margin-top: 20px; }
.mod__pct { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.mod__pct b { font-size: 21px; font-weight: 800; letter-spacing: -0.04em; color: var(--a); }
.mod__pct span { font-size: 11.5px; color: var(--faint); }
.mod__open { position: absolute; top: 22px; right: 22px; font-size: 11px; color: var(--faint); transition: 0.3s; display: flex; align-items: center; gap: 5px; }
.mod:hover .mod__open { color: var(--a); }

/* ==========================================================================
   3. MODUL DETAY / DEMO KATMANI
   ========================================================================== */
.sheet {
  position: fixed; inset: 0; z-index: 950; display: none;
  background: rgba(3, 5, 8, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.sheet.open { display: block; }
.sheet.show { opacity: 1; }
.sheet__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(1180px, 94vw);
  background: linear-gradient(180deg, #0c1218, #080c11); border-left: 1px solid var(--line-2);
  transform: translateX(100%); transition: transform 0.5s var(--ease);
  box-shadow: -40px 0 80px -20px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column; overflow: hidden;   /* sayfa kaydirmasi yok */
}
.sheet.show .sheet__panel { transform: none; }
.sheet__head {
  flex: none; padding: clamp(12px, 1.6vh, 18px) clamp(16px, 2vw, 30px) clamp(10px, 1.4vh, 16px);
  border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 16px;
}
.sheet__head h2 { font-size: clamp(17px, 2.2vh, 22px); letter-spacing: -0.035em; line-height: 1.16; }
.sheet__head .chip { padding: 4px 10px; font-size: 11px; }
.sheet__head #s-tagline { margin-top: 6px; font-size: 12.5px; }
.sheet__head .ring { width: clamp(52px, 7vh, 74px); height: clamp(52px, 7vh, 74px); }
.sheet__head .ring svg { width: 100%; height: 100%; }
.sheet__close {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; transition: 0.25s;
}
.sheet__close:hover { background: var(--coral); border-color: var(--coral); transform: rotate(90deg); }
.sheet__tabs { flex: none; display: flex; gap: 4px; padding: 0 clamp(16px, 2vw, 30px); border-bottom: 1px solid var(--line); }
.sheet__tabs button {
  padding: clamp(8px, 1.2vh, 11px) 15px; background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: 0.25s; white-space: nowrap;
}
.sheet__tabs button:hover { color: var(--ink); }
.sheet__tabs button.on { color: var(--ink); border-bottom-color: var(--a, var(--coral)); }
.sheet__body { flex: 1; min-height: 0; padding: clamp(12px, 1.6vh, 18px) clamp(16px, 2vw, 30px) clamp(14px, 2vh, 22px); display: flex; }
.tabpane { display: none; animation: fadeUp 0.45s var(--ease); flex: 1; min-height: 0; }
.tabpane.on { display: flex; flex-direction: column; }
/* demo disindaki sekmeler kendi icinde kayar */
.tabpane[data-pane="how"], .tabpane[data-pane="io"], .tabpane[data-pane="risk"] { overflow-y: auto; display: none; }
.tabpane[data-pane="how"].on, .tabpane[data-pane="io"].on, .tabpane[data-pane="risk"].on { display: block; }
#s-demo { flex: 1; min-height: 0; display: flex; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spec__box { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--panel); }
.spec__box h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.spec__box li { font-size: 13.5px; color: var(--ink-2); padding: 6px 0 6px 20px; position: relative; }
.spec__box li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 2px; background: var(--a, var(--coral)); opacity: 0.8; }

/* ---- Demo iskeleti (panel yuksekligine oturur) ---- */
.demo {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #0a0f15;
  flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%;
}
.demo__bar {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}
.demo__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3946; }
.demo__bar i:first-child { background: #ff5f57; } .demo__bar i:nth-child(2) { background: #febc2e; } .demo__bar i:nth-child(3) { background: #28c840; }
.demo__bar b { margin-left: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.demo__bar .mock { margin-left: auto; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); background: rgba(255, 182, 72, 0.12); padding: 3px 9px; border-radius: 99px; }
.demo__body {
  flex: 1; min-height: 0; padding: clamp(10px, 1.4vh, 16px); display: flex; flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
}
.demo__split { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(240px, 24vw, 300px) 1fr; gap: 14px; }
/* kontrol kolonu: kaydirma yok, icerik viewport'a gore kuculur */
.demo__side {
  display: flex; flex-direction: column; gap: clamp(7px, 1vh, 11px); min-height: 0; overflow-y: auto;
  border-right: 1px solid var(--line); padding-right: 14px;
}
.demo__side > .btn { margin-top: auto; flex: none; padding: clamp(9px, 1.3vh, 13px) 20px; }
.demo__side .field { min-height: 0; }
/* sonuc kolonu: gerekirse yalnizca burada kayar */
.demo__out { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; padding-right: 6px; min-height: 0; }
.demo__note { flex: none; }

/* yogun spesifikasyon listesi (kontrol kolonu) */
.kvt { margin: 0; display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-sm); overflow: hidden; }
.kvt > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: clamp(4px, 0.7vh, 7px) 10px; background: rgba(255, 255, 255, 0.035);
}
.kvt dt { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); flex: none; }
.kvt dd { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: right; line-height: 1.35; }

.field { display: grid; gap: 6px; }
.field > label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.input, select.input, textarea.input {
  width: 100%; padding: clamp(8px, 1.2vh, 12px) 13px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line); color: var(--ink); font-size: 14px; transition: border-color 0.25s, background 0.25s;
  outline: none; font-family: inherit;
}
.input:focus { border-color: var(--a, var(--coral)); background: rgba(255, 255, 255, 0.07); }
textarea.input { resize: none; min-height: 0; height: 100%; line-height: 1.5; font-size: 13px; }
.demo__side .field:has(textarea) { flex: 1; min-height: 64px; display: grid; grid-template-rows: auto 1fr; }
select.input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%237d8d9e'%3E%3Cpath d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.range { width: 100%; accent-color: var(--a, var(--coral)); cursor: pointer; }
.range-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.range-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset {
  font-size: 11.5px; padding: clamp(5px, 0.8vh, 7px) 12px; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--ink-2); transition: 0.22s;
}
.preset:hover { border-color: var(--a, var(--coral)); color: var(--ink); }
.preset.on { background: var(--a, var(--coral)); border-color: var(--a, var(--coral)); color: #0a0e13; font-weight: 600; }

/* islem gostergesi */
.steps { display: grid; gap: clamp(6px, 0.9vh, 9px); }
.step-line { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--faint); transition: color 0.3s; }
.step-line .ic { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 10px; flex: none; }
.step-line.run { color: var(--a, var(--coral)); }
.step-line.run .ic { animation: spin 1s linear infinite; border-style: dashed; }
.step-line.done { color: var(--green); }
.step-line.done .ic { background: var(--green); border-color: var(--green); color: #06120b; }

/* sonuc kartlari */
.res {
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: var(--panel);
  animation: popIn 0.5s var(--ease) both;
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.res__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.res__head b { font-size: 15px; letter-spacing: -0.02em; }
.res__score { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--a, var(--coral)); letter-spacing: -0.04em; }
.res__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.why { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.why b { color: var(--ink-2); font-weight: 600; }

.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tag2 {
  font-size: 11.5px; padding: 4px 10px; border-radius: 6px; font-family: var(--mono);
  background: color-mix(in srgb, var(--a, var(--coral)) 13%, transparent); color: var(--a, var(--coral));
  animation: popIn 0.4s var(--ease) both;
}
.tag2.neg { --a: var(--coral); }
.tag2.pos { --a: var(--green); }

/* chat */
.chat { display: grid; gap: 10px; align-content: start; padding-right: 4px; }
.msg { max-width: 82%; padding: 13px 16px; border-radius: 16px; font-size: 13.8px; line-height: 1.58; animation: popIn 0.4s var(--ease) both; }
.msg.me { margin-left: auto; background: linear-gradient(135deg, #2b3a4a, #1e2a36); border: 1px solid var(--line); border-bottom-right-radius: 5px; }
.msg.ai { background: color-mix(in srgb, var(--purple) 12%, #0e141b); border: 1px solid color-mix(in srgb, var(--purple) 26%, transparent); border-bottom-left-radius: 5px; }
.msg__who { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.msg__src { margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, 0.12); font-size: 11.5px; color: var(--faint); }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.18s; } .typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* karsilastirmali panel */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo__box { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--panel); min-height: 150px; }
.duo__box h5 { font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin: 0 0 11px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.duo__box p { font-size: 13.8px; line-height: 1.6; color: var(--ink-2); }

/* grafik */
.chart { display: grid; gap: 9px; }
.chart__row { display: grid; grid-template-columns: 116px 1fr 62px; align-items: center; gap: 12px; font-size: 13px; }
.chart__bar { height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.chart__fill {
  height: 100%; width: 0; border-radius: 6px; transition: width 1.1s var(--ease);
  background: linear-gradient(90deg, color-mix(in srgb, var(--a, var(--coral)) 45%, #000), var(--a, var(--coral)));
}
.chart__v { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.spark { width: 100%; height: 150px; }
.spark path.line { fill: none; stroke: var(--a, var(--coral)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spark path.band { fill: color-mix(in srgb, var(--a, var(--coral)) 15%, transparent); stroke: none; }
.spark path.dash { fill: none; stroke: var(--a, var(--coral)); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.85; }
.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.7s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* gauge */
.gauge { display: flex; align-items: center; gap: 20px; }
.gauge__ring { --p: 0; width: 118px; height: 118px; position: relative; flex: none; }
.gauge__ring svg { transform: rotate(-90deg); }
.gauge__ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge__ring .t { stroke: rgba(255, 255, 255, 0.07); }
.gauge__ring .v { stroke: var(--a, var(--coral)); stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.4s var(--ease), stroke 0.5s; }
.gauge__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 27px; font-weight: 800; letter-spacing: -0.05em; }
.gauge__ring small { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-size: 10px; color: var(--faint); letter-spacing: 0.1em; }

/* rota / harita */
.route { position: relative; height: 190px; border-radius: var(--r); background: linear-gradient(160deg, #0b141d, #0a0f14); border: 1px solid var(--line); overflow: hidden; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route .path { fill: none; stroke: var(--a, var(--coral)); stroke-width: 2; stroke-linecap: round; }
.route .pt { fill: var(--a, var(--coral)); }
.route .lbl { fill: var(--ink-2); font-size: 10px; font-family: var(--font); }
.route .plane { fill: #fff; }

/* dosya birakma alani */
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: clamp(16px, 2.6vh, 30px) 18px; text-align: center;
  cursor: pointer; transition: all 0.3s var(--ease); background: rgba(255, 255, 255, 0.02);
}
.drop:hover { border-color: var(--a, var(--coral)); background: color-mix(in srgb, var(--a, var(--coral)) 7%, transparent); }
.drop b { display: block; font-size: 14px; margin-bottom: 5px; }
.drop span { font-size: 12px; color: var(--muted); }
.drop.busy { border-style: solid; border-color: var(--a, var(--coral)); }

/* checklist */
.check { display: grid; gap: 8px; }
.check li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.2px; padding: 10px 13px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); animation: popIn 0.4s var(--ease) both; }
.check li .ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; flex: none; margin-top: 1px; }
.check li.ok .ic { background: rgba(87, 217, 138, 0.16); color: var(--green); }
.check li.warn .ic { background: rgba(255, 182, 72, 0.16); color: var(--amber); }
.check li.err .ic { background: rgba(255, 106, 77, 0.16); color: var(--coral); }
.check li b { font-weight: 600; }
.check li span { color: var(--muted); font-size: 12.2px; display: block; margin-top: 2px; }

/* key-value cikti */
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kv div { padding: 11px 13px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); animation: popIn 0.4s var(--ease) both; }
.kv label { display: block; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.kv b { font-size: 13.5px; font-weight: 600; }

.empty { text-align: center; padding: 46px 20px; color: var(--faint); font-size: 13.5px; }
.empty svg { margin: 0 auto 14px; opacity: 0.35; }

/* ==========================================================================
   3.5 MİMARİ BLUEPRINT (SVG şablon)
   ========================================================================== */
.bp-frame {
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px 24px 20px;
  background:
    radial-gradient(900px circle at 50% -20%, rgba(91, 157, 255, 0.09), transparent 62%),
    linear-gradient(180deg, #0b1119, #080c12);
  position: relative; overflow: hidden;
}
.bp-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 85%);
}
.bp-frame__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); position: relative;
}
.bp-frame__head b { font-size: 15px; letter-spacing: -0.02em; }
.bp-frame__head span { font-size: 11px; color: var(--faint); font-family: var(--mono); }
.bp { width: 100%; height: auto; display: block; position: relative; overflow: visible; }
#bp-arch, #bp-int { position: relative; }
@media (max-width: 1120px) {
  #bp-arch, #bp-int { overflow-x: auto; padding-bottom: 10px; }
  #bp-arch .bp { min-width: 980px; }
  #bp-int .bp { min-width: 860px; }
  .bp-frame { overflow: visible; }
}
.bp text { user-select: none; }
/* cizim animasyonu */
.bp rect, .bp circle, .bp text { animation: bpIn 0.7s var(--ease) both; }
.bp path { animation: bpLine 0.9s var(--ease) both; }
@keyframes bpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bpLine { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bp rect, .bp circle, .bp text, .bp path { animation: none; } }

.bp-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; position: relative; }
.bp-legend span { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.bp-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* ==========================================================================
   4. MARKA EXPLORER
   ========================================================================== */
.brand-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.brand-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; background: var(--panel);
  position: relative; overflow: hidden; transition: all 0.4s var(--ease);
}
.brand-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow); }
.brand-card__name { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.brand-card__dom { font-family: var(--mono); font-size: 12.5px; color: var(--coral); margin-top: 8px; }
.brand-card__read { font-size: 12px; color: var(--faint); margin-top: 3px; }
.brand-card__score {
  position: absolute; top: 24px; right: 24px; font-size: 13px; font-weight: 800; font-family: var(--mono);
  padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--a, var(--coral)) 15%, transparent); color: var(--a, var(--coral));
}
.brand-card p { font-size: 13.2px; color: var(--muted); line-height: 1.6; margin-top: 16px; }
.brand-card__fam { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.brand-card__fam span { font-size: 11.5px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--ink-2); }

/* ---------- Logo laboratuvarı ---------- */
.lab { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; align-items: stretch; }

.lab__stage {
  position: relative; border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(700px circle at 30% 10%, rgba(255, 106, 77, 0.22), transparent 58%),
    radial-gradient(600px circle at 80% 90%, rgba(91, 157, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #10161f, #070a0e);
  display: grid; place-items: center; padding: clamp(28px, 4vw, 46px) 28px; min-height: clamp(260px, 34vw, 340px);
}
.lab__stage::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%); pointer-events: none;
}
.lab__lock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

/* monogram */
.glyph {
  --s: 64px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.28); flex: none; position: relative;
  background: linear-gradient(140deg, var(--coral), #c0301b);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 40px -14px var(--coral);
  display: grid; place-items: center; overflow: hidden;
}
.glyph::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.42), transparent 55%);
}
.glyph::after {
  content: ""; position: absolute; right: calc(var(--s) * 0.17); top: calc(var(--s) * 0.17);
  width: calc(var(--s) * 0.15); height: calc(var(--s) * 0.15); border-radius: 50%; background: #fff;
}
.glyph b {
  position: relative; font-size: calc(var(--s) * 0.46); font-weight: 800; letter-spacing: -0.06em; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.glyph--flat { background: #0e141b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.glyph--flat::before, .glyph--flat::after { display: none; }
.glyph--light { background: linear-gradient(140deg, #23303d, #0f1720); }
.glyph--mono { background: #fff; }
.glyph--mono b { color: #0c1219; }
.glyph--mono::before { display: none; }
.glyph--mono::after { background: var(--coral); }

.wordmark {
  font-size: clamp(34px, 5.4vw, 62px); font-weight: 800; letter-spacing: -0.055em; line-height: 1;
  display: flex; justify-content: center;
}
.wordmark span { display: inline-block; animation: letterIn 0.6s var(--ease) both; }
@keyframes letterIn { from { opacity: 0; transform: translateY(22px) rotateX(-40deg); } to { opacity: 1; transform: none; } }
.lab__tag { font-size: 11.5px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--muted); }
.lab__meta { position: absolute; left: 22px; bottom: 18px; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.lab__score {
  position: absolute; right: 22px; top: 18px; font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 99px; background: rgba(87, 217, 138, 0.14); color: var(--green);
}

/* uygulama örnekleri */
.lab__apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.app {
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--panel);
  display: flex; flex-direction: column; gap: 12px; justify-content: center; min-height: 104px;
  position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease);
}
.app:hover { border-color: var(--line-2); transform: translateY(-2px); }
.app__cap {
  position: absolute; top: 9px; left: 12px; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.app__row { display: flex; align-items: center; gap: 11px; }
.app__row b { font-size: 17px; letter-spacing: -0.04em; white-space: nowrap; }
.app--light { background: #f4f6f8; border-color: #dde3e9; color: #0d141a; }
.app--light .app__cap { color: #93a1ad; }
.app--wide { grid-column: 1 / -1; }

/* uygulama ikonu */
.app--icon { align-items: center; justify-content: center; }
.icon-set { display: flex; align-items: flex-end; gap: 14px; }
.icon-set .glyph { --s: 52px; }
.icon-set .glyph:nth-child(2) { --s: 34px; }
.icon-set .glyph:nth-child(3) { --s: 22px; }

/* tarayıcı sekmesi */
.tabmock { background: #0a1017; border-radius: 9px; padding: 7px; box-shadow: inset 0 0 0 1px var(--line); }
.tabmock__bar { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 6px 6px 0 0; background: #131c25; }
.tabmock__bar .glyph { --s: 15px; border-radius: 4px; }
.tabmock__bar span { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabmock__url {
  margin-top: 5px; padding: 6px 10px; border-radius: 6px; background: #0d141c; font-family: var(--mono);
  font-size: 10.5px; color: var(--muted);
}

/* kartvizit */
.bcard {
  background: linear-gradient(150deg, #fff, #e9edf1); color: #0d141a; border-radius: 9px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 16px; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8);
}
.bcard__top { display: flex; align-items: center; gap: 9px; }
.bcard__top b { font-size: 15px; letter-spacing: -0.04em; }
.bcard__bot { font-size: 9.5px; line-height: 1.55; color: #55636f; }
.bcard__bot b { display: block; font-size: 11px; color: #0d141a; letter-spacing: 0; }

/* alt marka ailesi */
.family { display: flex; flex-wrap: wrap; gap: 8px; }
.family span {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 99px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600;
}
.family span i {
  width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(140deg, var(--coral), #c0301b); flex: none;
}
.lab__picker { display: flex; flex-wrap: wrap; gap: 7px; }

.names-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.names-toolbar .input { max-width: 280px; }
.names-count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.names-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.names-scroll { max-height: min(620px, 58vh); overflow-y: auto; }
.name-row td:first-child { font-family: var(--mono); color: var(--faint); font-size: 12px; width: 52px; }
.name-row b { font-size: 14.5px; letter-spacing: -0.02em; }
.name-row .dm { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.name-row .sc { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-95 { color: var(--green); } .sc-90 { color: var(--teal); } .sc-88 { color: var(--blue); } .sc-low { color: var(--muted); }
.name-row .act { opacity: 0; transition: opacity 0.2s; }
.name-row:hover .act { opacity: 1; }
.iconbtn {
  width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); transition: 0.2s; font-size: 12px;
}
.iconbtn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

.vs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
.vs__col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; background: var(--panel); }
.vs__col h4 { font-size: 15px; margin-bottom: 4px; }
.vs__stat { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13.2px; }
.vs__stat:last-child { border-bottom: 0; }
.vs__stat span { color: var(--muted); }
.vs__stat b { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5. YOL HARITASI
   ========================================================================== */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tl__col { padding: 26px 22px; border: 1px solid var(--line); border-right: 0; position: relative; min-height: 300px; transition: background 0.3s; }
.tl__col:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.tl__col:last-child { border-right: 1px solid var(--line); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.tl__col:hover { background: var(--panel); }
.tl__col.done { background: rgba(87, 217, 138, 0.05); }
.tl__col.active { background: rgba(255, 106, 77, 0.07); border-color: rgba(255, 106, 77, 0.3); }
.tl__range { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--coral); font-weight: 700; }
.tl__col h4 { font-size: 19px; margin: 12px 0 16px; }
.tl__col li { font-size: 13.2px; color: var(--ink-2); padding: 7px 0 7px 20px; position: relative; }
.tl__col li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 1.5px; background: var(--faint); }
.tl__badge { position: absolute; top: 22px; right: 22px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.tl__col.done .tl__badge { color: var(--green); }
.tl__col.active .tl__badge { color: var(--coral); }
.tl__col.next .tl__badge { color: var(--faint); }

.risk-row { display: grid; grid-template-columns: 240px 1fr 190px; gap: 0; border-bottom: 1px solid var(--line); }
.risk-row > div { padding: 17px 18px; font-size: 13.5px; }
.risk-row.head > div { background: rgba(255, 255, 255, 0.04); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.risk-row:not(.head):hover { background: var(--panel); }
.risk-row b { font-weight: 600; }
.risk-row .owner { color: var(--coral); font-size: 12.5px; font-weight: 600; }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .lab { grid-template-columns: 1fr; }
  .lab__apps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  .mods { grid-template-columns: repeat(2, 1fr); }
  .demo__split { grid-template-columns: 1fr; overflow-y: auto; }
  .demo__side, .demo__out { overflow: visible; }
  .arch__domains, .arch__infra { grid-template-columns: repeat(2, 1fr); }
  .arch__channels { grid-template-columns: repeat(2, 1fr); }
  .flow, .tl { grid-template-columns: repeat(2, 1fr); }
  .flow__step, .tl__col { border-radius: var(--r) !important; border-right: 1px solid var(--line); }
  .flow__step::after { display: none; }
  .brand-hero { grid-template-columns: repeat(2, 1fr); }
  .demo__split { grid-template-columns: 1fr; }
  .risk-row { grid-template-columns: 1fr; }
  .risk-row.head { display: none; }
}
@media (max-width: 760px) {
  .mods, .arch__domains, .arch__channels, .arch__infra, .flow, .tl, .scope, .spec, .duo, .kv, .brand-hero, .vs, .lab__apps { grid-template-columns: 1fr; }
  .bp-frame { padding: 16px 12px 12px; }
  .lab__stage { min-height: 260px; padding: 34px 20px; }
  .sheet__head, .sheet__body, .sheet__tabs { padding-inline: 20px; }
  .sheet__tabs { overflow-x: auto; top: 84px; }
  .chart__row { grid-template-columns: 88px 1fr 54px; font-size: 12px; }
  .logo-lab { padding: 24px; }
}