/* Kılçık web demosu — yükleme ekranı ve demo uyarı şeridi (yalnızca web paketinde). */

.web-boot {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(9, 34, 55, .72);
}
.web-boot-card {
  width: min(380px, calc(100vw - 32px));
  display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 26px 22px;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.web-boot-card b { font-size: 15px; }
.web-boot-card p { margin: 0; color: var(--text); }
.web-boot-card small { color: var(--muted); }
.web-boot-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--blue-soft); border-top-color: var(--blue);
  animation: web-spin .9s linear infinite;
}
.web-boot-error {
  max-width: 100%; overflow-wrap: anywhere;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--danger-soft); color: var(--danger) !important;
  font-family: var(--mono); font-size: 12px;
}
@keyframes web-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .web-boot-spinner { animation-duration: 3s; } }

.web-notice {
  position: fixed; left: 50%; bottom: 14px; z-index: 900;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  display: flex; gap: 10px; align-items: center;
  padding: 8px 8px 8px 14px;
  background: var(--warning-soft); color: var(--text);
  border: 1px solid #ecd49a; border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.web-notice span { flex: 1; }
.web-notice .icon-btn { flex: none; font-size: 16px; line-height: 1; }