/* Giriş öncesi sayfaların ortak güneş/ay anahtarı (bkz. js/preLoginTheme.js). Giriş
   ekranındaki .auth-theme-toggle ile aynı ölçü ve renkler; durum aria-pressed'den okunur,
   böylece hangi sayfada/kapsayıcıda kullanılırsa kullanılsın kendi başına doğru görünür. */
.kc-theme-toggle {
  position: relative;
  flex: 0 0 86px;
  width: 86px;
  height: 44px;
  padding: 0;
  display: grid;
  grid-template-columns: 42px 42px;
  align-items: center;
  border: 1px solid rgba(56, 94, 82, .28);
  border-radius: 24px;
  background: #dce5d9;
  color: #173f36;
  cursor: pointer;
  font: inherit;
  transition: background-color .2s ease, border-color .2s ease;
}
.kc-theme-icon { position: relative; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; pointer-events: none; }
.kc-theme-icon svg { width: 17px; height: 17px; }
.kc-theme-icon--moon { color: #677770; }
.kc-theme-thumb {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 2px 9px rgba(24, 39, 34, .18);
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}
.kc-theme-toggle[aria-pressed="true"] { background: #232a26; color: #8a948d; border-color: #2f3833; }
.kc-theme-toggle[aria-pressed="true"] .kc-theme-icon--moon { color: #121614; }
.kc-theme-toggle[aria-pressed="true"] .kc-theme-thumb { transform: translateX(42px); background: #b89b62; }
.kc-theme-toggle:focus-visible { outline: 3px solid rgba(56, 94, 82, .76); outline-offset: 3px; }
.kc-theme-toggle:active { transform: none; }

/* Dar başlıklar için küçük varyant. */
.kc-theme-toggle--compact { flex-basis: 70px; width: 70px; height: 38px; grid-template-columns: 34px 34px; }
.kc-theme-toggle--compact .kc-theme-icon { width: 34px; height: 36px; }
.kc-theme-toggle--compact .kc-theme-icon svg { width: 15px; height: 15px; }
.kc-theme-toggle--compact .kc-theme-thumb { top: 3px; left: 3px; width: 30px; height: 30px; }
.kc-theme-toggle--compact[aria-pressed="true"] .kc-theme-thumb { transform: translateX(32px); }

@media (prefers-reduced-motion: reduce) {
  .kc-theme-toggle, .kc-theme-thumb { transition: none; }
}