/* Pre-Flutter adapter for the shared 108px TurkOpt loading visual. */
html[data-turkopt-theme="dark"] #turkopt-app,
html[data-turkopt-theme="dark"] #turkopt-loading {
  --turkopt-loader-bg: #151a17;
  --turkopt-loader-text: #f1f5f2;
}
html:not([data-turkopt-theme="dark"]) #turkopt-app,
html:not([data-turkopt-theme="dark"]) #turkopt-loading {
  --turkopt-loader-bg: #f8f8f5;
  --turkopt-loader-text: #19221d;
}
#turkopt-app { background: var(--turkopt-loader-bg); }
#turkopt-loading {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  box-sizing: border-box;
  background: var(--turkopt-loader-bg);
  color: var(--turkopt-loader-text);
  text-align: center;
  font: 16px Arial, sans-serif;
}
#turkopt-loading .turkopt-loader-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: turkopt-loader-reveal 1ms linear 180ms forwards;
}
#turkopt-loading .turkopt-loader-mark {
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
}
#turkopt-loading .turkopt-loader-ring {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2.5px solid #149b57;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-45deg);
  animation: turkopt-loader-spin 1.2s linear infinite;
}
#turkopt-loading .turkopt-loader-logo {
  width: 69px;
  height: 69px;
  border-radius: 12px;
  object-fit: cover;
}
#turkopt-loading p { margin: 0; max-width: 36rem; }
#turkopt-loading button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  padding: 8px 24px;
  background: #008e50;
  color: white;
  font: inherit;
  cursor: pointer;
}
#turkopt-loading button[hidden] { display: none; }
#turkopt-loading nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
}
#turkopt-loading nav a { color: inherit; }
#turkopt-loading.turkopt-loader-error .turkopt-loader-face {
  opacity: 1;
  animation: none;
}
#turkopt-loading.turkopt-loader-error .turkopt-loader-ring {
  animation: none;
}
@keyframes turkopt-loader-reveal { to { opacity: 1; } }
@keyframes turkopt-loader-spin {
  from { transform: rotate(-45deg); }
  to { transform: rotate(315deg); }
}
@media (prefers-reduced-motion: reduce) {
  #turkopt-loading .turkopt-loader-ring { animation: none; }
}