/* =========================================================
   BuildBridge Web MVP v0.1.0 — styles.css
   Tasarım dili: "mühendislik dokümanı" — soğuk plan kâğıdı
   zemini, çelik çizgiler, şantiye turuncusu vurgu.
   ========================================================= */

/* ---------- Tokenlar ---------- */
:root {
  --ink: #16222f;
  --ink-soft: #45566a;
  --paper: #f2f4f6;
  --surface: #ffffff;
  --line: #d8dee4;
  --line-soft: #e7ebef;
  --accent: #e8611c;
  --accent-deep: #c74d10;
  --navy: #1d3a5f;
  --green: #1e7a5f;
  --green-bg: #e2f2ec;
  --amber: #a16207;
  --amber-bg: #fdf0d8;
  --red: #b3261e;
  --red-bg: #fbe4e2;
  --grey-bg: #e9edf1;

  --font-display: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(22, 34, 47, 0.06), 0 8px 24px rgba(22, 34, 47, 0.06);
  --maxw: 1160px;
}

/* ---------- Sıfırlama ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent-deep); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }
h4 { font-size: 0.98rem; font-weight: 700; margin-top: 1.2rem; }
p { margin: 0 0 0.9rem; }
ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
li { margin-bottom: 0.3rem; }

.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }

/* ---------- Demo bandı ---------- */
.demo-banner {
  background: var(--ink);
  color: #f3d9c9;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.4rem 1rem;
  letter-spacing: 0.02em;
}
.demo-banner strong { color: #ffb488; font-weight: 600; }

/* ---------- Üst gezinme ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand svg { width: 30px; height: 30px; }
.brand .v { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); font-weight: 500; margin-left: 0.15rem; }

.nav-links { display: flex; gap: 0.15rem; margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--line-soft); }
.nav-links a.active { color: #fff; background: var(--ink); }
.nav-links a.nav-cta { color: #fff; background: var(--accent); font-weight: 600; }
.nav-links a.nav-cta:hover { background: var(--accent-deep); }

#nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink);
}

/* ---------- Yerleşim ---------- */
main#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  min-height: 60vh;
}
.section { margin: 3.2rem 0 0; }
.page-head { margin: 1.2rem 0 1.8rem; max-width: 46rem; }
.lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 44rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  margin-bottom: 0.55rem;
}

/* ---------- Kartlar ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow);
}
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.1rem; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.card h3 { margin-top: 0.1rem; }
.persona p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* ---------- Rozetler & çipler ---------- */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.grey { background: var(--grey-bg); color: var(--ink-soft); }
.badge.demo { background: #ffe6d6; color: var(--accent-deep); border: 1px dashed #f0a97f; }
.badge.mini { font-size: 0.64rem; padding: 0.08rem 0.42rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.75rem;
  font-size: 0.84rem;
  color: var(--ink);
}
.chip.mini { font-size: 0.74rem; padding: 0.14rem 0.55rem; background: var(--line-soft); border-color: transparent; }
.chip.selected { border-color: var(--accent); background: #fdefe6; color: var(--accent-deep); font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0.9rem; }
button.chip:hover { border-color: var(--accent); }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.58rem 1.1rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); color: #fff; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.lg { padding: 0.75rem 1.4rem; font-size: 0.98rem; }
.btn.tiny { padding: 0.28rem 0.7rem; font-size: 0.78rem; }
.btn:active { transform: translateY(1px); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin: 1.2rem 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.6rem 0 1.4rem;
}
.hero-grid-bg {
  position: absolute;
  inset: -1.5rem -2rem;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 85% 90% at 40% 30%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 40% 30%, #000 45%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 { margin-bottom: 0.9rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }

.hero-ticket { padding: 1.1rem 1.2rem; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.ticket-line { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.8rem; }
.ticket-match {
  display: grid;
  grid-template-columns: 1fr 90px 44px;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  padding: 0.42rem 0;
  border-top: 1px dashed var(--line);
}
.ticket-cta { display: inline-block; margin-top: 0.9rem; font-weight: 600; font-size: 0.88rem; color: var(--accent-deep); }

/* ---------- Skor çubukları ---------- */
.score-bar {
  position: relative;
  height: 8px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
  min-width: 70px;
}
.score-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--navy), var(--accent));
  border-radius: 999px;
}
.meter-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr 52px;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.55rem 0;
}
.meter-row .mono { text-align: right; color: var(--ink); font-weight: 600; }

/* ---------- Zincir rayı (imza öğe) ---------- */
.chain-rail {
  display: flex;
  align-items: flex-start;
  margin-top: 1.6rem;
  overflow-x: auto;
  padding: 0.6rem 0.2rem 1rem;
}
.chain-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 92px;
  text-align: center;
  animation: nodeIn 0.5s ease both;
  animation-delay: calc(var(--i) * 0.12s);
}
.chain-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px #fdefe6;
}
.chain-label { font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
.chain-link {
  flex: 1;
  min-width: 34px;
  height: 3px;
  margin-top: 7px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 8px, transparent 8px 14px);
  animation: nodeIn 0.5s ease both;
  animation-delay: calc(var(--i) * 0.12s + 0.06s);
}
.chain-rail.compact .chain-node { min-width: 78px; }
@keyframes nodeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- "Nasıl çalışır" ---------- */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.1rem; }
.how-step { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; }
.how-no { color: var(--accent-deep); font-weight: 700; font-size: 0.85rem; }
.how-step h3 { margin-top: 0.3rem; }
.how-step p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 3.2rem; }
.cta-band h2 { margin-bottom: 0.4rem; }
.cta-band .lede { margin: 0; }

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 720px; }
.data-table th, .data-table td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafbfc; }
.cell-sub { display: block; font-size: 0.76rem; color: var(--ink-soft); font-weight: 400; margin-top: 0.1rem; }
.reasons { max-width: 260px; }
.reasons .chip.mini { margin: 0 0.25rem 0.25rem 0; }

.data-table.compare thead th { font-family: var(--font-display); font-size: 0.92rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.data-table.compare tbody th[scope="row"] {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  width: 150px;
}
.data-table.compare .onerilen-col { background: #fdf5ee; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.data-table.compare thead .onerilen-col { border-top: 2px solid var(--accent); }
.data-table.compare tbody tr:last-child .onerilen-col { border-bottom: 2px solid var(--accent); }
.data-table.compare thead th .badge { display: block; width: fit-content; margin-top: 0.3rem; }
.compare-context { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.8rem; }

/* ---------- Kategori & üretici kartları ---------- */
.cat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.cat-kod { font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.08em; }
.cat-card p { color: var(--ink-soft); font-size: 0.9rem; }
.cat-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1rem; margin: 0.8rem 0; }
.cat-meta.col { grid-template-columns: 1fr; }
.cat-meta div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; border-bottom: 1px dashed var(--line-soft); padding-bottom: 0.3rem; }
.cat-meta dt { font-size: 0.78rem; color: var(--ink-soft); }
.cat-meta dd { margin: 0; font-size: 0.85rem; font-weight: 600; text-align: right; }
.cat-card .btn, .man-card .btn { margin-top: 0.4rem; }

.man-head { display: flex; justify-content: space-between; align-items: start; gap: 0.6rem; }
.man-loc { color: var(--ink-soft); font-size: 0.86rem; margin: 0.15rem 0 0.6rem; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.8rem; }

/* ---------- RFQ sihirbazı ---------- */
.wizard { margin-top: 0.4rem; }
.stepper {
  display: flex;
  list-style: none;
  padding: 0 0 1.1rem;
  margin: 0 0 1.2rem;
  gap: 0.2rem;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}
.stepper li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-right: 0.55rem;
  margin: 0;
}
.stepper li:not(:last-child)::after { content: "›"; margin-left: 0.35rem; color: var(--line); }
.stepper-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  background: var(--surface);
  flex: none;
}
.stepper li.active { color: var(--ink); font-weight: 600; }
.stepper li.active .stepper-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.stepper li.done { color: var(--green); }
.stepper li.done .stepper-dot { border-color: var(--green); background: var(--green-bg); color: var(--green); }

.wizard-title { font-size: 1.35rem; margin-bottom: 0.35rem; }
.wizard-hint { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.1rem; }

.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 0.6rem; }
.option-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  text-align: left;
  font-size: 0.92rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.option-card:hover { border-color: var(--ink-soft); }
.option-card.selected { border-color: var(--accent); background: #fdf3ec; box-shadow: inset 0 0 0 1px var(--accent); }
.option-sub { font-size: 0.76rem; color: var(--ink-soft); font-weight: 400; }
.pri-order {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.1rem; margin-bottom: 0.6rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.field.inline { max-width: 420px; }
.field span { font-weight: 600; color: var(--ink); }
.field.span2 { grid-column: 1 / -1; }
input[type="text"], input[type="number"], input[type="month"], select, textarea {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px #fbe0cf; }
textarea { resize: vertical; }

.check-row { display: flex; gap: 0.55rem; align-items: start; font-size: 0.88rem; margin: 1rem 0 0.4rem; }
.check-row input { width: 17px; height: 17px; margin-top: 0.18rem; accent-color: var(--accent); }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.wizard-nav.end { justify-content: flex-start; flex-wrap: wrap; border-top: none; }
.form-error { color: var(--red); background: var(--red-bg); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; font-size: 0.86rem; margin: 0.8rem 0 0; }

.ozet-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.4rem 1rem; background: var(--paper); }
.ozet-row { display: flex; justify-content: space-between; gap: 1.2rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; }
.ozet-row:last-child { border-bottom: none; }
.ozet-row span { color: var(--ink-soft); flex: none; }
.ozet-row strong { text-align: right; font-weight: 600; }

.result-head { margin-bottom: 1.1rem; }
.result-head .badge { margin-bottom: 0.5rem; }

/* ---------- KPI & admin ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin: 1.1rem 0; }
.kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.1rem; }
.kpi-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.kpi-value { font-size: 1.55rem; font-weight: 700; color: var(--ink); }
.kpi-sub { font-size: 0.76rem; color: var(--ink-soft); }

.drawer { margin-top: 1rem; border-left: 4px solid var(--accent); }
.drawer-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.8rem; }
.drawer-id { font-size: 0.8rem; color: var(--ink-soft); }
.drawer-head h3 { margin: 0.15rem 0 0; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.drawer-note { font-size: 0.88rem; background: var(--paper); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-top: 0.9rem; }
.match-list { list-style: none; padding: 0; margin: 0.3rem 0 0.9rem; font-size: 0.88rem; }
.match-list li { padding: 0.4rem 0; border-bottom: 1px dashed var(--line-soft); }
.drawer-actions { margin-top: 0.9rem; display: grid; grid-template-columns: 220px 1fr; gap: 0.9rem 1.1rem; align-items: start; }
.drawer-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Ekosistem ---------- */
.eco-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0.8rem; align-items: stretch; margin-top: 1rem; }
.eco-card { border-top: 4px solid var(--navy); }
.eco-card.amber { border-top-color: var(--accent); }
.eco-card.green { border-top-color: var(--green); }
.eco-no { font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; }
.eco-rol { font-weight: 600; font-size: 0.9rem; margin: 0.2rem 0 0.6rem; }
.eco-card ul { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.eco-arrow { display: flex; align-items: center; font-size: 1.6rem; color: var(--accent); font-weight: 700; }

/* ---------- Yol haritası ---------- */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.timeline-donem { font-size: 0.72rem; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.timeline-item h3 { margin-top: 0.35rem; }
.timeline-item ul { font-size: 0.87rem; color: var(--ink-soft); }
.timeline-olcut { font-size: 0.84rem; background: var(--green-bg); color: var(--green); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; margin: 0.4rem 0 0; }

/* ---------- Boş durum, not, toast ---------- */
.empty-state {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.4rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
  margin-top: 1rem;
}
.note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.9rem; max-width: 52rem; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: #fff;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-size: 0.86rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 90;
  max-width: min(92vw, 480px);
  text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Altbilgi ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 2rem; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.footer-inner a { color: var(--ink-soft); text-decoration: underline; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1000px) {
  .card-grid, .timeline { grid-template-columns: repeat(2, 1fr); }
  .how-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-flow { grid-template-columns: 1fr; }
  .eco-arrow { transform: rotate(90deg); justify-content: center; padding: 0.1rem 0; }
  .hero { grid-template-columns: 1fr; }
  .hero-ticket { max-width: 480px; }
}

@media (max-width: 840px) {
  #nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 0.6rem 1rem 1rem;
    gap: 0.2rem;
    box-shadow: var(--shadow);
  }
  body.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); }
}

@media (max-width: 640px) {
  .card-grid, .card-grid.two, .timeline, .how-grid, .kpi-grid,
  .option-grid, .form-grid, .profile-grid,
  .drawer-grid, .drawer-actions { grid-template-columns: 1fr; }
  .cat-meta { grid-template-columns: 1fr; }
  .data-table { min-width: 560px; }
  main#app { padding: 1rem 0.9rem 3rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* ---------- Yazdırma ---------- */
@media print {
  .site-nav, .demo-banner, .site-footer, .toolbar, .btn, #toast { display: none !important; }
  body { background: #fff; }
  .card, .table-wrap { box-shadow: none; }
}

/* =========================================================
   v1.0.0 EKLERİ — marketplace bileşenleri
   ========================================================= */

/* Gezinme: kullanıcı çipi, bildirim zili, çıkış */
.nav-user { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }
.bell { position: relative; padding: 0.42rem 0.6rem !important; font-size: 1rem; }
.badge-dot {
  position: absolute; top: 0; right: 0;
  background: var(--accent); color: #fff;
  font-size: 0.62rem; font-weight: 700; font-family: var(--font-mono);
  min-width: 16px; height: 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px; box-shadow: 0 0 0 2px var(--surface);
}
.nav-links a.nav-out { color: var(--red); }

/* Kimlik ekranları */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.auth-card { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-card.wide { max-width: 100%; }
.rol-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.4rem; }
.demo-cred { width: 100%; background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.demo-cred:hover strong { color: var(--accent-deep); }

/* Liste satırı (bildirim, ürün listesi, demo hesap) */
.list-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0.2rem; border-bottom: 1px dashed var(--line-soft);
  color: var(--ink); font-size: 0.9rem;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover strong { color: var(--accent-deep); }
.notif.unread { background: #fdf3ec; border-left: 3px solid var(--accent); padding-left: 0.6rem; border-radius: 4px; }

/* Katalog & ürün kartları */
.filter-bar { margin-bottom: 1.2rem; display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.filter-bar .form-grid { flex: 1; margin-bottom: 0; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.product-card .thumb { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 0.6rem; }
.thumb.lg { height: 220px; }
.tile {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 140px; border-radius: var(--radius-sm); margin-bottom: 0.6rem;
  background: linear-gradient(135deg, var(--navy), var(--ink));
  color: #f2f4f6; font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: 0.04em;
}
.card .tile { max-height: 120px; }
.product-card .price { font-weight: 600; margin: 0.2rem 0 0.4rem; }

/* Eşleşme satırı */
.match-row {
  display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 0.8rem;
  padding: 0.55rem 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.9rem;
}
.match-row:last-of-type { border-bottom: none; }

/* Uyarı bandı (onay bekleyen firma) */
.banner-warn {
  border-left: 4px solid var(--amber);
  background: var(--amber-bg); color: var(--amber);
  font-size: 0.92rem; margin-bottom: 1.2rem;
}

/* Teklif not satırı */
.not-row td { padding-top: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }

/* Sipariş zaman çizelgesi */
.order-steps { display: flex; align-items: flex-start; overflow-x: auto; padding: 0.4rem 0.2rem 0.6rem; }
.ostep { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-width: 110px; text-align: center; }
.ostep .chain-dot { border-color: var(--line); box-shadow: 0 0 0 4px var(--line-soft); background: var(--surface); }
.ostep.done .chain-dot { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-bg); background: var(--green); }
.ostep.active .chain-dot { border-color: var(--accent); box-shadow: 0 0 0 4px #fdefe6; }
.ostep .chain-label em { display: block; font-style: normal; font-size: 0.68rem; color: var(--ink-soft); margin-top: 0.15rem; }
.ostep.done .chain-label, .ostep.active .chain-label { color: var(--ink); }
.ostep .chain-label { color: var(--ink-soft); }
.order-steps .chain-link { background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }

/* Mesaj dizisi */
.thread { margin-top: 1.2rem; }
.thread-body { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.6rem 0 0.9rem; }
.msg { max-width: 78%; padding: 0.55rem 0.85rem; border-radius: 12px; font-size: 0.9rem; }
.msg p { margin: 0.15rem 0 0; }
.msg-meta { font-size: 0.7rem; color: var(--ink-soft); font-family: var(--font-mono); }
.msg.other { background: var(--paper); border: 1px solid var(--line-soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: #fdefe6; border: 1px solid #f4c8ab; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.me .msg-meta { color: var(--accent-deep); }
.thread-form { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: end; }

/* Tender eşleşme vurgusu */
.tender-match { border-left: 4px solid var(--green); }

/* Duyarlı ekler */
@media (max-width: 840px) {
  .auth-grid, .form-grid.three { grid-template-columns: 1fr; }
  .nav-user { display: none; }
}
@media (max-width: 640px) {
  .rol-secim { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: 1fr; }
  .thread-form { grid-template-columns: 1fr; }
  .msg { max-width: 92%; }
}

/* =========================================================
   DEMO MODU — yalnızca test/sunum; üretimde demo.js ile
   birlikte bu blok da kaldırılır.
   ========================================================= */
#demo-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  background: var(--ink); border-top: 3px solid var(--accent);
  overflow-x: auto; box-shadow: 0 -4px 18px rgba(22,34,47,.18);
}
.demo-bar-label {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent); flex: none; padding-right: 0.4rem;
}
.demo-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  background: rgba(255,255,255,.08); color: #dfe6ee;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.32rem; font-size: 0.74rem; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.demo-chip:hover { background: rgba(255,255,255,.16); color: #fff; }
.demo-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.demo-kisa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.28); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
}
.demo-chip.active .demo-kisa { background: rgba(0,0,0,.22); }
.demo-chip.alt { padding: 0.3rem 0.8rem; background: none; border-style: dashed; }
.demo-sep { flex: none; width: 1px; height: 20px; background: rgba(255,255,255,.18); margin: 0 0.35rem; }

/* alt çubuk içeriği örtmesin */
body { padding-bottom: 52px; }
#toast { bottom: 4.2rem; }
@media (max-width: 640px) { body { padding-bottom: 60px; } }

/* =========================================================
   DİJİTAL ÜRÜN PASAPORTU
   ========================================================= */
.pas-sayfa { display: grid; grid-template-columns: 268px 1fr; gap: 1.4rem; align-items: start; margin-top: .6rem; }

/* --- sol ray --- */
.pas-ray { position: sticky; top: 74px; }
.pas-ray-ic {
  background: var(--ink); color: #dbe3ea; border-radius: var(--radius);
  padding: 1.1rem 1rem; box-shadow: var(--shadow);
}
.pas-marka .eyebrow { color: var(--accent); margin-bottom: .7rem; }
.pas-foto { width: 100%; border-radius: var(--radius-sm); background: #eef2f6; margin-bottom: .8rem; display: block; }
img.pas-foto { height: 160px; object-fit: cover; }

.pas-durum {
  display: block; text-align: center; font-size: .78rem; font-weight: 700;
  padding: .4rem .6rem; border-radius: 999px; margin-bottom: .45rem;
}
.pas-durum.ok { background: rgba(30,122,95,.22); color: #6ee3b8; }
.pas-durum.bekle { background: rgba(232,97,28,.18); color: #ffb488; }
.pas-durum-alt { font-size: .72rem; color: #93a3b3; line-height: 1.45; margin-bottom: .9rem; }

.pas-tamam { border-top: 1px solid rgba(255,255,255,.12); padding-top: .8rem; margin-bottom: .9rem; }
.pas-tamam-ust { display: flex; justify-content: space-between; font-size: .74rem; margin-bottom: .35rem; color: #b8c4d0; }
.pas-tamam .score-bar { background: rgba(255,255,255,.14); }
.pas-eksik { font-size: .68rem; color: #8fa0b0; margin: .45rem 0 0; line-height: 1.4; }

.pas-nav { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1rem; }
.pas-nav-link {
  background: none; border: none; color: #b8c4d0; text-align: left;
  padding: .48rem .6rem; border-radius: var(--radius-sm); font-size: .82rem;
  border-left: 2px solid transparent;
}
.pas-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.pas-nav-link.active { background: rgba(232,97,28,.16); color: #fff; border-left-color: var(--accent); font-weight: 600; }

.pas-qr { border-top: 1px solid rgba(255,255,255,.12); padding-top: .9rem; text-align: center; }
.pas-qr-baslik { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; color: #8fa0b0; }
.pas-qr-kutu { background: #fff; padding: 8px; border-radius: var(--radius-sm); display: inline-block; margin: .6rem 0 .5rem; }
.pas-qr-kutu svg { display: block; }
.pas-qr-alt { font-size: .7rem; color: #93a3b3; margin: 0 0 .3rem; }
.pas-qr-url { font-size: .64rem; color: #6f8195; word-break: break-all; margin: 0; }

/* --- gövde --- */
.pas-govde { min-width: 0; }
.pas-baslik { display: flex; justify-content: space-between; align-items: start; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pas-baslik h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: .2rem; }
.pas-kod { color: var(--navy); font-size: 1rem; font-weight: 600; letter-spacing: .04em; }
.pas-rozet {
  display: flex; align-items: center; gap: .6rem; flex: none;
  border: 1.5px solid var(--green); background: var(--green-bg);
  border-radius: 999px; padding: .5rem .95rem;
}
.pas-rozet.bekle { border-color: var(--amber); background: var(--amber-bg); }
.pas-rozet-ikon {
  width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; flex: none;
}
.pas-rozet.bekle .pas-rozet-ikon { background: var(--amber); }
.pas-rozet strong { display: block; font-size: .68rem; letter-spacing: .06em; color: var(--green); font-family: var(--font-mono); }
.pas-rozet.bekle strong { color: var(--amber); }
.pas-rozet span { font-size: .7rem; color: var(--ink-soft); }

.pas-kimlik {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1.2rem; margin-bottom: 1.4rem; box-shadow: var(--shadow);
}
.pas-kimlik-ic span {
  display: block; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .1em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: .2rem;
}
.pas-kimlik-ic strong { font-size: .92rem; }

.pas-bolum { margin-bottom: 1.6rem; scroll-margin-top: 84px; }
.pas-bolum h2 { margin-bottom: .8rem; }
.pas-bolum-ic { scroll-margin-top: 84px; }
.pas-ozet-satir { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; }
.pas-ozet h3 { font-size: 1.02rem; line-height: 1.4; color: var(--navy); }
.pas-ozet p { color: var(--ink-soft); font-size: .92rem; }
.pas-gorsel-buyuk { padding: .6rem; display: flex; align-items: center; }
.urun-gorsel { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }

/* --- performans kartları --- */
.spec-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.spec-kart {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem .85rem; box-shadow: var(--shadow); text-align: left;
}
.spec-ust { display: flex; align-items: center; gap: .4rem; color: var(--ink-soft); margin-bottom: .55rem; }
.spec-ust span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; line-height: 1.2; }
.spec-ikon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.spec-deger { font-family: var(--font-display); font-size: 1.28rem; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.02em; }
.spec-std { font-size: .68rem; color: var(--ink-soft); margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--line-soft); }
.spec-kart.bos .spec-deger { color: var(--ink-soft); font-size: .92rem; font-weight: 500; font-family: var(--font-body); }
.spec-kart.bos { border-style: dashed; box-shadow: none; }

/* --- sürdürülebilirlik --- */
.pas-uclu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.pas-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.ring-satir { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ring { width: 108px; height: 108px; flex: none; }
.ring-val { font-family: var(--font-display); font-size: 30px; font-weight: 800; fill: var(--ink); }
.ring-max { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-soft); }
.ring-alt {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.sd-liste { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 150px; }
.sd-liste li { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; padding: .3rem 0; border-bottom: 1px dashed var(--line-soft); color: var(--ink-soft); }
.sd-liste li:last-child { border-bottom: none; }
.sd-liste strong { color: var(--ink); }

.donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.donut { width: 112px; height: 112px; flex: none; }
.donut-legend { list-style: none; padding: 0; margin: 0; font-size: .8rem; flex: 1; min-width: 130px; }
.donut-legend li { display: flex; align-items: center; gap: .4rem; padding: .18rem 0; color: var(--ink-soft); }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend .mono { color: var(--ink); font-weight: 600; min-width: 32px; }
.karbon-toplam {
  margin-top: .9rem; padding: .6rem .8rem; background: var(--paper); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: .1rem;
}
.karbon-toplam span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: var(--ink-soft); }
.karbon-toplam strong { font-size: 1.15rem; }

.yesil-liste, .sert-liste { list-style: none; padding: 0; margin: .3rem 0 0; }
.yesil-liste li, .sert-liste li {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .45rem 0; border-bottom: 1px dashed var(--line-soft); font-size: .87rem;
}
.yesil-liste li:last-child, .sert-liste li:last-child { border-bottom: none; }

/* --- izlenebilirlik / kalite --- */
.mini-tablo { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mini-tablo th {
  text-align: left; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); padding: .3rem 0; border-bottom: 1px solid var(--line);
}
.mini-tablo td { padding: .42rem 0; border-bottom: 1px dashed var(--line-soft); }
.mini-tablo td:last-child { text-align: right; color: var(--ink-soft); }
.mini-tablo tr:last-child td { border-bottom: none; }
.mini-tablo .eksik { color: var(--amber); }
.izlen-ok { color: var(--green); font-size: .82rem; font-weight: 600; margin: .6rem 0 0; }

.kalite-satir { display: flex; gap: 1rem; align-items: start; flex-wrap: wrap; }
.kalite-skor { text-align: center; flex: none; padding-right: .6rem; }
.kalite-skor strong { display: block; font-size: 2rem; font-weight: 800; color: var(--navy); line-height: 1; }
.kalite-skor span { font-size: .8rem; color: var(--ink-soft); }
.kalite-skor em {
  display: block; font-style: normal; font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .08em; color: var(--ink-soft); margin-top: .3rem; max-width: 90px;
}
.kalite-liste { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 170px; }
.kalite-liste li {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  font-size: .82rem; padding: .32rem 0; border-bottom: 1px dashed var(--line-soft);
}
.kalite-liste li:last-child { border-bottom: none; }

/* --- belgeler / garanti --- */
.belge-liste { list-style: none; padding: 0; margin: 0; }
.belge-liste li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; border-bottom: 1px dashed var(--line-soft); font-size: .87rem;
}
.belge-liste li:last-child { border-bottom: none; }
.belge-ad { display: flex; align-items: center; gap: .5rem; }
.dosya-ikon { width: 16px; height: 16px; flex: none; }
.belge-tip { font-size: .68rem; color: var(--ink-soft); background: var(--line-soft); padding: .1rem .45rem; border-radius: 4px; }

.garanti-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.garanti-kart { background: var(--paper); border-radius: var(--radius-sm); padding: .7rem .8rem; }
.garanti-kart span {
  display: block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .08em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: .25rem;
}
.garanti-kart strong { font-size: .98rem; }

/* --- yaşam döngüsü --- */
.yasam-hat { display: flex; align-items: flex-start; overflow-x: auto; padding: .8rem .2rem .2rem; }
.yasam-adim { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 104px; text-align: center; flex: none; }
.yasam-nokta {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700; flex: none;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink-soft);
}
.yasam-adim.gecti .yasam-nokta { background: var(--green); border-color: var(--green); color: #fff; }
.yasam-adim.bekliyor .yasam-nokta { border-style: dashed; }
.yasam-ad { font-size: .76rem; font-weight: 600; line-height: 1.25; }
.yasam-adim.bekliyor .yasam-ad { color: var(--ink-soft); font-weight: 500; }
.yasam-tarih { font-size: .64rem; color: var(--ink-soft); }
.yasam-cizgi { flex: 1; min-width: 20px; height: 2px; margin-top: 16px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }

.pas-uretici { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pas-uretici p { margin-bottom: .5rem; }

/* --- katalog kartı görseli --- */
.thumb-kutu { position: relative; margin-bottom: .6rem; }
.product-card .thumb { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
svg.thumb { height: 150px; }
.thumb-rozet {
  position: absolute; left: .5rem; bottom: .5rem;
  background: rgba(30,122,95,.94); color: #fff; font-size: .64rem; font-weight: 600;
  padding: .18rem .5rem; border-radius: 999px;
}

/* --- duyarlı --- */
@media (max-width: 1000px) {
  .pas-sayfa { grid-template-columns: 1fr; }
  .pas-ray { position: static; }
  .pas-nav { flex-direction: row; flex-wrap: wrap; }
  .pas-nav-link { border-left: none; border-bottom: 2px solid transparent; }
  .pas-nav-link.active { border-left: none; border-bottom-color: var(--accent); }
  .spec-grid { grid-template-columns: repeat(3, 1fr); }
  .pas-uclu { grid-template-columns: 1fr; }
  .pas-kimlik { grid-template-columns: repeat(2, 1fr); }
  .pas-ozet-satir { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .pas-ikili, .garanti-grid { grid-template-columns: 1fr; }
  .pas-kimlik { grid-template-columns: 1fr; }
  .pas-baslik { flex-direction: column; }
}

/* pasaport düzenleme formu (üretici) */
.pas-form {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; margin: 1rem 0; background: var(--paper);
}
.pas-form summary { cursor: pointer; font-size: .95rem; padding: .2rem 0; }
.pas-form summary::marker { color: var(--accent); }
.pas-form h4 { margin-top: 1.1rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.pas-form h4:first-of-type { border-top: none; padding-top: 0; }

/* =========================================================
   v1.2.0 — katalog kaynak ağı, proje vitrini ve provenance
   ========================================================= */
.badge.source {
  background: #e7f1ff;
  color: #154f86;
  border: 1px solid #b9d6f3;
  font-size: .62rem;
  letter-spacing: .02em;
}
.section-title-row,
.source-title-row,
.project-top,
.filter-actions,
.source-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.section-title-row h2,
.source-title-row h2 { margin-bottom: 0; }
.lede.compact { max-width: 880px; font-size: 1rem; }
.catalog-network {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}
.source-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.source-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .38rem;
  min-height: 126px;
  text-decoration: none;
}
.source-mini:hover { border-color: var(--accent); transform: translateY(-1px); }
.source-mini strong { color: var(--ink); }
.source-mini small { color: var(--ink-soft); line-height: 1.35; }
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.project-card { display: flex; flex-direction: column; min-height: 250px; }
.project-card .chip-row { margin-top: auto; }
.project-top .mono { color: var(--ink-soft); font-size: .72rem; }
.filter-actions { margin-top: .8rem; }
.result-count { color: var(--ink-soft); font-size: .76rem; }
.source-line {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: .35rem 0 .55rem;
  color: var(--ink-soft);
  font-size: .72rem;
}
.catalogue-disclaimer,
.catalogue-profile-note {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  padding: .72rem .8rem;
  margin: .75rem 0;
  border: 1px solid #cddff0;
  border-left: 4px solid #2877b8;
  border-radius: var(--radius-sm);
  background: #f2f8fe;
  color: #26445f;
  font-size: .8rem;
  line-height: 1.45;
}
.catalogue-disclaimer strong,
.catalogue-profile-note strong { color: #154f86; }
.source-panel { margin-bottom: 1.6rem; }
.source-title-row { align-items: flex-start; margin-bottom: 1rem; }
.licence-state {
  max-width: 260px;
  padding: .38rem .62rem;
  border-radius: 999px;
  background: #fff7e5;
  border: 1px solid #ead3a0;
  color: #805500;
  font-family: var(--font-mono);
  font-size: .62rem;
  text-align: center;
}
.source-detail-grid {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(0, 1.35fr);
  gap: 1.2rem;
  align-items: start;
}
.source-primary,
.provenance-card {
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.hash-short {
  display: inline-block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.provenance-table { min-width: 620px; }
.provenance-table th,
.provenance-table td { padding-right: .65rem; text-align: left; vertical-align: top; }
.provenance-table td:last-child { text-align: left; }
.catalogue-profile-note { margin-top: 1rem; }
.list-row > span:first-child {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .source-strip,
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .section-title-row,
  .source-title-row,
  .filter-actions { align-items: flex-start; flex-direction: column; }
  .source-strip,
  .project-grid { grid-template-columns: 1fr; }
  .licence-state { max-width: 100%; }
}

.runtime-status{padding:7px 16px;text-align:center;font:600 12px/1.4 "IBM Plex Mono",monospace}.runtime-status.is-demo{background:#fff3cd;color:#664d03}.runtime-status.is-live{background:#d1e7dd;color:#0f5132}.runtime-status.is-error{background:#f8d7da;color:#842029}


/* ---------- Çok dilli arayüz ---------- */
html.i18n-loading body { visibility: hidden; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.language-switcher { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; color: var(--ink-soft); }
.language-switcher .language-icon { font-size: .9rem; line-height: 1; }
.language-switcher select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .34rem 1.55rem .34rem .62rem; font: 600 .76rem/1 var(--font-mono); background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.language-switcher select:hover { border-color: var(--accent); }
@media (min-width: 901px) { .language-switcher { margin-left: .25rem; } .nav-links { margin-left: 0; } }
@media (max-width: 900px) { .language-switcher { margin-left: auto; } #nav-toggle { margin-left: 0; } }


/* ===== BuildBridge v1.4.5 AI Workflow Demo ===== */
.btn.accent{background:#6b3fd6;color:#fff;border-color:#6b3fd6}.btn.accent:hover{background:#5830bd}.btn.danger.ghost{color:#b42318;border-color:#f0b5b0;background:#fff}.demo-chip.ai{background:#6b3fd6!important;color:#fff!important;border-color:#8d6de1!important}.ai-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:1.25rem;align-items:center;background:linear-gradient(135deg,#071d42,#0b3976);color:#fff;border-radius:18px;padding:1.5rem;margin-bottom:1.2rem;box-shadow:0 18px 44px rgba(7,29,66,.18)}.ai-hero h2{font-size:clamp(1.65rem,3vw,2.5rem);margin:.25rem 0 .75rem}.ai-hero p{color:#dceaff;max-width:64ch}.ai-hero img{width:100%;max-height:330px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:#fff}.ai-project-card{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-left:5px solid #6b3fd6}.ai-demo-badges{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.ai-kind{display:inline-flex;align-items:center;border-radius:999px;padding:.27rem .58rem;font:600 .73rem/1.2 var(--mono,monospace);white-space:nowrap}.ai-kind.real{background:#e7f6ed;color:#13753b;border:1px solid #a8dfba}.ai-kind.simulated{background:#fff5dc;color:#8a5a00;border:1px solid #f1d189}.ai-kind.rule{background:#e9f2ff;color:#145aa3;border:1px solid #a9cbee}.ai-timeline{display:grid;gap:.65rem}.ai-step{display:grid;grid-template-columns:34px 1fr;gap:.7rem;padding:.7rem;border:1px solid #dce5ef;border-radius:11px;background:#f8fafc;opacity:.62}.ai-step.done{opacity:1}.ai-step.active{border-color:#6b3fd6;box-shadow:0 0 0 3px rgba(107,63,214,.09);background:#fbf9ff}.ai-step-index{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#d7e1ec;color:#31445a;font-weight:800}.ai-step.done .ai-step-index{background:#18864b;color:#fff}.ai-step.active .ai-step-index{background:#6b3fd6}.ai-step p{margin:.25rem 0 .4rem;font-size:.86rem;color:#657489}.ai-match-score{font:800 1.2rem/1 var(--mono,monospace);color:#18864b}.ai-warning{border-left:4px solid #e1a019;background:#fff8e8;padding:.7rem .85rem;border-radius:7px;color:#6f4b00}.hash-wrap{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-size:.78rem}.eyebrow{letter-spacing:.11em;text-transform:uppercase;font-size:.72rem;font-weight:800;color:#6b3fd6}.ai-hero .eyebrow{color:#98c5ff}.profile-grid .ai-timeline{min-width:0}@media(max-width:850px){.ai-hero{grid-template-columns:1fr}.ai-project-card{align-items:flex-start;flex-direction:column}.ai-demo-badges{justify-content:flex-start}}

/* v1.4.5 zero-setup demo launcher */
.ai-launch-loader{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.ai-launch-loader .spinner{width:42px;height:42px;border:4px solid #dbeafe;border-top-color:#1368d4;border-radius:50%;animation:bb-spin .8s linear infinite}
@keyframes bb-spin{to{transform:rotate(360deg)}}
/* v1.4.5 content-origin semantics */
[data-source-content="true"], [data-raw-evidence="true"] { unicode-bidi: plaintext; }
[data-brand-name="true"] { font-variant-ligatures: common-ligatures; }
.i18n-source-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }