/* ──────────────────────────────────────────────────────────────────────
   Akis System CSS — primitive + layout SSOT.
   Yükleme sırası (index.html):  tokens → reset → app.css (legacy) → system.
   system.css en son yüklenir; aynı selector cascade'inde legacy app.css'i
   ezer. Faz 10'da app.css tasfiye edildiğinde @layer hiyerarşisi geri
   getirilebilir; şimdilik flat author origin yeterli.

   Primitive class'lar:
     .btn, .card, .page-header, .toolbar, .stat, .banner
   (Modal/Toast/Tabs/DataTable/Sheet → Faz 2.2)

   Layout primitives:
     .page-shell, .stack-y, .stack-x, .grid-fill, .grid-2, .spread,
     .truncate, .visually-hidden
   ────────────────────────────────────────────────────────────────────── */

/* ═══════════════ LAYOUT PRIMITIVES ═══════════════ */
.page-shell {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--page-pad-y) var(--page-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.stack-y       { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-y-tight { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-y-loose { display: flex; flex-direction: column; gap: var(--space-5); }

.stack-x       { display: flex; align-items: center; gap: var(--space-3); }
.stack-x-tight { display: flex; align-items: center; gap: var(--space-2); }
.stack-x-loose { display: flex; align-items: center; gap: var(--space-5); }

.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════ BUTTON ═══════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:active:not(.is-disabled):not(:disabled) {
  transform: translateY(1px);
}

.btn.is-disabled, .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn.is-loading { color: transparent; pointer-events: none; }

.btn-spinner {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text);
  animation: btn-spin 600ms linear infinite;
}
.btn-primary .btn-spinner { color: var(--fg-on-accent); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Sizes */
.btn-sm { height: calc(var(--btn-h) - 8px); padding: 0 calc(var(--btn-pad-x) - 4px); font-size: var(--text-xs); }
.btn-lg { height: calc(var(--btn-h) + 8px); padding: 0 calc(var(--btn-pad-x) + 6px); font-size: var(--text-base); }

/* Variants */
.btn-primary {
  background: var(--primary);
  color: var(--fg-on-accent);
  border-color: var(--primary);
}
.btn-primary:hover:not(.is-disabled):not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-secondary {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover:not(.is-disabled):not(:disabled) {
  background: var(--bg-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover:not(.is-disabled):not(:disabled) {
  background: var(--bg-hover);
}

.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.btn-danger:hover:not(.is-disabled):not(:disabled) {
  background: hsl(0 84% 52%);
  border-color: hsl(0 84% 52%);
}

.btn-success {
  background: var(--success);
  color: white;
  border-color: var(--success);
}
.btn-success:hover:not(.is-disabled):not(:disabled) {
  background: hsl(142 71% 38%);
  border-color: hsl(142 71% 38%);
}

/* Icon-only (square) */
.btn-icon-only {
  width: var(--btn-h);
  padding: 0;
}
.btn-icon-only.btn-sm { width: calc(var(--btn-h) - 8px); }
.btn-icon-only.btn-lg { width: calc(var(--btn-h) + 8px); }

.btn-block { width: 100%; }

.btn-icon { display: inline-flex; align-items: center; line-height: 0; }

/* ═══════════════ CARD ═══════════════ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.card.has-accent::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--card-accent, var(--primary));
}

.card-default     { box-shadow: var(--shadow-xs); }
.card-inset       { background: var(--bg); border-color: var(--border); box-shadow: none; }
.card-outlined    { background: transparent; box-shadow: none; }
.card-interactive { cursor: pointer; }
.card-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card.is-clickable { cursor: pointer; }
.card.is-clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.card-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.card-body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
}

.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ═══════════════ PAGE HEADER ═══════════════ */
.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.page-header.is-sticky {
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-sticky);
  background: var(--bg);
  margin-inline: calc(var(--page-pad-x) * -1);
  padding-inline: var(--page-pad-x);
  padding-top: var(--space-3);
}

.page-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.page-crumbs ol {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  flex-wrap: wrap;
}

.page-crumb:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--muted-light);
}

.page-crumb.is-current {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.page-crumb a:hover { color: var(--text); }

/* ═══════════════ TOOLBAR ═══════════════ */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.toolbar.is-bordered { border: 1px solid var(--border-strong); }

.toolbar.is-sticky {
  position: sticky;
  top: calc(var(--topbar-h) + var(--status-bar-h));
  z-index: calc(var(--z-sticky) - 1);
  box-shadow: var(--shadow-sm);
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.toolbar-left { flex: 1; }

@media (max-width: 768px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left, .toolbar-right { width: 100%; }
}

/* ═══════════════ STAT ═══════════════ */
.stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.stat::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--stat-accent, var(--primary));
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.stat-accent  { --stat-accent: var(--primary); }
.stat-success { --stat-accent: var(--success); }
.stat-warning { --stat-accent: var(--warning); }
.stat-danger  { --stat-accent: var(--danger); }
.stat-info    { --stat-accent: var(--info); }
.stat-muted   { --stat-accent: var(--gray-400); }

.stat.is-clickable { cursor: pointer; }
.stat.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.stat.is-clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.stat-icon {
  font-size: var(--text-xl);
  line-height: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg);
  flex-shrink: 0;
}

.stat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: 1.1;
}

.stat-delta {
  font-size: var(--text-xs);
  color: var(--muted);
}
.stat-trend-up   { color: var(--success); }
.stat-trend-down { color: var(--danger); }

/* ═══════════════ BANNER ═══════════════ */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--banner-border, var(--border-strong));
  border-radius: var(--radius-sm);
  background: var(--banner-bg, var(--surface));
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.banner-info     { --banner-bg: var(--info-bg);    --banner-border: var(--info);    --banner-icon-color: var(--info); }
.banner-success  { --banner-bg: var(--success-bg); --banner-border: var(--success); --banner-icon-color: var(--success); }
.banner-warning  { --banner-bg: var(--warning-bg); --banner-border: var(--warning); --banner-icon-color: var(--warning); }
.banner-danger   { --banner-bg: var(--danger-bg);  --banner-border: var(--danger);  --banner-icon-color: var(--danger); }
.banner-neutral  { --banner-bg: var(--surface-elevated); --banner-border: var(--border-strong); --banner-icon-color: var(--muted); }

.banner-icon {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--banner-icon-color);
  color: var(--bg);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  flex-shrink: 0;
  margin-top: 1px;
}

.banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.banner-title { font-weight: var(--weight-semibold); color: var(--text); }
.banner-desc  { color: var(--muted); }

.banner-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.banner-dismiss {
  margin-left: var(--space-2);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--muted);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.banner-dismiss:hover { color: var(--text); background: var(--bg-hover); }

/* ═══════════════ STAT GRID HELPER ═══════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════ MODAL ═══════════════ */
#modalRoot {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  pointer-events: none;
}
#modalRoot.is-open {
  display: block;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  animation: modal-fade-in var(--dur-base) var(--ease-out);
}

@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-dialog {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-height: calc(100vh - var(--space-5) * 2);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-pop var(--dur-base) var(--ease-out);
}

@keyframes modal-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-sm   { max-width: 400px; }
.modal-md   { max-width: 560px; }
.modal-lg   { max-width: 720px; }
.modal-xl   { max-width: 960px; }
.modal-full { max-width: none; max-height: calc(100vh - var(--space-3) * 2); height: 100%; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.modal-close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--muted);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); background: var(--bg-hover); }
.modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

body.has-modal { overflow: hidden; }

@media (max-width: 768px) {
  .modal-backdrop { padding: var(--space-3); align-items: flex-end; }
  .modal-dialog { max-height: 90vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-full { border-radius: 0; max-height: 100vh; }
}

/* ═══════════════ TOAST ═══════════════ */
#toastWrap {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(420px, calc(100vw - var(--space-5) * 2));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--toast-border, var(--border-strong));
  border-left: 3px solid var(--toast-accent, var(--info));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text);
  pointer-events: auto;
  animation: toast-slide-in var(--dur-base) var(--ease-out);
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast.is-leaving {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.toast-info    { --toast-accent: var(--info); }
.toast-success { --toast-accent: var(--success); }
.toast-warning { --toast-accent: var(--warning); }
.toast-danger  { --toast-accent: var(--danger); }

.toast-msg { flex: 1; min-width: 0; }

.toast-action {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.toast-action:hover { background: var(--bg-hover); }

.toast-close {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--muted);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}
.toast-close:hover { color: var(--text); background: var(--bg-hover); }

@media (max-width: 768px) {
  #toastWrap {
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }
}

/* ═══════════════ TABS ═══════════════ */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  position: relative;
}

.tab:hover:not(.is-disabled) { color: var(--text); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.tab.is-disabled { opacity: .5; cursor: not-allowed; }

.tabs-underline {
  border-bottom: 1px solid var(--border-strong);
  gap: var(--space-3);
}

.tabs-underline .tab.is-active {
  color: var(--text);
}
.tabs-underline .tab.is-active::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

.tabs-pill { gap: var(--space-1); }

.tabs-pill .tab {
  border-radius: var(--radius-sm);
}
.tabs-pill .tab.is-active {
  color: var(--text);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-xs);
}

.tabs.is-stretch { width: 100%; }
.tabs.is-stretch .tab { flex: 1; justify-content: center; }

.tab-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted);
}

.tab.is-active .tab-badge { background: var(--primary); color: var(--fg-on-accent); }

@media (max-width: 768px) {
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
}

/* ═══════════════ DATA TABLE ═══════════════ */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dt-thead {
  background: var(--surface-elevated);
}

.data-table.has-sticky-header .dt-thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.dt-th, .dt-td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
}

.dt-th {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
  user-select: none;
}

.dt-th.is-sortable {
  cursor: pointer;
}
.dt-th.is-sortable:hover { color: var(--text); background: var(--bg-hover); }
.dt-th.is-sortable:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dt-th.is-sorted { color: var(--text); }

.dt-th-label,
.dt-th-sort {
  display: inline-block;
  vertical-align: middle;
}
.dt-th-sort { margin-left: var(--space-1); opacity: .6; }
.dt-th.is-sorted .dt-th-sort { opacity: 1; color: var(--primary); }

.dt-align-center { text-align: center; }
.dt-align-right { text-align: right; }

.dt-tbody .dt-tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out);
}
.dt-tbody .dt-tr:last-child { border-bottom: none; }

.dt-tbody .dt-tr.is-clickable { cursor: pointer; }
.dt-tbody .dt-tr.is-clickable:hover { background: var(--bg-hover); }
.dt-tbody .dt-tr.is-clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.dt-td { color: var(--text); }

.data-table-empty {
  padding: var(--space-7) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .dt-hide-mobile { display: none; }

  .data-table,
  .data-table .dt-thead,
  .data-table .dt-tbody,
  .data-table .dt-tr,
  .data-table .dt-th,
  .data-table .dt-td {
    display: block;
  }

  .data-table .dt-thead { display: none; }

  .data-table .dt-tr {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-strong);
  }

  .data-table .dt-td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: 0;
  }

  .data-table .dt-td::before {
    content: attr(data-label);
    font-weight: var(--weight-medium);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--muted);
    flex-shrink: 0;
  }
}

/* ═══════════════ SHEET ═══════════════ */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: stretch;
  animation: modal-fade-in var(--dur-base) var(--ease-out);
}

.sheet {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.sheet-bottom {
  margin-top: auto;
  width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
  animation: sheet-slide-up var(--dur-slow) var(--ease-out);
}

.sheet-right {
  margin-left: auto;
  height: 100%;
  width: min(420px, 90vw);
  border-radius: 0;
  border-right: 0;
  animation: sheet-slide-left var(--dur-slow) var(--ease-out);
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sheet-slide-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sheet-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.sheet-close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--muted);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sheet-close:hover { color: var(--text); background: var(--bg-hover); }

.sheet-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.sheet-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sheet-right {
    width: 100%;
    border-radius: 0;
  }
}

/* ═══════════════ STATUS BAR ═══════════════ */
#status-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-raised);
  display: none;
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--text-sm);
}

#status-bar.is-active { display: block; }

.status-bar-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--page-pad-x);
  min-height: 40px;
}

.status-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  padding: var(--space-2) 0;
}

.status-bar-row.is-danger  { color: var(--danger); }
.status-bar-row.is-warning { color: var(--warning); }
.status-bar-row.is-info    { color: var(--info); }
.status-bar-row.is-success { color: var(--success); }

#status-bar.is-active .status-bar-row.is-danger  ~ .status-bar-icon-bg { background: var(--danger-bg); }
#status-bar.is-active .status-bar-row.is-warning ~ .status-bar-icon-bg { background: var(--warning-bg); }

.status-bar-icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: currentColor;
  color: var(--bg);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.status-bar-row.is-primary .status-bar-icon {
  width: 22px; height: 22px;
}

.status-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--text);
}

.status-bar-title {
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.status-bar-desc {
  color: var(--muted);
}

.status-bar-more {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-bar-more:hover { color: var(--text); background: var(--bg-hover); }

.status-bar-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--page-pad-x) var(--space-2);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.status-bar-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.status-bar-list li:last-child { border-bottom: 0; }

.status-bar-list .status-bar-row {
  padding: 0;
}

@media (max-width: 768px) {
  .status-bar-main {
    flex-wrap: wrap;
    padding: var(--space-2) var(--page-pad-x);
  }
  .status-bar-text { width: 100%; }
}


/* ═══════════════ PAYWALL (modal body) ═══════════════ */
.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
}

.paywall-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--primary-50);
  color: var(--primary);
  font-size: var(--text-2xl);
}

[data-theme="light"] .paywall-icon {
  background: var(--primary-50);
}

.paywall-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.paywall-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  max-width: 36ch;
}

.paywall-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ═══════════════ ONBOARDING WIZARD (Faz 4) ═══════════════ */
.onboarding-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--bg);
}

.onboarding-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.onboarding-step-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.onboarding-dots {
  display: flex;
  gap: var(--space-1);
}

.onboarding-dot {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid var(--border-strong);
}

.onboarding-dot.is-current {
  background: var(--primary);
  color: var(--fg-on-accent);
  border-color: var(--primary);
}

.onboarding-dot.is-done {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.onboarding-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin-bottom: var(--space-2);
}

.onboarding-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.onboarding-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.onboarding-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.onboarding-perms {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.onboarding-perms li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
}

.onboarding-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.onboarding-status.is-success {
  background: var(--success-bg);
  color: var(--success);
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.onboarding-field > span:first-child {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.onboarding-input {
  height: var(--input-h);
  padding: 0 var(--field-pad);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  width: 100%;
}

.onboarding-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary);
}

.onboarding-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: var(--space-2);
}

.onboarding-sector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.onboarding-sector:hover {
  border-color: var(--border-strong);
  background: var(--surface-elevated);
}

.onboarding-sector.is-selected {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary-dark);
}

.onboarding-sector-icon {
  font-size: var(--text-xl);
  line-height: 1;
}

.onboarding-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--text);
}

.onboarding-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.onboarding-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  padding-left: var(--space-5);
}

.onboarding-accents {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.onboarding-accent {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--swatch);
  border: 2px solid var(--border-strong);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}

.onboarding-accent:hover { transform: scale(1.1); }

.onboarding-accent.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch);
}

.onboarding-summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.onboarding-summary li {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-snug);
}

@media (max-width: 768px) {
  .onboarding-shell { padding: var(--space-3); align-items: flex-start; }
  .onboarding-card { padding: var(--space-4); }
}

/* ═══════════════ NAV GROUPS (Faz 5.2) ═══════════════ */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-group {
  position: relative;
}

.nav-group > summary {
  list-style: none;
}
.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--btn-h);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav-group-trigger:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.nav-group-trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.nav-group.has-active > .nav-group-trigger {
  color: var(--text);
  background: var(--bg-hover);
}

.nav-group-caret {
  font-size: 10px;
  transition: transform var(--dur-fast) var(--ease-out);
  opacity: .7;
}

.nav-group[open] > .nav-group-trigger .nav-group-caret {
  transform: rotate(180deg);
}

.nav-group-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100; /* z-local: dropdown within topbar nav-group */
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: nav-menu-pop var(--dur-fast) var(--ease-out);
}

@keyframes nav-menu-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.nav-item:hover {
  background: var(--bg-hover);
}

.nav-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.nav-item.is-active {
  background: var(--primary);
  color: var(--fg-on-accent);
  font-weight: var(--weight-medium);
}

.nav-item.is-admin {
  color: var(--primary);
  font-weight: var(--weight-medium);
}

.nav-item.is-active.is-admin {
  color: var(--fg-on-accent);
}

@media (max-width: 768px) {
  .nav-group-menu {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    top: calc(var(--topbar-h) + var(--status-bar-h) + 4px);
    min-width: 0;
  }
}

/* ═══════════════ ADMIN LEGACY OVERRIDE (Faz 7 / 3) ═══════════════
   ~25 admin view kendi .st-* class'larını kullanıyor. Tek-tek
   PageHeader migrate yerine bu class'ları primitive token'larla
   re-skin et — anında design system'e hizalanır. Faz 10/2'de
   eski app.css class'ları tasfiye edilince bu override kalkar. */
.st-container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--page-pad-y) var(--page-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: transparent;
}

.st-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  font-family: var(--font-sans);
  margin: 0;
  line-height: var(--leading-tight);
}

.st-section {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.st-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.st-section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.st-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.st-tabbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-tabbar::-webkit-scrollbar { display: none; }

.st-tab {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}

.st-tab:hover { color: var(--text); }

.st-tab.is-active {
  color: var(--text);
}

.st-tab.is-active::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

.st-form-sep {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.st-danger-zone {
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.st-danger-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--danger);
}

.st-danger-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

/* Admin minimal tables (.am-table, .as-table) — primitive DataTable
   pattern'ına yaklaştır. Faz 10/2'de migrate sonrası bu silinecek. */
.am-table,
.as-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.am-table thead,
.as-table thead {
  background: var(--surface-elevated);
}

.am-table th,
.as-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
}

.am-table td,
.as-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.am-table tbody tr:last-child td,
.as-table tbody tr:last-child td {
  border-bottom: 0;
}

.am-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--muted);
  font-style: italic;
}

.as-input {
  height: var(--input-h);
  padding: 0 var(--field-pad);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  width: 100%;
}

.as-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary);
}

.as-input-sm {
  max-width: 110px;
}

/* ═══════════════ HISTORY VIEW — primitive chips (Faz 7 / 5) ═══════════════
   src/views/history.js .hist-filter / .hist-chip CSS (Faz 6'da rename
   sonrası tanımı eksikti — bu bölüm boşluğu kapatır). */
.hist-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.hist-filter > span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.hist-filter input[type="date"],
.hist-filter input[type="search"] {
  height: var(--input-h);
  padding: 0 var(--field-pad);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.hist-filter input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--primary);
}

.hist-filter-search { flex: 1; min-width: 200px; }
.hist-filter-search input { width: 100%; }

.hist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hist-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2) 4px var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--text);
}

.hist-chip-role {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

.hist-chip-x {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1;
}

.hist-chip-x:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ═══════════════ CONTACTS VIEW — primitive chips (Faz 7 / 2 fix) ═══════════════
   src/views/contacts.js .cl-pills / .cl-pill — yeni Toolbar primitive
   içinde mevcut .cl-* class'ları layout-only olarak korundu; primitive
   token re-skin: */
.cl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--btn-h);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.cl-pill:hover {
  color: var(--text);
  background: var(--surface-elevated);
}

.cl-pill.is-on {
  color: var(--fg-on-accent);
  background: var(--primary);
  border-color: var(--primary);
}

.cl-search {
  flex: 1;
  min-width: 220px;
}

/* ═══════════════ MODAL LEGACY OVERRIDE (Faz 7 / 4) ═══════════════
   src/modals/*.js (~35 modal) hâlâ .modal-overlay/.modal-panel
   class'larını kullanıyor; Settings tema override sistemi (var(--surface)
   var(--text) var(--primary)) bu modallarda yaşıyor → tek-tek migrate
   yerine NEUTRAL token'ları primitive tokens'a map et. Brand renkleri
   (--primary) korunur. */
.modal-overlay {
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
}

.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-sans);
}

.modal-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.modal-body-text {
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.modal-field { margin-bottom: var(--space-3); }

.modal-hint-sm {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}
.modal-hint-sm.danger { color: var(--danger); }

.modal-field-danger {
  background: var(--danger-bg);
  color: var(--danger);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.modal-field-info {
  background: var(--surface-elevated);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.modal-field-info-label {
  font-size: var(--text-xs);
  color: var(--muted);
}

.modal-title-danger { color: var(--danger); }

/* Universal close button (Faz 8) — primitive Modal close ile hizalı. */
.modal-overlay .modal-close {
  color: var(--muted);
  border-radius: var(--radius-sm);
}
.modal-overlay .modal-close:hover,
.modal-overlay .modal-close:focus-visible {
  background: var(--bg-hover);
  color: var(--text);
}

/* ═══════════════ DASHBOARD LEGACY OVERRIDE (Faz 7 / 4) ═══════════════
   .bd-* class'ları primitive token'larla re-skin. Layout (max-width,
   gap, grid) korunur — sadece renk + radius + shadow re-bind. */
.bd-container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--page-pad-y) var(--page-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.bd-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}

.bd-quick-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.bd-quick-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.bd-quick-label { color: var(--text); font-weight: var(--weight-medium); }

.bd-quick-badge {
  background: var(--primary);
  color: var(--fg-on-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.bd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-3);
}

.bd-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  line-height: 1.1;
}

.bd-stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  font-weight: var(--weight-medium);
}

/* ═══════════════ PAYWALL / SUBSCRIBE-REQUIRED (Faz 7 / 6) ═══════════════
   src/views/subscribe-required.js .upgrade-* class'larının CSS'i hiç
   tanımlı değildi (kullanıcı: "ekran karmaşık, mavi buton akishq.com'e
   gidiyor"). Primitive token'larla centered card + butonlar full-width. */
.upgrade-wrap {
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--page-pad-x);
  background: var(--bg);
}

.upgrade-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.upgrade-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.upgrade-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.upgrade-lead {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  max-width: 38ch;
  margin: 0;
}

.upgrade-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}

.upgrade-actions .btn { width: 100%; }
.upgrade-actions .btn-sm { width: auto; }

.upgrade-card .ws-card {
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.upgrade-card .ws-create-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.upgrade-card .ws-create-form input { flex: 1; }

@media (max-width: 768px) {
  .upgrade-wrap { padding: var(--space-4) var(--space-3); align-items: flex-start; }
  .upgrade-card { padding: var(--space-4); }
}

/* ═══════════════ MODULE STORE (ADR-0052 Faz 5) ═══════════════ */
.store-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.store-head { margin-bottom: var(--space-5); }
.store-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-1);
}
.store-lead { color: var(--muted); margin: 0; }
.store-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--text-sm);
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.store-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.store-card.is-owned { opacity: 0.85; }
.store-card-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.store-card-body { flex: 1 1 auto; min-width: 0; }
.store-card-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0 0 2px;
}
.store-card-desc { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.store-card-action { flex: 0 0 auto; }
.store-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.store-badge--owned { background: var(--success-soft, var(--surface)); color: var(--success, var(--text)); border: 1px solid var(--border); }
@media (max-width: 640px) {
  .store-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ MOBILE TOUCH TARGETS (Faz 9 / WCAG 2.5.5) ═══════════════ */
@media (max-width: 768px) {
  /* Calendar event chips — eski .cal-event mobile'da 28px high. WCAG
     2.5.5: pointer target ≥44×44px. Touch surface'i pseudo-element
     ile genişlet (görsel boyut korunur, gesture target genişler). */
  .cal-event {
    position: relative;
    min-height: 32px;
  }
  .cal-event::after {
    content: '';
    position: absolute;
    inset: -6px 0;
    pointer-events: auto;
  }
}