/* Yönetim çalışma alanı: yalnızca yönetim modülüne ait görsel katman. */
#management { --mg-accent: var(--brand); }
#management .mg-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 30px; margin: 20px 0; background: var(--nav-surface); color: var(--nav-ink); border-radius: 22px; }
#management .mg-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; }
#management .mg-hero h3 { margin: 12px 0 16px; font-size: clamp(25px, 2.4vw, 36px); font-weight: 600; line-height: 1.22; letter-spacing: -.035em; }
#management .mg-hero p { color: var(--nav-muted); margin: 0; font-size: 12px; }
#management .mg-live { align-self: center; padding: 20px; border: 1px solid var(--nav-line); border-radius: 16px; background: var(--nav-hover); }
#management .mg-live-label { color: var(--nav-muted); font-size: 11px; }
#managementLiveMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
#management .mg-live-item { min-width: 0; display: grid; gap: 8px; }
#management .mg-live-item > span, #management .mg-live-item small { font-size: 11px; color: var(--nav-muted); overflow-wrap: anywhere; }
#management .mg-live-item strong { font-size: 25px; font-weight: 600; }
#management .module-toolbar { background: var(--surface); border-color: var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
#management .mg-favorites { padding: 12px 18px; margin-block: 14px; box-shadow: none; }
#management .mg-favorites > summary { cursor: pointer; font-size: 12px; font-weight: 600; }
#management .mg-favorites > summary span { float: right; color: var(--muted); }
#management .mg-favorites[open] .ops-list { margin-top: 16px; }
#management .management-subnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; background: var(--control-surface); border: 1px solid var(--line); border-radius: 14px; margin: 20px 0; overflow: visible; }
#management .management-subnav .segment { flex: 1 1 auto; min-height: 42px; padding: 10px 14px; border-radius: 9px; font-size: 12px; border: 0; }
#management .management-subnav .segment.active { color: var(--nav-ink); background: var(--nav-surface); box-shadow: var(--shadow); }
#management .mg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
#management .mg-kpi { min-width: 0; padding: 22px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#management .mg-kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); }
#management .mg-kpi > strong { font-size: clamp(23px, 2.1vw, 33px); font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#management .mg-kpi > small { margin-top: auto; font-size: 11px; color: var(--muted); line-height: 1.5; }
#management .mg-kpi-primary { border-top: 3px solid var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
#management .mg-overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#management .mg-card { min-width: 0; padding: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); }
#management .mg-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
#management .mg-card .mg-eyebrow { color: var(--muted); }
#management .mg-card h3 { font-size: 19px; margin: 7px 0 0; font-weight: 600; letter-spacing: -.025em; }
#management .mg-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: var(--brand); }
#management .mg-legend span + span { color: var(--muted); }
#management .mg-subtitle { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 12px 0; }
#management .mg-trend { display: block; width: 100%; height: auto; margin: 10px 0; overflow: visible; }
#management .mg-current-line { stroke: var(--brand); stroke-width: 3; fill: none; stroke-linejoin: round; }
#management .mg-previous-line { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
#management .mg-point { fill: var(--brand); stroke: var(--surface); stroke-width: 1; }
#management .mg-previous-point { fill: var(--muted); }
#management .mg-gridline { stroke: var(--line); fill: none; }
#management .mg-chart-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
#management .mg-data-details { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
#management .mg-data-details > summary { cursor: pointer; font-size: 12px; font-weight: 600; padding-block: 5px; }
#management .mg-table-scroll { overflow: auto; max-height: 460px; margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; }
#management .mg-table { border-collapse: collapse; width: 100%; font-size: 12px; text-align: left; }
#management .mg-table caption { padding: 12px; text-align: left; color: var(--muted); font-size: 11px; }
#management .mg-table th, #management .mg-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 100px; overflow-wrap: anywhere; }
#management .mg-table th { font-weight: 600; }
#management .mg-table thead { background: var(--control-surface); }
#management .mg-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg) 50%, var(--surface)); }
#management .mg-counter { padding: 7px 10px; background: var(--control-surface); border-radius: 8px; color: var(--muted); font-size: 11px; }
#management .mg-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
#management .mg-bars li > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; margin-bottom: 9px; overflow-wrap: anywhere; }
#management .mg-bars small { color: var(--muted); }
#management .mg-bars progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 6px; appearance: none; accent-color: var(--brand); }
#management .mg-bars progress::-webkit-progress-bar { background: var(--line); border-radius: 6px; }
#management .mg-bars progress::-webkit-progress-value { background: var(--brand); border-radius: 6px; }
#management .mg-bars progress::-moz-progress-bar { background: var(--brand); border-radius: 6px; }
#management .mg-wide { grid-column: 1 / -1; }
#management .mg-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 8px; height: 140px; margin: 28px 0 34px; }
#management .mg-hours > div { position: relative; display: flex; align-items: end; height: 100%; border-bottom: 1px solid var(--line); }
#management .mg-hours span { display: block; width: 100%; background: var(--brand); border-radius: 5px 5px 0 0; }
#management .mg-hours small { position: absolute; top: 100%; left: 0; right: 0; text-align: center; padding-top: 10px; font-size: 10px; color: var(--muted); }
#management .mg-empty { padding: 38px 20px; min-height: 150px; display: grid; align-content: center; text-align: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; }
#management .mg-empty small { margin-top: 10px; line-height: 1.7; }
#management .mg-method { color: var(--muted); font-size: 12px; line-height: 1.8; padding: 20px 0; }
#management .mg-method summary { cursor: pointer; }
#management .mg-detail-scope { padding: 14px 18px; color: var(--muted); background: var(--control-surface); border-radius: 12px; font-size: 12px; line-height: 1.7; }
#management .management-grid { margin-top: 0; }
#management .management-grid > .panel { border-radius: 18px; }
#management .management-grid .ops-row { padding: 18px; border-radius: 10px; background: var(--surface); }
#management .management-grid .ops-row:nth-child(even) { background: color-mix(in srgb, var(--bg) 65%, var(--surface)); }
#management .management-grid .ops-row small { line-height: 1.7; margin-top: 6px; }
#management .insight-actions button { padding: 10px 14px; }
@media (max-width: 1100px) {
  #management .mg-hero { grid-template-columns: 1fr; gap: 20px; }
  #management .mg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #management .mg-hero { padding: 22px; }
  #management .mg-overview-grid { grid-template-columns: minmax(0, 1fr); }
  #management .mg-card { padding: 18px; }
  #management .mg-kpi { padding: 16px; gap: 12px; }
  #managementLiveMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #management .mg-live { padding: 16px; }
  #management .mg-hours { gap: 3px; }
  #management .mg-hours small { font-size: 8px; }
  #management .mg-hours > div:nth-child(even) small { visibility: hidden; }
  #management .management-subnav .segment { flex-basis: 28%; padding: 9px; font-size: 11px; }
}
@media print {
  #management .mg-table-scroll { max-height: none; overflow: visible; }
  #management .mg-hero { background: white; color: black; border: 1px solid black; }
}

/* İşletme karar desteği: tema uyumlu, dar ekranda tek sütun. */
.manager-insights { margin-block: 20px; }
.insight-context { color: var(--muted); font-size: 13px; }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.insight-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 14px; padding: 18px; }
.insight-card summary { cursor: pointer; color: var(--ink); }
.insight-card summary span { font-size: 12px; color: var(--muted); }
.insight-card summary strong { display: block; margin-top: 8px; font-size: 20px; line-height: 1.35; }
.insight-card p, .insight-caution { font-size: 12px; line-height: 1.65; color: var(--muted); }
.insight-caution { padding: 10px 12px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
.insight-list { list-style: none; padding: 0; margin: 16px 0; max-height: 420px; overflow: auto; }
.insight-list li { padding: 14px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.insight-list li > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.insight-list li span { font-size: 12px; font-weight: 600; }
.insight-list small { display: block; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.insight-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 1100px) { .insight-grid { grid-template-columns: 1fr; } }
@media print { .insight-list { max-height: none; overflow: visible; } .insight-actions { display: none; } }

/* Web çalışma alanı. Renkler mevcut tema ve erişilebilirlik tercihlerini izler. */
@media screen {
  :root {
    --bg: #f5f5f0;
    --ink: #203630;
    --muted: #61726a;
    --line: #e2e8e4;
    --shadow: 0 2px 8px rgb(25 55 40 / 4%);
    --shadow-soft: 0 4px 18px rgb(25 55 40 / 5%);
  }
  body {
    --nav-surface: color-mix(in srgb, var(--brand) 22%, #132d29);
    --nav-hover: color-mix(in srgb, var(--nav-surface) 84%, #ffffff);
    --nav-ink: #f4faf7;
    --nav-muted: #c1d6cd;
    --nav-line: rgb(224 244 233 / 22%);
    --nav-active: #dcebc7;
    --nav-active-ink: #173e32;
    --control-surface: color-mix(in srgb, var(--brand) 7%, var(--surface));
    --control-line: color-mix(in srgb, var(--brand) 24%, var(--line));
    background: var(--bg);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
  }
  body[data-theme="contrast"] {
    --nav-surface: #000000;
    --nav-hover: #292929;
    --nav-ink: #ffffff;
    --nav-muted: #ffffff;
    --nav-line: #ffffff;
    --nav-active: #ffffff;
    --nav-active-ink: #000000;
    --control-line: var(--line);
  }
  button, summary { -webkit-tap-highlight-color: transparent; }
  summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
  button, input, select { font-size: .875rem; }
  input, select, textarea { min-height: 42px; }
  input[type="checkbox"], input[type="radio"] { min-height: auto; }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
  .eyebrow { font-weight: 650; font-size: 10px; letter-spacing: .1em; }

  /* Giriş: marka hikâyesi ve dikkat dağıtmayan form. */
  .login-screen { grid-template-columns: 1.15fr 1fr; gap: 6vw; padding: 24px; background: var(--surface); }
  .login-story { align-self: stretch; min-height: calc(100vh - 48px); padding: clamp(32px, 4.5vw, 72px); border-radius: 24px; background: #153f34; color: #f8faf6; display: flex; flex-direction: column; justify-content: space-between; gap: 38px; overflow: hidden; }
  .login-story-brand { display: flex; gap: 12px; align-items: center; }
  .login-story-brand .brand-mark { background: #e1ebc9; color: #153f34; width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
  .login-story-brand strong { font-size: 22px; letter-spacing: -.5px; }
  .login-story-brand strong span { display: block; color: #b3cbbf; font-size: 9px; font-weight: 500; letter-spacing: .16em; margin-top: 2px; }
  .login-story-copy .eyebrow { color: #c8dbb0; margin-bottom: 20px; }
  .login-story-copy h2 { margin: 0 0 24px; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.13; letter-spacing: -.045em; font-weight: 500; }
  .login-story-copy h2 em { font-style: normal; color: #d6e5b8; }
  .login-story-copy > p:last-child { font-size: 15px; line-height: 1.9; color: #c4d5cc; margin: 0; }
  .service-illustration { padding: 22px 24px; border: 1px solid #507064; border-radius: 16px; background: #204b3f; }
  .service-illustration-heading { display: flex; justify-content: space-between; gap: 10px; color: #bdcec5; font-size: 10px; letter-spacing: .1em; }
  .service-steps { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; gap: 10px; }
  .service-steps span { display: grid; gap: 10px; font-size: 13px; }
  .service-steps b { color: #e0eabc; font-size: 25px; font-weight: 400; }
  .service-steps i { font-style: normal; color: #91ad9d; }
  .login-story-footer { font-size: 11px; letter-spacing: .03em; color: #bfd1c6; margin: 0; }
  .login-panel { justify-self: start; width: min(400px, 100%); border: 0; box-shadow: none; padding: 24px 12px; border-radius: 0; gap: 22px; }
  .login-panel h1 { font-size: 36px; font-weight: 600; letter-spacing: -.045em; margin: 12px 0; }
  .login-panel > div > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.7; }
  .login-panel label { color: var(--ink); font-size: 13px; gap: 9px; }
  .login-panel input { min-height: 50px; background: var(--bg); padding: 12px 14px; }
  .login-panel .primary-button { min-height: 50px; margin-top: 4px; }
  .login-panel .login-footnote { color: var(--muted); font-size: 11px; padding-top: 22px; border-top: 1px solid var(--line); }

  /* Menülerde tek vurgu: aktif modül. Tema değiştiğinde renkler uyum sağlar. */
  body .sidebar, body[data-theme] .sidebar { background: var(--nav-surface); color: var(--nav-ink); border-right: 1px solid var(--nav-line); box-shadow: none; padding: 26px 18px; gap: 28px; scrollbar-color: var(--nav-muted) var(--nav-surface); }
  .sidebar .brand { background: transparent; border: 0; padding: 0 8px; box-shadow: none; }
  .sidebar .brand strong { color: var(--nav-ink); font-size: 22px; letter-spacing: -.7px; }
  .sidebar .brand div > span { color: var(--nav-muted); font-size: 11px; }
  .sidebar .brand-mark { background: var(--nav-active); color: var(--nav-active-ink); box-shadow: none; border-radius: 13px; }
  .sidebar .nav-tabs { gap: 18px; }
  .sidebar .nav-group-title, .sidebar .nav-group.expanded .nav-group-title { background: transparent; color: var(--nav-muted); font-weight: 650; font-size: 10px; letter-spacing: .08em; }
  .sidebar .nav-group-title:hover { background: var(--nav-hover); color: var(--nav-ink); }
  .sidebar .nav-group-title::after { color: var(--nav-muted); }
  .sidebar .nav-subtabs { padding: 2px 0; background: transparent; border: 0; gap: 4px; }
  .sidebar .nav-tab { color: var(--nav-ink); min-height: 44px; font-weight: 500; grid-template-columns: 28px 1fr; padding: 0 12px; }
  .sidebar .nav-tab:hover { background: var(--nav-hover); color: var(--nav-ink); }
  .sidebar .nav-tab.active { background: var(--nav-active); color: var(--nav-active-ink); box-shadow: none; font-weight: 700; }
  .sidebar .nav-tab.active::before { background: var(--nav-active-ink); left: 0; top: 12px; bottom: 12px; }
  .sidebar .nav-tab span:first-child { background: transparent; font-size: 18px; }
  .sidebar .nav-favorites { background: rgb(0 0 0 / 12%); border: 1px solid var(--nav-line); padding: 12px; }
  .sidebar .nav-favorites-title, .sidebar .nav-favorites-title small { color: var(--nav-muted); }
  .sidebar .nav-favorite-shortcut { background: transparent; color: var(--nav-ink); border-color: var(--nav-line); }
  .sidebar .nav-favorite-shortcut:hover { background: var(--nav-hover); color: var(--nav-ink); }
  .sidebar .nav-favorite-shortcut.active { background: var(--nav-active); border-color: var(--nav-active); color: var(--nav-active-ink); }
  .sidebar :is(button, summary):focus-visible { outline: 2px solid var(--nav-active); outline-offset: 3px; }
  .mobile-nav-toggle { background: var(--nav-hover); color: var(--nav-ink); border-color: var(--nav-line); }
  .nav-position-preview-bar { background: var(--nav-surface); }

  /* Üst bar ve hesap araçları. */
  .workspace { padding: 28px 32px 48px; }
  .topbar { display: grid; gap: 18px; position: relative; top: auto; margin: 0 0 30px; padding: 18px; border: 1px solid var(--control-line); border-radius: var(--radius-lg); background: var(--control-surface); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar h1 { font-size: 17px; font-weight: 550; color: var(--ink); }
  .topbar .eyebrow { color: var(--muted); font-size: 9px; }
  .topbar-actions { justify-content: flex-start; gap: 10px; }
  .topbar .global-search { flex: 1 1 240px; min-width: 200px; }
  .global-search input { padding-right: 62px; min-height: 44px; }
  .search-key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: inherit; font-size: 10px; border: 1px solid var(--line); padding: 3px 5px; border-radius: 4px; pointer-events: none; }
  .topbar .quick-command-bar { padding: 0; border: 0; background: transparent; gap: 4px; }
  .topbar .quick-command-bar .icon-button { min-width: 32px; width: 32px; min-height: 38px; border-color: transparent; background: transparent; color: var(--muted); }
  .topbar .date-filter { gap: 6px; font-size: 11px; }
  .topbar .date-filter input, .topbar .date-filter select { max-width: 170px; min-height: 44px; padding: 0 10px; background: var(--surface); }
  .workspace-menu { position: relative; margin-left: auto; }
  .workspace-menu summary { list-style: none; display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; padding: 0 12px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; }
  .workspace-menu summary::-webkit-details-marker { display: none; }
  .workspace-menu[open] summary { border-color: var(--brand); }
  .workspace-menu-content { position: absolute; top: calc(100% + 8px); right: 0; width: min(260px, calc(100vw - 40px)); display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 12px 35px rgb(0 0 0 / 12%); z-index: 40; }
  .workspace-menu-content .current-user { padding: 10px; border: 1px solid var(--control-line); border-radius: var(--radius-sm); background: var(--control-surface); margin-bottom: 5px; font-size: 12px; }
  .workspace-menu-content button { text-align: left; justify-content: flex-start; background: transparent; border-color: transparent; box-shadow: none; font-weight: 500; }
  .workspace-menu-content button:hover { background: var(--bg); }
  .workspace-menu-content #logoutButton { color: var(--danger); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }

  /* Ortak kart ve form sistemi: sakin yüzeyler, güçlü bilgi hiyerarşisi. */
  .dashboard-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 2px 0 24px; }
  .dashboard-intro h2 { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
  .dashboard-intro > p { color: var(--muted); font-size: 12px; margin: 0 0 4px; }
  .view > h2, .section-header h2 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
  .panel, .metric, .table-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--surface); }
  .panel { padding: 22px; }
  .panel:hover, .metric:hover { box-shadow: var(--shadow); border-color: var(--line); transform: none; }
  .panel-heading { margin-bottom: 18px; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--control-line); }
  .panel h3, .panel-heading h3 { font-size: 15px; font-weight: 650; }
  .panel-heading > span { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 550; border: 1px solid var(--line); padding: 4px 10px; }
  .metric { min-height: 144px; padding: 22px; gap: 14px; }
  .metric::before { width: 3px; inset: 22px auto 22px 0; border-radius: 5px; }
  .metric::after { display: none; }
  .metric strong { font-size: clamp(24px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.04em; }
  .metric span { font-size: 12px; font-weight: 550; }
  .metric small { color: var(--muted); font-size: 11px; }
  .metric[data-tone="primary"] { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 20%, var(--line)); }
  .guide-card { background: var(--bg); border: 1px solid var(--line); padding: 16px; border-radius: var(--radius-md); box-shadow: none; }
  .guide-card span { text-transform: none; font-weight: 500; letter-spacing: 0; }
  .guide-card strong { font-weight: 600; }
  .guide-card small { font-size: 11px; line-height: 1.6; }
  .focus-panel { padding: 18px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
  .focus-item { border-left-width: 3px; }
  .primary-button { background: var(--brand); color: var(--on-brand); box-shadow: none; font-weight: 600; min-height: 42px; }
  .primary-button:hover { background: var(--brand-dark); color: var(--on-brand); box-shadow: none; }
  .secondary-button, .tiny-button { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; font-weight: 550; }
  .secondary-button:hover, .tiny-button:hover { background: var(--bg); color: var(--brand-dark); }
  .segmented-control { padding: 4px; background: var(--control-surface); border-radius: var(--radius-md); border-color: var(--control-line); gap: 3px; }
  .segment { font-weight: 550; font-size: 12px; }
  .segment.active, .permission-tab.active { background: var(--nav-surface); color: var(--nav-ink); box-shadow: none; }
  .permission-tab.active span { background: var(--nav-active); color: var(--nav-active-ink); }
  .permission-tabs, .permission-bulk-actions { background: var(--control-surface); border-color: var(--control-line); }
  thead th { background: var(--control-surface); color: var(--ink); border-color: var(--control-line); }
  .empty-state { padding: 28px 20px; background: var(--bg); color: var(--muted); border: 1px dashed var(--line); font-size: 13px; }
  .order-row, .stock-row, .ops-row, .history-row { background: var(--surface); border-color: var(--line); padding: 16px; }
  .order-row small, .stock-row small, .ops-row small { font-size: 12px; line-height: 1.6; }
  .table-card { padding: 22px; min-height: 170px; }
  .table-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
  .table-card strong { font-weight: 600; }
  .form-panel label { font-size: 12px; color: var(--muted); gap: 8px; }
  .dialog-panel { border-radius: var(--radius-lg); }
  .desktop-sync-panel { margin-top: 18px; }
  .desktop-sync-panel > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); padding: 12px; border: 1px solid var(--control-line); border-radius: var(--radius-sm); background: var(--control-surface); }
  .desktop-sync-panel > summary > span { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 12px; }
  .desktop-sync-panel[open] > summary { margin-bottom: 24px; }
  body[data-theme="contrast"] .sidebar { border-color: var(--line); }
  body[data-theme="contrast"] .primary-button:hover { background: var(--brand); }
  body[data-density="compact"] .panel, body[data-density="compact"] .metric { padding: 16px; }
  body[data-density="compact"] .metric { min-height: 120px; }

  .login-story { width: 100%; }
  .sidebar .brand-mark { display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
  .topbar { grid-template-columns: minmax(0, 1fr); }
  #dashboard .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view:is(#tables, #payments, #menu, #recipes, #stock, #finance, #sales, #kitchen, #delivery) .section-header [data-refresh-current] { display: none; }

  /* İçerik sayfaları: başlık / yardımcı araçlar / veri / işlem formu. */
  .view > .section-header { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  .module-description { order: 2; flex: 1 0 100%; width: 100%; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; font-weight: 400; }
  .module-shortcuts { order: 3; display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
  .module-shortcuts a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--control-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--brand-dark); text-decoration: none; font-size: 12px; font-weight: 600; }
  .module-shortcuts a:hover { background: var(--control-surface); }
  .module-shortcuts a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
  .view [tabindex="-1"] { scroll-margin-block-start: 100px; }
  .module-refresh-button { min-height: 36px; font-size: 12px; }
  .view:is(#production, #reservations, #customers, #staff, #waste, #returns, #purchase, #counts, #dayclose, #management) .module-refresh-button { display: none; }
  .module-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid var(--control-line); border-radius: var(--radius-lg); background: var(--control-surface); }
  .module-toolbar .date-filter { display: grid; flex: 1 1 150px; gap: 6px; font-size: 12px; }
  .module-toolbar .date-filter :is(input, select) { width: 100%; max-width: none; min-height: 42px; }
  .module-toolbar > button { align-self: flex-end; min-height: 42px; }
  .module-toolbar > .report-format-select { width: auto; }
  .module-toolbar .quick-range-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; order: 1; }
  .module-toolbar .quick-range-actions button { min-height: 36px; padding: 6px 12px; font-size: 12px; }
  .module-guidance { gap: 10px; margin-bottom: 20px; }
  .module-guidance .guide-card { background: var(--surface); border-left: 3px solid var(--control-line); padding: 12px 16px; gap: 6px; }
  .module-guidance .guide-card strong { font-size: 23px; font-variant-numeric: tabular-nums; }
  .view .form-panel { border-top: 3px solid var(--brand); }
  .view .form-panel > h3 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .view .form-panel label { color: var(--ink); font-weight: 550; }
  .view .form-panel :is(input, select, textarea) { background: color-mix(in srgb, var(--bg) 50%, var(--surface)); }
  .view .form-panel :is(input, select, textarea):focus { background: var(--surface); }
  .view :is(.order-row, .menu-row, .ops-row, .stock-ledger-row, .invoice-row, .recipe-row) { border-radius: var(--radius-md); box-shadow: none; gap: 12px; }
  .view :is(.order-row, .menu-row, .ops-row, .stock-ledger-row, .invoice-row, .recipe-row) > div:first-child > strong { display: block; margin-bottom: 4px; font-size: 14px; line-height: 1.5; }
  .view :is(.order-row, .menu-row, .ops-row, .stock-ledger-row, .invoice-row, .recipe-row) > div:first-child > small { display: block; line-height: 1.7; font-weight: 400; }
  .view .cell-label { display: block; color: var(--muted); font-size: 10px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; }
  .view .row-actions { gap: 6px; }
  .view .row-actions :is(.tiny-button, .danger-button) { min-height: 34px; font-size: 12px; }
  .view .category-toolbar { margin-bottom: 12px; }
  .view .category-toolbar .category-chip { white-space: normal; line-height: 1.4; padding: 8px 10px; font-size: 12px; font-weight: 600; }
  .view .category-toolbar .category-chip strong { flex-shrink: 0; min-width: 22px; font-size: 11px; }
  .view .category-toolbar[data-category-view="hybrid"] .category-strip:not(:first-child) { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
  .view .panel:not(.form-panel) { container-type: inline-size; }
  @container (max-width: 650px) {
    .ops-row, .recipe-row, .menu-row, .stock-ledger-row, .payment-operation-row { grid-template-columns: minmax(0, 1fr) auto; }
    :is(.ops-row, .recipe-row, .menu-row, .stock-ledger-row) > div:first-child { grid-column: 1 / -1; }
    :is(.ops-row, .recipe-row, .menu-row, .stock-ledger-row) > .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .ops-row > small:last-child { grid-column: 1 / -1; }
  }
  @media (min-width: 1101px) {
    .menu-layout, .recipe-layout, .ops-layout:not(.users-admin-layout):not(.settings-admin-layout):not(.dayclose-layout) { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
    .purchase-layout, .definitions-layout, .dayclose-layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  }
  @media (max-width: 760px) {
    .view > .section-header { padding-right: 0; }
    .view > .section-header h2 { padding-right: 48px; flex-basis: 100%; font-size: 24px; }
    .view > .section-header > .subtle-count { font-size: 12px; }
    .module-description { font-size: 12px; }
    .module-shortcuts { gap: 6px; }
    .module-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; align-items: end; }
    .module-toolbar > * { min-width: 0; }
    .module-toolbar .date-filter { grid-column: 1 / -1; }
    .module-toolbar .quick-range-actions { grid-column: 1 / -1; }
    .module-toolbar > button { width: 100%; height: auto; }
    .view .module-guidance { grid-template-columns: 1fr; gap: 6px; }
    .view .module-guidance .guide-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 60px; padding: 10px 12px; gap: 4px 12px; }
    .view .module-guidance .guide-card strong { grid-column: 2; grid-row: 1 / 3; font-size: 22px; }
    .view .module-guidance .guide-card small { grid-column: 1; font-size: 11px; }
    .view .module-guidance .guide-card button { grid-column: 1 / -1; grid-row: 3; }
    .view .segmented-control { flex-wrap: wrap; }
    .view .segmented-control .segment { min-height: 38px; flex: 1 1 auto; }
    .view .category-toolbar[data-category-view="hybrid"] .category-strip.compact:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1500px) {
    .topbar { grid-template-columns: 180px minmax(0, 1fr); align-items: center; }
    .topbar-actions { justify-content: flex-end; }
  }
  @media (max-width: 1100px) {
    .workspace { padding: 22px; }
    .topbar .quick-command-bar { justify-content: space-between; }
    .login-screen { gap: 3vw; }
    .login-story { padding: 36px; }
  }
  @media (max-width: 920px) {
    body .sidebar, body[data-theme] .sidebar { padding: 12px 18px; gap: 12px; border-bottom: 1px solid var(--nav-line); }
    .sidebar .nav-tab { grid-template-columns: 24px 1fr; justify-items: start; text-align: left; font-size: 13px; }
    .sidebar .brand { min-height: 48px; }
    .topbar { margin-bottom: 22px; }
    .workspace { padding: 20px; }
    .login-screen { padding: 0; grid-template-columns: 1fr; gap: 0; }
    .login-story { min-height: auto; width: 100%; border-radius: 0; padding: 24px 30px 30px; gap: 28px; }
    .login-story-copy h2 { font-size: 34px; }
    .login-story-copy h2 br { display: none; }
    .login-story-copy h2 em::before { content: " "; }
    .service-illustration, .login-story-footer, .login-story-copy > p:last-child { display: none; }
    .login-story-copy h2 { margin: 0; }
    .login-story-copy .eyebrow { margin-bottom: 12px; }
    .login-panel { justify-self: center; padding: 36px 24px; width: min(460px, 100%); }
  }
  @media (max-width: 760px) {
    .section-header { position: relative; flex-direction: row; align-items: center; gap: 12px; padding-right: 48px; }
    .section-header .module-favorite-button { position: absolute; right: 0; top: 0; }
    .section-header h2 { flex: 1 1 65%; }
    .section-header .subtle-count { width: auto; }
    #dashboard .content-grid { grid-template-columns: 1fr; }
    .module-guidance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .module-guidance .guide-card { display: flex; flex-direction: column; align-items: flex-start; padding: 12px; gap: 8px; }
    .module-guidance .guide-card strong { font-size: 22px; overflow-wrap: anywhere; }
    .topbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .topbar .global-search { min-width: 0; grid-column: 1 / -1; }
    .topbar .date-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .topbar .date-filter input, .topbar .date-filter select { max-width: 100%; min-width: 0; width: 100%; }
    .workspace-menu { margin-left: 0; grid-column: 1 / -1; }
    .workspace-menu-content { width: 100%; }
    .workspace-menu summary { min-height: 40px; }
    .topbar h1 { font-size: 16px; }
    .topbar { gap: 12px; padding: 12px; }
    .dashboard-intro { margin-bottom: 18px; }
    .dashboard-intro h2 { font-size: 26px; }
    .dashboard-intro > p { font-size: 11px; }
    .panel { padding: 16px; }
    .metric { padding: 16px; min-height: 132px; }
    .metric strong { font-size: 26px; }
    .workspace { padding: 16px; }
  }

  /* Görsel sistem: tutarlı ikonlar, editoryal başlıklar ve sakin yüzeyler. */
  .module-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
  .sidebar .nav-tab .icon-text-fallback { display: none; }
  .sidebar .nav-tab span:first-child { width: 22px; height: 22px; }
  .sidebar .nav-tab { font-size: 13px; letter-spacing: .01em; }
  .sidebar .nav-tab.active::before { display: none; }
  .sidebar .nav-group-title { min-height: 36px; }
  .sidebar .brand { padding-bottom: 18px; border-bottom: 1px solid var(--nav-line); border-radius: 0; }
  .sidebar .nav-favorites { padding: 10px; background: rgb(255 255 255 / 4%); }
  .sidebar .nav-favorite-shortcut { min-height: 42px; border-color: transparent; background: rgb(255 255 255 / 6%); }
  .sidebar .nav-favorite-shortcut .module-icon { width: 17px; height: 17px; }
  .topbar { border-color: var(--line); box-shadow: none; gap: 14px; }
  .topbar .eyebrow { letter-spacing: .13em; }
  .topbar .global-search input { border-color: var(--line); font-weight: 400; }
  .topbar .date-filter { font-weight: 500; }
  .topbar .date-filter select { max-width: 210px; }
  .dashboard-intro { padding: 6px 0 4px; margin-bottom: 24px; }
  .dashboard-intro h2 { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.045em; font-weight: 650; }
  .dashboard-intro .eyebrow { margin-bottom: 8px; }
  .view > .section-header h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.035em; }
  .module-description { line-height: 1.65; }
  .module-shortcuts a { border-color: transparent; padding: 3px 0; min-height: 28px; background: transparent; }
  .module-shortcuts a + a { margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--line); border-radius: 0; }
  .module-shortcuts a:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
  .panel { border-color: var(--line); }
  .panel-heading { padding-bottom: 16px; border-color: var(--line); }
  .panel-heading h3, .panel h3 { letter-spacing: -.02em; font-weight: 650; }
  .panel-heading > span { border: 0; border-radius: 6px; padding: 5px 9px; }
  .metric { gap: 12px; min-height: 172px; }
  .metric::before { display: none; }
  .metric .metric-label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
  .metric .metric-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--brand-dark); background: var(--control-surface); }
  .metric .metric-symbol .module-icon { width: 18px; height: 18px; }
  .metric[data-tone="primary"] { background: var(--nav-surface); border-color: var(--nav-surface); color: var(--nav-ink); }
  .metric[data-tone="primary"] :is(.metric-label, small) { color: var(--nav-muted); }
  .metric[data-tone="primary"] .metric-symbol { background: var(--nav-hover); color: var(--nav-active); }
  .metric[data-tone="primary"] strong { color: var(--nav-ink); }
  .metric[data-tone="danger"] .metric-symbol { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
  .metric strong { font-size: clamp(28px, 2.8vw, 38px); font-weight: 650; }
  .metric small { line-height: 1.6; }
  .module-guidance { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; gap: 0; }
  .module-guidance .guide-card { min-height: 78px; border: 0; border-radius: 0; padding: 14px 18px; box-shadow: none; background: transparent; }
  .module-guidance .guide-card + .guide-card { border-left: 1px solid var(--line); }
  .view .form-panel { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 2%, var(--surface)); }
  .view .form-panel > h3 { border-bottom: 0; padding-bottom: 8px; }
  .view .form-panel :is(input, select, textarea) { background: var(--surface); font-weight: 400; }
  .view .form-panel > button[type="submit"] { margin-top: 6px; }
  .view .category-toolbar .category-chip { font-size: 12px; font-weight: 500; }
  .view .category-toolbar .category-chip.active { box-shadow: none; }
  .view :is(.menu-row, .ops-row, .stock-ledger-row, .invoice-row, .recipe-row) { background: var(--surface); padding: 16px; }
  .view :is(.menu-row, .ops-row, .stock-ledger-row, .invoice-row, .recipe-row):hover { background: color-mix(in srgb, var(--brand) 3%, var(--surface)); box-shadow: none; }
  .view .row-actions .danger-button { color: var(--danger); background: transparent; border-color: transparent; }
  .view .row-actions .danger-button:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); }
  .table-card { --table-tone: var(--ok); border-top: 3px solid var(--table-tone); min-height: 218px; gap: 14px; }
  .table-card[data-status="busy"] { --table-tone: var(--warning); background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
  .table-card[data-status="reserved"] { --table-tone: var(--brand); }
  .table-card::after { display: none; }
  .table-card h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
  .table-card h3 .module-icon { color: var(--table-tone); }
  .table-card > small { font-size: 12px; line-height: 1.7; }
  .table-card > strong { font-size: 28px; letter-spacing: -.03em; }
  .table-card footer { border-top: 1px solid var(--line); padding-top: 12px; }
  .table-card footer :is(button, select) { font-weight: 500; }
  .status-pill { font-weight: 600; font-size: 11px; }
  .empty-state { background: color-mix(in srgb, var(--bg) 65%, var(--surface)); border: 1px dashed var(--line); padding: 28px; line-height: 1.7; }
  .focus-panel { border: 1px solid color-mix(in srgb, var(--warning) 22%, var(--line)); background: color-mix(in srgb, var(--warning) 3%, var(--surface)); }
  .focus-panel-heading { margin-bottom: 14px; }
  .focus-item { padding: 14px; }
  .login-story { position: relative; isolation: isolate; }
  .login-story::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border: 1px solid rgb(225 235 201 / 13%); border-radius: 50%; right: -200px; top: 13%; box-shadow: 0 0 0 60px rgb(225 235 201 / 4%), 0 0 0 120px rgb(225 235 201 / 3%); pointer-events: none; }
  .login-panel h1 { font-size: 38px; }
  .dialog-panel { box-shadow: 0 24px 80px rgb(0 0 0 / 20%); }
  dialog::backdrop { background: rgb(12 31 27 / 52%); backdrop-filter: blur(3px); }
  body[data-theme="contrast"] .module-guidance .guide-card { border-color: var(--line); }
  @media (max-width: 920px) {
    .sidebar .brand { padding-bottom: 0; border-bottom: 0; }
    .module-guidance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .module-guidance .guide-card { padding: 12px; }
  }
  @media (max-width: 760px) {
    .view > .section-header h2 { font-size: 25px; }
    #dashboard .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #dashboard .metric { min-width: 0; }
    #dashboard .metric strong { overflow-wrap: anywhere; font-size: 26px; }
    #dashboard .metric .metric-label { flex-wrap: wrap; }
    .topbar .date-filter select { max-width: 100%; }
    .metric { min-height: 150px; }
    .metric strong { font-size: 28px; }
    .metric .metric-label { font-size: 11px; gap: 7px; }
    .metric .metric-symbol { width: 28px; height: 28px; border-radius: 8px; }
    .view .module-guidance { gap: 0; }
    .view .module-guidance .guide-card { min-height: 56px; padding: 10px 14px; border: 0; }
    .view .module-guidance .guide-card + .guide-card { border-top: 1px solid var(--line); }
    .view .module-guidance .guide-card strong { font-size: 20px; }
    .table-card { min-height: 200px; padding: 16px; }
    .table-card h3 { font-size: 15px; }
    .login-panel h1 { font-size: 32px; }
  }
  @media (hover: none) and (pointer: coarse) {
    .view .row-actions :is(.tiny-button, .danger-button), .module-shortcuts a, .table-status-select { min-height: 44px; }
  }
}