/* ============================================================
   Proje şeması — interaktif diyagram
   ============================================================ */

.cn-dg {
  background: linear-gradient(140deg, var(--cn-blue-900) 0%, var(--cn-blue-800) 60%, var(--cn-blue-700) 100%);
  border-radius: 20px;
  padding: 22px 22px 26px;
  box-shadow: var(--cn-shadow-lg);
  color: #dbe7f4;
}

/* araç çubuğu -------------------------------------------------- */
.cn-dg-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px;
}
.cn-dg-bar-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cn-blue-300); margin-right: 6px;
}
.cn-dg-btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07); color: #dbe7f4;
  transition: .15s ease;
}
.cn-dg-btn:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }
.cn-dg-btn.on { background: var(--cn-orange-500); border-color: var(--cn-orange-500); color: #fff; }

/* sahne -------------------------------------------------------- */
.cn-dg-stage {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}
.cn-dg-svg {
  display: block; width: 100%; min-width: 980px; height: auto;
}

/* kablolar ----------------------------------------------------- */
.cn-dg-edge {
  animation: cn-dg-flow 1.15s linear infinite;
}
@keyframes cn-dg-flow { to { stroke-dashoffset: -17; } }

/* düğümler ----------------------------------------------------- */
.cn-dg-nd { cursor: pointer; }
.cn-dg-nd .cn-dg-nd-bg { transition: .16s ease; }
.cn-dg-nd:hover .cn-dg-nd-bg,
.cn-dg-nd:focus-visible .cn-dg-nd-bg {
  stroke: var(--cn-orange-500); stroke-width: 3;
}
.cn-dg-nd:focus { outline: none; }
.cn-dg-nd.is-active .cn-dg-nd-bg { stroke: var(--cn-orange-500); stroke-width: 3.4; }

/* odaklama: ilgisiz her şey söner ------------------------------ */
.cn-dg-svg.is-focused .cn-dg-nd { opacity: .22; }
.cn-dg-svg.is-focused .cn-dg-nd.is-on { opacity: 1; }
.cn-dg-svg.is-focused .cn-dg-edge { opacity: .04 !important; }
.cn-dg-svg.is-focused .cn-dg-edge.is-on {
  opacity: 1 !important;
  stroke-width: 3.6;
  animation-duration: .7s;
}

/* bilgi paneli ------------------------------------------------- */
.cn-dg-panel {
  margin-top: 18px;
  background: #fff; color: var(--cn-ink);
  border-radius: 14px; padding: 22px 24px;
  border-left: 6px solid var(--cn-orange-500);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 24px;
  align-items: start;
}
.cn-dg-panel[hidden] { display: none; }
.cn-dg-panel h3 { margin: 0 0 .2em; font-size: 1.3rem; color: var(--cn-blue-900); }
.cn-dg-panel .cn-dg-p-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cn-orange-600); margin-bottom: 8px;
}
.cn-dg-panel .cn-dg-p-role { font-weight: 600; color: var(--cn-blue-700); margin: 0 0 .6em; }
.cn-dg-panel p { margin: 0 0 .8em; font-size: 15.5px; color: var(--cn-ink-soft); }
.cn-dg-panel .cn-dg-p-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cn-dg-panel .cn-dg-p-links a { font-weight: 600; font-size: 14.5px; }
.cn-dg-panel .cn-dg-p-links a.official {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cn-orange-500); color: #fff;
  padding: 9px 18px; border-radius: 999px;
}
.cn-dg-panel .cn-dg-p-links a.official:hover { background: var(--cn-orange-600); color: #fff; }
.cn-dg-close {
  appearance: none; cursor: pointer; border: 0; background: var(--cn-blue-50);
  color: var(--cn-ink-soft); width: 34px; height: 34px; border-radius: 9px;
  font-size: 19px; line-height: 1;
}
.cn-dg-close:hover { background: var(--cn-blue-100); color: var(--cn-blue-700); }

/* açıklama (legend) ------------------------------------------- */
.cn-dg-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 22px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.cn-dg-legend div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #bdd3e8; }
.cn-dg-legend i {
  flex: 0 0 auto; width: 26px; height: 3px; border-radius: 2px; display: block;
}
.cn-dg-legend .l-main { background: #8cc0f0; }
.cn-dg-legend .l-sso { background: #6e9cc9; }
.cn-dg-legend .l-data { background: #8cc0f0; }
.cn-dg-legend .l-obs { background: #6e9cc9; }
.cn-dg-legend .l-backup { background: var(--cn-orange-500); height: 4px; }
.cn-dg-legend-title {
  grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cn-blue-300); margin: 0;
}

/* güvenlik kartları ------------------------------------------- */
.cn-dg-sec { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.cn-dg-sec article {
  background: #fff; border: 1px solid var(--cn-line); border-top: 4px solid var(--cn-orange-500);
  border-radius: var(--cn-radius); padding: 22px 20px; box-shadow: var(--cn-shadow);
}
.cn-dg-sec .n {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--cn-blue-100); color: var(--cn-blue-700); font-weight: 700; font-size: 15px;
  margin-bottom: 14px;
}
.cn-dg-sec h3 { font-size: 1.02rem; margin-bottom: .4em; color: var(--cn-blue-900); }
.cn-dg-sec p { font-size: 14.5px; color: var(--cn-ink-soft); margin: 0; }

.cn-dg-hint { font-size: 14px; color: var(--cn-blue-300); margin: 14px 2px 0; }

/* duyarlı ------------------------------------------------------ */
@media (max-width: 1080px) {
  .cn-dg-sec { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .cn-dg { padding: 16px 14px 20px; border-radius: 16px; }
  .cn-dg-sec { grid-template-columns: minmax(0,1fr); }
  .cn-dg-panel { grid-template-columns: minmax(0,1fr); }
  .cn-dg-svg { min-width: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-dg-edge { animation: none; }
}