/* ====================== TERMINAL CARD PREMIUM ====================== */
.terminal-card--premium {
  width: 100%;
  max-width: 580px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(600px 180px at 80% 0%, rgba(255,178,0,.10), transparent 60%),
    rgba(8,12,24,.95);
  box-shadow:
    0 24px 60px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 40px rgba(124,92,255,.08);
  backdrop-filter: blur(12px);
}

.terminal-bar {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

.terminal-title {
  margin-left: 8px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

.terminal-body {
  position: relative;
  min-height: 390px;
  padding: 18px 18px 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

#terminalTextPremium {
  margin: 0;
  white-space: pre-wrap;
}

.terminal-line { display: block; }
.terminal-line--cmd    { color: #7dd3fc; }
.terminal-line--out    { color: #e5f7ec; }
.terminal-line--dim    { color: rgba(229,247,236,.72); }
.terminal-line--accent { 
  color: #95f9c3; 
  text-shadow: 0 0 12px rgba(149,249,195,.12); 
}

.terminal-cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  margin-left: 2px;
  background: #95f9c3;
  vertical-align: middle;
  box-shadow: 0 0 12px rgba(149,249,195,.35);
  animation: terminalBlink 1s steps(1) infinite;
}

@keyframes terminalBlink {
  50% { opacity: 0; }
}

/* ====================== TERMINAL LAYOUT ====================== */
.terminal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;                 /* ← Aici e spațiul mic între cele două panouri */
  max-width: 1180px;         /* lățimea maximă a întregului layout */
  margin: 40px auto;         /* centrează în pagină */
  padding: 0 20px;           /* distanță față de marginile browserului */
  align-items: stretch;
}

.terminal-left,
.terminal-right {
  margin: 0;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
}

/* ====================== VIDEO / IMAGE PANEL ====================== */
.video-panel {
  border-radius: 20px;       /* uniform cu terminalul */
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(400px 120px at 20% 0%, rgba(124,92,255,.08), transparent 60%),
    rgba(10,14,28,.9);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-panel__header {
  padding: 12px 16px;
  font-size: 13px;
  color: #cfcfff;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', monospace;
}

.video-panel__body {
  flex: 1;
  position: relative;
  background: #000;
}

.video-panel__body iframe,
.video-panel__body video,
.video-player {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.video-panel::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  opacity: 0;
  transition: .3s;
  pointer-events: none;
  z-index: 2;
}

.video-panel:hover::after {
  opacity: 0.65;
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 768px) {
  .terminal-card--premium {
    max-width: 100%;
  }
  
  .terminal-body {
    min-height: 340px;
    font-size: 13px;
    padding: 16px;
  }
}

@media (max-width: 900px) {
  .terminal-layout {
    grid-template-columns: 1fr;
    gap: 20px;                    /* spațiu mai generos pe mobil */
    max-width: 100%;
    padding: 0 15px;
    margin: 30px auto;
  }
  
  .terminal-left,
  .terminal-right {
    height: auto;
    min-height: 420px;
    border-radius: 20px;
  }
}