/* ============================================================
   Kidlio Panel — tasarım token'ları
   Renkler KidlioApp/src/constants/colors.ts'ten (krem zemin, lacivert yazı,
   mavi accent, turuncu vurgu). Mor YOK. Font: Quicksand (başlık) + Nunito (metin).
   ============================================================ */
@font-face { font-family: 'Quicksand'; font-weight: 600; font-display: swap; src: url('../Fonts/Quicksand_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Quicksand'; font-weight: 700; font-display: swap; src: url('../Fonts/Quicksand_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('../Fonts/Nunito_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('../Fonts/Nunito_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../Fonts/Nunito_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../Fonts/Nunito_800ExtraBold.ttf') format('truetype'); }

:root {
  --k-font-display: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --k-font-body: 'Nunito', system-ui, sans-serif;

  --k-bg: #F4F1EA;
  --k-surface: #FFFFFF;
  --k-surface-warm: #F8F5EF;
  --k-ink: #243769;
  --k-ink-2: #5A6585;
  --k-ink-quiet: #68728F;
  --k-line: rgba(36, 55, 105, 0.12);
  --k-line-strong: rgba(36, 55, 105, 0.22);
  --k-primary: #2E8BF7;
  --k-primary-strong: #1A6FF5;
  --k-primary-soft: #EAF4FF;
  --k-accent: #F97316;
  --k-accent-soft: #FFEEDF;
  --k-gold: #E9A21B;
  --k-gold-soft: #FFF4D9;
  --k-green: #23955E;
  --k-green-soft: #E3F6EC;
  --k-danger: #C9322F;
  --k-danger-soft: #FDECEB;
  --k-shadow: 0 1px 2px rgba(36, 55, 105, 0.06), 0 8px 24px -12px rgba(36, 55, 105, 0.18);
  --k-focus: 0 0 0 3px rgba(46, 139, 247, 0.35);

  /* Gece gökyüzü — marka panelleri iki temada da koyu kalır. */
  --k-night-1: #050E20;
  --k-night-2: #0B1D36;
  --k-night-ink: #F5F8FF;
  --k-night-ink-2: #C3D0E4;
  --k-night-star: #FFE7A8;

  --k-r-sm: 10px;
  --k-r-md: 14px;
  --k-r-lg: 22px;
  --k-r-pill: 999px;

  --k-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

[data-theme="dark"] {
  --k-bg: #071426;
  --k-surface: #0B1D36;
  --k-surface-warm: #0E2544;
  --k-ink: #F5F8FF;
  --k-ink-2: #C3D0E4;
  --k-ink-quiet: #93A7C6;
  --k-line: rgba(195, 208, 228, 0.12);
  --k-line-strong: rgba(195, 208, 228, 0.24);
  --k-primary: #59A9FF;
  --k-primary-strong: #376BFF;
  --k-primary-soft: #12305A;
  --k-accent: #FB923C;
  --k-accent-soft: rgba(251, 146, 60, 0.14);
  --k-gold: #F5C04A;
  --k-gold-soft: rgba(245, 192, 74, 0.14);
  --k-green: #4FD08F;
  --k-green-soft: rgba(79, 208, 143, 0.14);
  --k-danger: #FF8A84;
  --k-danger-soft: rgba(255, 138, 132, 0.12);
  --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --k-focus: 0 0 0 3px rgba(89, 169, 255, 0.4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--k-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--k-ink);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s var(--k-ease), color .25s var(--k-ease);
}
h1, h2, h3 { font-family: var(--k-font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--k-focus); }

.k-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.k-skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--k-r-sm);
  background: var(--k-primary-strong); color: #fff; font-weight: 700; text-decoration: none;
}
.k-skip-link:focus { top: 16px; }

/* Wordmark — logo PNG'si eski (mor ayı) olduğu için yazı olarak çizilir. */
.k-wordmark {
  font-family: var(--k-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--k-ink);
  line-height: 1;
}
.k-wordmark__dot { color: var(--k-accent); }
.k-wordmark--inverse { color: var(--k-night-ink); }

.k-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--k-line); border-radius: var(--k-r-pill);
  background: var(--k-surface); color: var(--k-ink-2);
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s var(--k-ease);
}
.k-icon-btn:hover { color: var(--k-primary); border-color: var(--k-line-strong); }
.k-icon-btn:active { transform: scale(.94); }
.k-icon-btn > span { display: grid; place-items: center; }
.k-icon-btn__moon { display: none !important; }
[data-theme="dark"] .k-icon-btn__sun { display: none !important; }
[data-theme="dark"] .k-icon-btn__moon { display: grid !important; }

.k-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--k-primary-soft); color: var(--k-primary-strong);
  font-family: var(--k-font-display); font-weight: 700; font-size: 13px;
}
[data-theme="dark"] .k-avatar { color: var(--k-primary); }
.k-avatar--me { background: var(--k-accent-soft); color: var(--k-accent); }

.k-chip {
  display: inline-flex; align-items: center; flex: none;
  padding: 3px 10px; border-radius: var(--k-r-pill);
  background: var(--k-surface-warm); border: 1px solid var(--k-line);
  color: var(--k-ink-quiet); font-size: 12px; font-weight: 700;
}
.k-chip--soft { background: var(--k-primary-soft); border-color: transparent; color: var(--k-primary-strong); }
[data-theme="dark"] .k-chip--soft { color: var(--k-primary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Buton — panel genelinde (giriş butonu kendi .auth-btn'ini kullanır). */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--k-r-md);
  background: linear-gradient(180deg, var(--k-primary), var(--k-primary-strong));
  color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 20px -12px rgba(26, 111, 245, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: filter .2s, transform .15s var(--k-ease);
}
.k-btn:hover { filter: brightness(1.05); }
.k-btn:active { transform: translateY(1px); }
.k-btn[disabled], .k-btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; filter: none; }
.k-btn--ghost {
  background: var(--k-surface); color: var(--k-ink);
  border: 1px solid var(--k-line-strong); box-shadow: none;
}
.k-btn--ghost:hover { border-color: var(--k-primary); color: var(--k-primary-strong); }
.k-chip--ok { background: var(--k-green-soft); border-color: transparent; color: var(--k-green); }
.k-chip--bad { background: var(--k-danger-soft); border-color: transparent; color: var(--k-danger); }
.k-chip--warm { background: var(--k-accent-soft); border-color: transparent; color: var(--k-accent); }