/* ==========================================================================
   Education: İHA sürüsü → ağ → graf animasyonu (assets/js/edu-swarm.js)
   Tuval ile tarama çizgisi katmanı aynı ızgara hücresini paylaşır,
   açıklama altta küçük ve gri durur.
   ========================================================================== */

.edu-swarm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 32px;
  padding: 0;
}

.edu-swarm canvas {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 260px;
  background: #222222;
}

/* Vizör: ince çerçeve + gri köşe işaretleri */
.edu-swarm::before {
  --s: 10px;
  --w: 1px;
  --c: #666666;
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  pointer-events: none;
  border: 1px solid #333333;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) 0 0 / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) 0 100% / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) 0 100% / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--w) var(--s);
  background-repeat: no-repeat;
}

/* Çok hafif tarama çizgileri */
.edu-swarm::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
      rgba(150, 150, 150, 0.07) 0 1px,
      transparent 1px 4px);
}

.edu-swarm-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--font-size-11, 11px);
  line-height: 1.4;
  color: #999999;
  letter-spacing: 0.02em;
}

.edu-swarm-caption:empty {
  display: none;
}

.edu-swarm-step {
  color: #666666;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .edu-swarm canvas {
    aspect-ratio: 4 / 3;
    max-height: 320px;
  }
}