/* design-wizard.css - Design wizard variables and key styles */
:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #1c2333;
  --border: rgba(255,255,255,0.07);
  --accent: #00e5a0;
  --accent2: #00b8ff;
  --text: #e6edf3;
  --text2: #8b949e;
  --font: 'Plus Jakarta Sans', sans-serif;
  --radius: 12px;
}

.screen {
  animation: rise 0.35s cubic-bezier(.22,1,.36,1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden {
  display: none !important;
}

.cat-btn {
  transition: all 0.18s;
}
.cat-btn:hover {
  border-color: rgba(0,229,160,0.4);
  transform: translateY(-2px);
}
.cat-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.sablon-kart {
  transition: all 0.2s;
}
.sablon-kart:hover {
  border-color: rgba(0,229,160,0.3);
  transform: translateY(-3px);
}
.sablon-kart.onerilen {
  border-color: rgba(0,229,160,0.5);
}
.sablon-kart.secili {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* S3 şablon ekranı geniş ve ferah */
.wrap:has(#s3:not(.hidden)) {
  max-width: 920px;
}
.wrap:has(#s3:not(.hidden)) .sablon-grid {
  max-height: none !important;
  min-height: 280px;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 700px) {
  .wrap:has(#s3:not(.hidden)) .sablon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
body {
  overflow-y: auto;
  align-items: flex-start;
  padding: 24px 0;
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.5s ease;
}