/* Konsol · design-system: token tabanlı, tek monospace ailesi, yoğun satır/tablo görünümü.
   Gündüz "blueprint" kâğıdı, gece koyu terminal — ikisinde de yalnız mavi tonları (palet kuralı).
   Türkçe küçük harf dönüşümü CSS'te güvenilir değil ("I"→"ı"); bu yüzden metin dönüşümü yok, mono kimlik yeter. */
html[data-tema="tokens"][data-mod="gunduz"] {
  --bg: #e6eef9;
  --bg2: #e6eef9;
  --surface: #f8fbff;
  --text: #0b2545;
  --muted: #3f5573;
  --line: #5b7192;
  --accent: #0b4fb3;
  --accent-text: #ffffff;
  --side: #f8fbff;
  --side-text: #0b2545;
  --side-muted: #3f5573;
  --side-hover: #dbe7f7;
  --danger: #a3201a;
  --danger-bg: #fdeceb;
  --grid: rgba(11, 79, 179, .08);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: none;
}
html[data-tema="tokens"][data-mod="gece"] {
  --bg: #0a0f16;
  --bg2: #0a0f16;
  --surface: #111a26;
  --text: #dbe6f3;
  --muted: #8d9db2;
  --line: #7e90a8;
  --accent: #5aa9ff;
  --accent-text: #06111f;
  --side: #0d1420;
  --side-text: #dbe6f3;
  --side-muted: #8d9db2;
  --side-hover: #182335;
  --danger: #ffb4ab;
  --danger-bg: #351816;
  --grid: rgba(90, 169, 255, .06);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: none;
}
html[data-tema="tokens"] {
  --font-body: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-body);
  --font-mono: var(--font-body);
}
/* Izgara arka plan: blueprint kâğıdı (yalnız dekoratif, metnin arkasında) */
html[data-tema="tokens"] body {
  font-size: 13.5px;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
html[data-tema="tokens"] .menu-group { font-weight: 500; padding-top: 18px; }
html[data-tema="tokens"] .menu-group::before { content: "// "; color: var(--accent); }
html[data-tema="tokens"] .menu-item { padding: 6px 10px; font-size: 13px; }
html[data-tema="tokens"] .menu-item::before { content: "›"; color: var(--accent); }
html[data-tema="tokens"] .ustbar h1,
html[data-tema="tokens"] .topbar h1 { font-size: 22px; font-weight: 700; }
html[data-tema="tokens"] .ustbar h1::before,
html[data-tema="tokens"] .topbar h1::before { content: "~/"; color: var(--accent); }
html[data-tema="tokens"] .count::before { content: "# "; color: var(--accent); }
html[data-tema="tokens"] .lead { font-size: 13px; margin-bottom: 26px; }
html[data-tema="tokens"] .cards { gap: 20px; }
html[data-tema="tokens"] .grup-baslik { margin-bottom: 8px; }
html[data-tema="tokens"] .grup-baslik h2 { font-size: 13px; font-weight: 600; color: var(--muted); }
html[data-tema="tokens"] .grup-baslik h2::before { content: "// "; color: var(--accent); }
html[data-tema="tokens"] .grup-sayi::before { content: "["; }
html[data-tema="tokens"] .grup-sayi::after { content: "]"; }
html[data-tema="tokens"] .grup-liste {
  display: flex; flex-direction: column; gap: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
html[data-tema="tokens"] .card {
  display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) minmax(140px, 280px);
  align-items: center; gap: 14px; padding: 10px 14px; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
html[data-tema="tokens"] .grup-liste > :last-child { border-bottom: 0; }
html[data-tema="tokens"] a.card:hover {
  transform: none; box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
html[data-tema="tokens"] .card-icon { font-size: 15px; }
html[data-tema="tokens"] .card-head h3 { font-size: 14px; font-weight: 700; }
html[data-tema="tokens"] .card-desc { font-size: 13px; }
html[data-tema="tokens"] .card-foot { justify-content: flex-end; }
html[data-tema="tokens"] .login-card { border: 1px solid var(--line); }
html[data-tema="tokens"] .login-card input { font-family: var(--font-body); }

@media (max-width: 860px) {
  html[data-tema="tokens"] .card { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html[data-tema="tokens"] .card-foot { justify-content: flex-start; }
}
@media (max-width: 480px) {
  html[data-tema="tokens"] body { font-size: 13px; background-size: 20px 20px; }
  html[data-tema="tokens"] .card { padding: 10px; }
  html[data-tema="tokens"] .ustbar h1,
  html[data-tema="tokens"] .topbar h1 { font-size: 18px; }
}