/* Veri Merkezi özet sayfası */
.elx-dc .elx-tab:hover { background: var(--bg); }
@keyframes elxslide-dc {
  from { opacity: 0; transform: translateX(34px); }
  to { opacity: 1; transform: translateX(0); }
}
.elx-dc .elx-slide-a,
.elx-dc .elx-slide-b { animation: elxslide-dc .45s var(--ease-out); }
.elx-dc .elx-svc-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: elxpulse 3s ease-in-out infinite;
}
.elx-dc .elx-heroring {
  transform-box: fill-box;
  transform-origin: center;
  animation: elxspin 30s linear infinite;
}
@keyframes elxpulse {
  0%, 100% { transform: scale(.94); opacity: .55; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 1024px) {
  .elx-dc-hero,
  .elx-dc-why,
  .elx-dc-panel,
  .elx-dc-contact { grid-template-columns: 1fr !important; }
  .elx-dc-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .elx-dc-stats { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .elx-dc-steps { grid-template-columns: 1fr 1fr !important; gap: 32px 0 !important; }
  .elx-dc-steps .elx-node::after { display: none !important; }
  .elx-dc-contrast-head,
  .elx-dc-contrast-row { grid-template-columns: 1fr !important; }
  .elx-dc-hero-visual { height: 320px !important; }
  .elx-dc-panel-media,
  .elx-dc-panel-body { height: auto !important; min-height: 420px; }
  /* Kalkan ve %99,9 kutuları tek kolonda görselin üzerine biniyordu:
     ikisini de akışa alıp görselin üstünde karşılıklı yerleştir. Dar
     ekranda sığmadıklarında satır kaydırma ile alt alta geçerler. */
  .elx-dc-why-visual {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 12px;
  }
  .elx-dc-why-art {
    order: 2;
    flex: 1 0 100%;
    height: auto !important;
  }
  .elx-dc-float-shield {
    order: 0;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 210px;
  }
  .elx-dc-float-uptime {
    order: 1;
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    flex: 0 1 auto;
    margin-left: auto;
  }
}

@media (max-width: 700px) {
  .elx-dc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .elx-dc-steps { grid-template-columns: 1fr !important; }
  .elx-dc h1 { font-size: 40px !important; }
}