/* Qolay Bilişim — Ortak tema (soft, modern, zarif).
 * Tailwind CDN ile birlikte kullanılır; design token'lar burada,
 * bileşen sınıfları minimize edilmiş — gerektikçe sayfa içinde extend.
 */

:root {
  /* Brand — web projesi paletiyle (theme-primary #6366f1 / dark #4f46e5) */
  --qb-indigo-50:  #eef2ff;
  --qb-indigo-100: #e0e7ff;
  --qb-indigo-200: #c7d2fe;
  --qb-indigo-300: #a5b4fc;
  --qb-indigo-500: #6366f1;
  --qb-indigo-600: #4f46e5;
  --qb-indigo-700: #4338ca;

  --qb-amber-400: #fbbf24;
  --qb-amber-500: #f59e0b;
  --qb-amber-600: #d97706;

  --qb-emerald-500: #10b981;
  --qb-rose-500: #f43f5e;

  /* Surfaces — web projesi (slate) */
  --qb-bg:        #f8fafc;
  --qb-surface:   #ffffff;
  --qb-surface-2: #f1f5f9;
  --qb-border:    #e2e8f0;
  --qb-text:      #0f172a;
  --qb-text-muted:#64748b;
  --qb-text-soft: #94a3b8;

  /* Web project shorthand aliases */
  --theme-primary:        #6366f1;
  --theme-primary-dark:   #4f46e5;
  --theme-primary-soft:   #e0e7ff;
  --theme-primary-soft-deep: #c7d2fe;

  /* Elevation */
  --qb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --qb-shadow:    0 4px 16px rgba(15, 23, 42, 0.08);
  --qb-shadow-lg: 0 12px 40px rgba(68, 81, 170, 0.18);

  /* Radii */
  --qb-radius-sm: 8px;
  --qb-radius:    14px;
  --qb-radius-lg: 22px;

  /* Motion */
  --qb-ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-feature-settings: 'cv11','ss01';
  color: var(--qb-text);
  background: var(--qb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft animated background — login & landing sayfalarda */
.qb-aurora {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 40rem at 10% 10%, #c7d0ff 0%, transparent 60%),
    radial-gradient(50rem 30rem at 90% 20%, #ffe2bd 0%, transparent 60%),
    radial-gradient(60rem 40rem at 50% 100%, #d8f4e8 0%, transparent 60%),
    linear-gradient(180deg, #f5f6fb 0%, #eef0fb 100%);
  filter: saturate(110%);
}

/* Glass card */
.qb-glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-lg);
}

/* Input */
.qb-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--qb-border);
  border-radius: var(--qb-radius-sm);
  background: var(--qb-surface);
  color: var(--qb-text);
  font-size: 0.95rem;
  transition: border-color .2s var(--qb-ease), box-shadow .2s var(--qb-ease);
}
.qb-input:focus {
  outline: none;
  border-color: var(--qb-indigo-500);
  box-shadow: 0 0 0 4px rgba(91, 109, 209, 0.14);
}
.qb-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--qb-text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Button */
.qb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: var(--qb-radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .15s var(--qb-ease), box-shadow .2s var(--qb-ease), background .2s var(--qb-ease);
  user-select: none;
}
.qb-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--qb-indigo-500) 0%, var(--qb-indigo-600) 100%);
  box-shadow: 0 6px 16px rgba(68, 81, 170, 0.28);
}
.qb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(68, 81, 170, 0.34); }
.qb-btn-primary:active { transform: translateY(0); }
.qb-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Brand logo mark */
.qb-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--qb-indigo-700);
}
.qb-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--qb-indigo-500), var(--qb-indigo-600));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
  box-shadow: var(--qb-shadow);
}

/* Custom checkbox — login "Beni hatırla" */
.qb-remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
  color: var(--qb-text-muted);
  font-weight: 500;
  padding: 4px 0;
}
.qb-remember input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.qb-remember-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--qb-border);
  background: var(--qb-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s var(--qb-ease);
  flex-shrink: 0;
}
.qb-remember:hover .qb-remember-box {
  border-color: var(--qb-indigo-500);
}
.qb-remember input:checked + .qb-remember-box {
  background: linear-gradient(135deg, var(--qb-indigo-500), var(--qb-indigo-600));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
.qb-remember input:focus-visible + .qb-remember-box {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}
.qb-remember-text {
  letter-spacing: -0.01em;
}

/* Utility */
.qb-muted { color: var(--qb-text-muted); }
.qb-fade-in { animation: qbFadeIn .5s var(--qb-ease) both; }
@keyframes qbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}