/**
 * Studio, AI shell, landing — light layout bileşenleri
 */
.st-home-root,
.studio-root,
body.ai-app-body {
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(234, 88, 12, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% -5%, rgba(22, 101, 52, 0.06), transparent 45%),
    var(--st-bg) !important;
  color: var(--st-text);
}

.st-site-header,
.studio-header,
.ai-app-topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--st-border) !important;
  backdrop-filter: blur(12px);
}

.st-site-nav a:hover,
.studio-header-nav a:hover {
  color: var(--st-accent) !important;
  background: rgba(234, 88, 12, 0.08) !important;
}

.st-site-burger,
.ai-app-rail-toggle,
.ai-app-topbar-actions a {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

.ai-app-topbar-actions a.is-primary {
  background: var(--st-accent) !important;
  border-color: var(--st-accent) !important;
  color: #fff !important;
}

.st-site-drawer,
.customer-site-drawer {
  background: #fff !important;
  border-left: 1px solid var(--st-border) !important;
}

.st-site-drawer-nav a:hover,
.customer-site-drawer a:hover {
  background: rgba(234, 88, 12, 0.08) !important;
}

.st-site-footer,
.customer-site-footer {
  background: var(--st-surface) !important;
  border-top: 1px solid var(--st-border) !important;
}

.studio-btn--primary {
  background: linear-gradient(135deg, var(--st-accent) 0%, var(--st-accent-2) 100%) !important;
  border-color: var(--st-accent) !important;
  color: #fff !important;
}

.studio-btn--ghost {
  background: #fff !important;
  color: var(--st-text) !important;
  border-color: var(--st-border) !important;
}

.studio-btn--ghost:hover {
  background: var(--st-surface) !important;
  border-color: rgba(194, 65, 12, 0.35) !important;
}

.st-home-hero h1 {
  background: linear-gradient(135deg, var(--brand-orange-800) 0%, var(--st-accent-2) 55%, var(--brand-green-700) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.st-home-prompt-card {
  background: #fff !important;
  border-color: var(--st-border) !important;
  box-shadow: var(--st-shadow) !important;
}

.st-home-chip {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
  color: var(--st-muted) !important;
}

.st-home-chip:hover {
  border-color: var(--st-accent) !important;
  color: var(--st-accent) !important;
  background: rgba(234, 88, 12, 0.06) !important;
}

.st-stats {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
}

.st-step, .st-feature, .st-faq-item {
  background: #fff !important;
  border-color: var(--st-border) !important;
}

.st-step-num, .st-feature-icon, .st-landing-kicker {
  background: rgba(234, 88, 12, 0.1) !important;
  border-color: rgba(234, 88, 12, 0.22) !important;
  color: var(--st-accent) !important;
}

.st-pricing-teaser {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.08) 0%, rgba(22, 101, 52, 0.06) 50%, #fff 100%) !important;
  border-color: rgba(194, 65, 12, 0.18) !important;
}

.st-cta-final {
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(22, 101, 52, 0.08), transparent 70%) !important;
}

.studio-workspace {
  background: #fff;
}

.studio-chat-col {
  background: #fff;
  border-color: var(--st-border) !important;
}

.studio-chat-head {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
}

.studio-msg.user {
  background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2)) !important;
  color: #fff !important;
}

.studio-msg.assistant {
  background: var(--st-surface) !important;
  color: var(--st-text) !important;
  border: 1px solid var(--st-border);
}

.studio-preview-col,
.ai-app-preview-col,
.ai-app-rail {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
}

.studio-build-bar,
.studio-login-overlay {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
}

.studio-status-pill.ready {
  background: var(--st-success-bg) !important;
  color: var(--st-success) !important;
}

.ai-app-rail-link.is-active {
  background: rgba(234, 88, 12, 0.1) !important;
  color: var(--st-accent) !important;
  border-color: rgba(194, 65, 12, 0.22) !important;
}

.ai-app-rail-link:hover {
  background: rgba(234, 88, 12, 0.06) !important;
  color: var(--st-accent) !important;
}

.ai-app-brand-dot,
.st-site-brand-dot,
.studio-brand-dot,
.customer-site-brand-dot {
  background: var(--st-accent) !important;
  box-shadow: 0 0 10px var(--st-accent-glow) !important;
}

.studio-toast.success,
.ai-toast.success {
  background: var(--st-success-bg) !important;
  border: 1px solid rgba(22, 101, 52, 0.28) !important;
  color: var(--st-success) !important;
}

.studio-toast.error,
.ai-toast.error {
  background: rgba(185, 28, 28, 0.08) !important;
  border: 1px solid rgba(185, 28, 28, 0.22) !important;
  color: var(--st-error) !important;
}

.ai-settings-theme .card {
  background: #fff !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

.ai-settings-theme .form-control,
.ai-settings-theme .form-select,
.ai-settings-theme textarea,
.ai-settings-theme input {
  background: #fff !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

.ai-settings-theme .btn-primary {
  background: var(--st-accent) !important;
  border-color: var(--st-accent) !important;
  color: #fff !important;
}

.ai-settings-theme .btn-outline {
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

.ai-settings-theme .btn-outline:hover {
  border-color: var(--brand-green-700) !important;
  color: var(--brand-green-800) !important;
  background: var(--st-success-bg) !important;
}

/* ---------- Global responsive utilities ---------- */
:root {
  --st-toast-z: 500;
  --st-fab-z: 120;
}

html {
  overflow-x: clip;
}

.st-hide-mobile { display: none !important; }
@media (min-width: 640px) {
  .st-hide-mobile { display: inline-flex !important; }
}

.st-site-header-actions,
.studio-header-actions,
.customer-site-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.st-home-chip,
.studio-header-nav a,
.ai-app-topbar-actions a,
.customer-site-nav a,
.customer-site-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.studio-chat-form button,
.studio-mobile-preview-toggle {
  min-width: 44px;
  min-height: 44px;
}

.studio-toast,
.ai-toast {
  z-index: var(--st-toast-z) !important;
}

.studio-mobile-preview-toggle {
  z-index: var(--st-fab-z) !important;
}

.studio-build-bar {
  z-index: 10;
}

/* Müşteri paneli studio workspace — mobil scroll */
@media (max-width: 960px) {
  #customer-body.customer-body--studio-workspace .main-content--studio {
    overflow: visible !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #customer-body.customer-body--studio-workspace .studio-workspace {
    height: auto !important;
    min-height: 0 !important;
  }
  #customer-body.customer-body--studio-workspace .layout-with-sidebar {
    min-height: auto !important;
  }
}

body.customer-chrome-drawer-open,
html.st-no-scroll,
html.studio-no-scroll {
  overflow: hidden !important;
}

@media (max-width: 900px) {
  .customer-site-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px) {
  .customer-site-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #customer-body .layout-menu-fab {
    top: calc(52px + 8px);
  }
  body.sidebar-open #customer-body .layout-menu-fab {
    display: none;
  }
}