/* Veri füzyonu kartları (afet ve risk; altyapı, arazi, büyüme eklendikçe) */
.fz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.fz-kpi { position: relative; padding: 10px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.fz-kpi b { display: block; font: 800 17px/1.2 var(--display); letter-spacing: -.01em; }
.fz-kpi small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); }
.fz-lvl { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface-3, var(--surface)); color: var(--text-2); }
.fz-kpi[data-tone="ok"] .fz-lvl { background: color-mix(in srgb, var(--success, #2f9e44) 16%, transparent); color: var(--success, #2f9e44); }
.fz-kpi[data-tone="warn"] .fz-lvl { background: color-mix(in srgb, var(--warning, #f08c00) 18%, transparent); color: var(--warning-text, #b35c00); }
.fz-kpi[data-tone="bad"] { background: color-mix(in srgb, var(--danger) 9%, var(--surface-2)); }
.fz-kpi[data-tone="bad"] .fz-lvl { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.hazard-guide { --guide: #e8590c; }

/* Yapılaşma hakkı (Hesapla › Yapılaşma) */
.env-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 560px) { .env-grid { grid-template-columns: 1fr; } }
.env-svg { width: 100%; max-height: 240px; background: var(--surface-2); border-radius: var(--r-md); }
.env-parcel { fill: color-mix(in srgb, var(--accent, #f76707) 10%, transparent); stroke: var(--text-2); stroke-width: 1.4; }
.env-fp { fill: color-mix(in srgb, #4dabf7 45%, transparent); stroke: #1c7ed6; stroke-width: 1.2; stroke-dasharray: 4 2; }
.env-n { font: 700 10px/1 var(--sans, sans-serif); fill: var(--text-1); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.env-edges { display: grid; gap: 4px; max-height: 210px; overflow: auto; margin-top: 4px; }
.env-edge { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: var(--surface-2); font-size: var(--fs-xs); cursor: pointer; }
.env-edge small { color: var(--text-3); margin-left: auto; }
.env-edge.is-front { background: color-mix(in srgb, var(--accent, #f76707) 14%, var(--surface-2)); }
.chip--ok { background: color-mix(in srgb, var(--success, #2f9e44) 14%, transparent); }
.chip--bad { background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Almadan önce kontrol listesi (kural tabanlı) */
.ck-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: var(--fs-sm);
  background: var(--surface-2); color: var(--text-2); }
.ck-pill b { font: 800 15px/1 var(--display); color: var(--text-1); }
.ck-pill[data-tone="ok"] { background: var(--success-soft); } .ck-pill[data-tone="ok"] .i { color: var(--success); }
.ck-pill[data-tone="warn"] { background: var(--warning-soft); } .ck-pill[data-tone="warn"] .i { color: var(--warning); }
.ck-warn { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ck-warn li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); }
.ck-warn li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ck-warn small { color: var(--text-3); font-size: var(--fs-xs); }
.ck-n { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 11px/1 var(--display);
  background: var(--surface-2); color: var(--text-2); }
.ck-warn .ck-n, .ck-item[data-tone="warn"] .ck-n { background: var(--warning-soft); color: var(--warning-text, #b35c00); }
.ck-item[data-tone="ok"] .ck-n { background: var(--success-soft); color: var(--success); }
.ck-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ck-item { display: flex; gap: 10px; padding: 10px; border-radius: var(--r-md); background: var(--surface-2); }
.ck-item[data-tone="warn"] { background: color-mix(in srgb, var(--warning, #f08c00) 8%, var(--surface-2)); }
.ck-item p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.ck-item__h { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.ck-st { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.ck-item[data-tone="ok"] .ck-st { color: var(--success); }
.ck-item[data-tone="warn"] .ck-st { color: var(--warning-text, #b35c00); }
.ck-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ck-lock { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-3); }
.checks-guide { --guide: #2f9e44; }
.ck-print td:first-child { width: 28px; text-align: center; }

/* Ulaşım süreleri */
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-md); background: var(--surface-2); }
.tr-ic { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, #1c7ed6 14%, transparent); color: #1c7ed6; }
.tr-what { display: grid; min-width: 0; font-size: var(--fs-sm); }
.tr-what small { color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-t { display: grid; justify-items: end; text-align: right; flex: none; }
.tr-t b { font: 800 15px/1.2 var(--display); }
.tr-t small { color: var(--text-3); font-size: var(--fs-xs); }
.travel-guide { --guide: #1c7ed6; }

/* Yol ve altyapı */
.fz-sub { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-kpi[data-tone="ok"] { background: color-mix(in srgb, var(--success, #2f9e44) 8%, var(--surface-2)); }
.fz-kpi[data-tone="warn"] { background: color-mix(in srgb, var(--warning, #f08c00) 9%, var(--surface-2)); }
.fz-sites { margin-top: 10px; }
.fz-sites ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.fz-sites li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); font-size: var(--fs-sm); }
.fz-sites li span { color: var(--text-3); font-size: var(--fs-xs); }
.fz-sites li[data-tone="warn"] { background: color-mix(in srgb, var(--warning, #f08c00) 10%, var(--surface-2)); }
.infra-guide { --guide: #1971c2; }