/* Mizanta / Editorial workspace. Görsel kimlik; iş kurallarından bağımsızdır. */
@font-face {
  font-family: "Mizanta Manrope";
  src: url("./fonts/Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@media screen {
  body { font-family: "Mizanta Manrope", "Segoe UI", sans-serif; --shadow: 0 2px 5px rgb(24 35 32 / 3%), 0 10px 26px rgb(24 35 32 / 3%); --shadow-soft: 0 9px 25px rgb(24 35 32 / 8%); }
  body:not([data-theme="contrast"]) { --nav-surface: #19282d; --nav-hover: #263a40; --nav-ink: #f4f8f6; --nav-muted: #c4d2d1; --nav-active: #dce8d1; --nav-active-ink: #1a3530; --nav-line: #405359; }
  body[data-theme="light"], body:not([data-theme]) { --bg: #f5f4f0; --ink: #24343a; --muted: #5e6d73; --line: #e0e5e3; --control-surface: #eeefeb; --control-line: #d9e0dc; }
  button, input, select, textarea { font-family: inherit; }
  :is(input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
  .sidebar :is(button, a):focus-visible { outline-color: var(--nav-active); }

  /* Gezinme arka planda; seçili konum belirgin. */
  .sidebar .brand { padding-top: 12px; padding-bottom: 28px; }
  .sidebar .brand strong { font-size: 24px; font-weight: 750; letter-spacing: -.055em; }
  .sidebar .brand div > span { font-size: 10px; letter-spacing: .05em; margin-top: 4px; }
  .sidebar .brand-mark { border-radius: 13px 13px 13px 3px; font-weight: 800; }
  .sidebar .nav-tab { min-height: 43px; border-radius: 8px; font-size: 12px; font-weight: 550; padding-inline: 13px; }
  .sidebar .nav-tab.active { box-shadow: inset 3px 0 var(--nav-active-ink); }
  .sidebar .nav-group-title { font-size: 10px; letter-spacing: .11em; font-weight: 650; padding-top: 21px; }
  .sidebar .nav-favorites { border: 1px solid var(--nav-line); background: transparent; border-radius: 10px; }
  .sidebar .nav-favorite { background: var(--nav-hover); border-radius: 6px; }
  .workspace > .topbar { background: var(--surface); border: 1px solid var(--line); padding: 18px 22px; border-radius: 14px; box-shadow: none; gap: 14px; }
  .topbar > div > .eyebrow { font-size: 9px; letter-spacing: .16em; }
  .topbar h1 { font-size: 16px; font-weight: 650; letter-spacing: -.03em; }
  .topbar .global-search input { background: var(--bg); border-color: var(--line); }
  .topbar :is(input, select, button, summary) { border-radius: 8px; }

  /* Başlık, yardımcı bilgi ve çalışma yüzeyi arasında bir tipografi ölçeği. */
  .view > .section-header h2, .dashboard-intro h2 { font-size: clamp(25px, 2.3vw, 33px); letter-spacing: -.055em; font-weight: 700; }
  .dashboard-intro { align-items: end; margin-bottom: 20px; }
  .dashboard-intro .eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
  .dashboard-intro > p { font-size: 12px; color: var(--muted); }
  .module-description { font-size: 12px; max-width: 85ch; }
  .view .module-shortcuts a { font-size: 11px; border-radius: 7px; font-weight: 650; }
  .panel, .table-card, .kitchen-card { border-radius: 14px; border-color: var(--line); box-shadow: var(--shadow); }
  .panel-heading { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
  .panel-heading h3, .panel h3 { font-size: 15px; letter-spacing: -.025em; font-weight: 750; }
  .panel-heading > span { border: 0; border-radius: 6px; padding: 5px 9px; font-size: 10px; }
  .view .module-toolbar { border-radius: 12px; border-color: var(--line); background: var(--control-surface); box-shadow: none; padding: 16px; }
  .module-guidance { box-shadow: none; }
  .view .module-guidance .guide-card { background: var(--surface); }
  .view .module-guidance .guide-card strong { font-size: 24px; letter-spacing: -.04em; }
  .view .module-guidance .guide-card span { font-size: 11px; }
  .view .module-guidance .guide-card small { font-size: 10px; }
  .primary-button { border-radius: 9px; font-size: 12px; letter-spacing: -.015em; }
  .secondary-button, .tiny-button, .danger-button { border-radius: 8px; font-size: 12px; }
  .segmented-control { border-radius: 10px; padding: 5px; }
  .segment { border-radius: 7px; font-size: 11px; min-height: 34px; }
  .form-panel { border-top: 3px solid color-mix(in srgb, var(--brand) 65%, var(--line)); }
  .form-panel > h3 { margin-bottom: 22px; }
  .form-panel label { color: var(--ink); font-weight: 600; font-size: 12px; }
  .form-panel :is(input, select, textarea) { border-radius: 9px; background: var(--surface); border-color: var(--line); min-height: 43px; }
  .view thead th { font-size: 11px; padding-block: 14px; font-weight: 700; background: var(--control-surface); }
  .view tbody td { font-size: 12px; padding-block: 16px; }
  .view tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
  .view .ops-row { border-radius: 9px; }
  .view .ops-row strong, .view .order-row strong { font-weight: 650; letter-spacing: -.02em; }
  .table-card { position: relative; border-top-width: 3px; min-height: 215px; }
  .table-card[data-status="busy"] { border-top-color: var(--brand); }
  .table-card[data-status="open"] { border-top-color: var(--line); }
  .table-card[data-status="reserved"] { border-top-color: var(--warning); }
  .table-card header h3 { font-size: 16px; }
  .table-card > strong { font-size: 29px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .table-card > small { line-height: 1.8; font-size: 11px; }
  .status-pill { border-radius: 6px; font-size: 10px; }
  .empty-state { background: transparent; border: 1px dashed var(--line); font-size: 12px; }

  /* Ana sayfa: gerçek masa kullanımını özetleyen sakin bir odak alanı. */
  .service-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); gap: 28px; padding: 30px 34px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .service-kicker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 10px; letter-spacing: .075em; color: var(--muted); margin: 0 0 18px; }
  .service-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
  .service-overview-copy h3 { font-size: clamp(28px, 3.2vw, 45px); line-height: 1.12; font-weight: 600; letter-spacing: -.055em; margin: 0 0 16px; }
  .service-overview-copy > p:not(.service-kicker) { font-size: 12px; line-height: 1.9; color: var(--muted); }
  .service-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .service-links button { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; min-height: 42px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 650; }
  .service-links button:first-child { background: var(--nav-surface); color: var(--nav-ink); border-color: var(--nav-surface); }
  .service-capacity { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
  .capacity-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 11px; font-weight: 650; }
  .capacity-heading small { color: var(--muted); font-size: 10px; font-weight: 400; }
  .capacity-chart { position: relative; width: 155px; height: 155px; margin: 10px auto; }
  .capacity-chart svg { display: block; width: 100%; height: 100%; }
  .capacity-chart circle { fill: none; stroke-width: 10; }
  .capacity-track { stroke: var(--line); }
  .capacity-value { stroke: var(--brand); stroke-linecap: round; }
  .capacity-chart > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; pointer-events: none; }
  .capacity-chart strong { font-size: 30px; font-weight: 700; letter-spacing: -.05em; }
  .capacity-chart small { color: var(--muted); font-size: 10px; }
  .capacity-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; font-size: 10px; }
  .capacity-legend span { display: flex; align-items: center; gap: 5px; }
  .capacity-legend i { width: 6px; height: 6px; border-radius: 50%; }
  .capacity-busy { background: var(--brand); }
  .capacity-open { background: var(--muted); }
  .capacity-reserved { background: var(--warning); }
  #dashboard .metric { min-height: 145px; border-radius: 13px; padding: 20px; }
  #dashboard .metric::before { display: none; }
  #dashboard .metric .metric-label { flex-direction: row-reverse; justify-content: space-between; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 11px; }
  #dashboard .metric .metric-symbol { border: 0; background: transparent; color: var(--muted); width: 25px; height: 25px; }
  #dashboard .metric strong { font-size: clamp(25px, 2.8vw, 36px); font-weight: 650; font-variant-numeric: tabular-nums; }
  #dashboard .metric[data-tone="primary"] { background: var(--nav-surface); color: var(--nav-ink); border-color: var(--nav-surface); }
  #dashboard .metric[data-tone="primary"] :is(.metric-label, .metric-symbol, small) { color: var(--nav-muted); }
  .role-dashboard .guide-card { background: transparent; border: 0; border-left: 2px solid var(--line); border-radius: 0; }
  .role-dashboard .guide-card strong { font-size: 25px; letter-spacing: -.04em; }

  /* Girişte daha güçlü marka, içeride ölçülü yoğunluk. */
  .login-story { background: #19282d; padding: clamp(32px, 4.4vw, 72px); border-radius: 24px 5px 24px 24px; }
  .login-story::before { width: 440px; height: 440px; right: -230px; top: 25%; border-color: #c7d4b825; box-shadow: 0 0 0 65px #c7d4b808, 0 0 0 130px #c7d4b807; }
  .login-story h2 { font-size: clamp(40px, 4.9vw, 74px); font-weight: 500; line-height: 1.08; letter-spacing: -.065em; }
  .login-story h2 em { color: #dce8d1; font-style: normal; }
  .login-story .brand-mark { background: #dce8d1; color: #19282d; border-radius: 14px 14px 14px 4px; }
  .login-story-brand strong { letter-spacing: -.05em; }
  .login-story-brand strong span { letter-spacing: .16em; font-size: 9px; }
  .login-story-copy > p:last-child { font-size: 13px; line-height: 1.9; color: #c4d2d1; }
  .service-illustration { background: transparent; border: 1px solid #405359; border-radius: 12px; }
  .service-steps > span b { background: #dce8d1; color: #19282d; border-radius: 6px; }
  .login-panel h1 { font-size: 38px; font-weight: 650; letter-spacing: -.05em; }
  .login-panel > div > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; }
  .login-panel input { min-height: 49px; border-radius: 9px; }
  .login-panel .primary-button { min-height: 49px; font-size: 13px; }
  #management .mg-hero { background: var(--nav-surface); border-radius: 16px; }
  #management .mg-kpi { border-radius: 13px; box-shadow: var(--shadow); }
  #management .mg-card { border-radius: 14px; }
  #management .mg-card h3 { font-size: 19px; font-weight: 700; }
  #management .mg-kpi > strong { letter-spacing: -.045em; font-weight: 650; }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .service-links button, .nav-tab, .primary-button, .secondary-button { transition: background-color .16s ease, box-shadow .16s ease; }
    .service-links button:hover { box-shadow: var(--shadow-soft); }
  }
  @media (max-width: 1100px) { .service-overview { gap: 18px; padding: 24px; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); } }
  @media (max-width: 760px) {
    .workspace > .topbar { padding: 16px; }
    .service-overview { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 22px; }
    .service-overview-copy h3 { font-size: 32px; }
    .service-links button { flex: 1 1 auto; }
    .capacity-chart { width: 132px; height: 132px; }
    .service-capacity { padding: 16px; }
    .dashboard-intro > p { margin-top: 10px; }
    .dashboard-intro { align-items: start; gap: 8px; }
    #dashboard .metric { min-height: 150px; padding: 16px; }
    #dashboard .metric .metric-label { flex-wrap: wrap; align-items: start; }
    #dashboard .metric strong { font-size: 27px; overflow-wrap: anywhere; }
    .login-story h2 { font-size: 43px; }
    .login-panel h1 { font-size: 32px; }
    .wide-break { display: none; }
  }
  body[data-density="compact"] .service-overview { padding: 20px; }
  body[data-theme="contrast"] .service-overview, body[data-theme="contrast"] .service-capacity { border: 1px solid var(--ink); }
  body[data-theme="contrast"] .capacity-value { stroke-width: 13; }
}