/* ==========================================================================
   BABA PACK ERP — Tasarım Sistemi (app.css)
   Light tema · yeşil marka · mobil öncelikli · tam Türkçe
   Bağımsız (Bootstrap yok). Tüm ölçüler 4px tabanlı boşluk sistemi.
   ========================================================================== */

/* ---------- 1. Tasarım token'ları ---------- */
:root {
  /* Marka yeşilleri (logodan türetildi) */
  --brand-950:#12300C; --brand-900:#194214; --brand-800:#22571B;
  --brand-700:#2C6B22; --brand-600:#357F29; --brand-500:#4A9A38;
  --brand-400:#71B84E; --brand-300:#9DD077; --brand-200:#C6E4AC;
  --brand-100:#E3F1D5; --brand-50:#F1F8EA;

  --primary:#2C6B22;         /* ana aksiyon (beyaz yazı ile AA) */
  --primary-hover:#22571B;
  --primary-soft:#EAF4E1;    /* açık zemin (aktif menü, çip) */
  --accent:#71B84E;          /* limon-yeşil vurgu */

  /* Nötrler / metin */
  --ink:#17241C;             /* ana metin */
  --ink-2:#4C5A52;           /* ikincil metin */
  --ink-3:#5F6B64;           /* soluk metin (WCAG AA ≥4.5:1) */
  --line:#E5EAE4;            /* kenarlık */
  --line-2:#EFF3ED;

  /* Yüzeyler */
  --bg:#F4F7F1;              /* uygulama arka planı */
  --surface:#FFFFFF;         /* kart/panel */
  --surface-2:#FAFCF8;

  /* Anlamsal */
  --success:#2E9E4F; --success-soft:#E6F5EC;
  --warning:#C9821B; --warning-soft:#FBF0DC;
  --danger:#D6433B;  --danger-soft:#FBE7E5;
  --info:#2F76C0;    --info-soft:#E5EFFA;

  /* Ölçek */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,48,12,.05);
  --shadow:0 1px 2px rgba(20,48,12,.04), 0 6px 20px rgba(20,48,12,.06);
  --shadow-lg:0 12px 32px rgba(20,48,12,.12);

  --sidebar-w:264px; --sidebar-w-collapsed:78px; --topbar-h:64px;

  --font: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Sayısal değerlerde hizalı, şık rakamlar */
.num, .kpi__value, table.tbl td, .kpi__meta{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1,"cv01" 1; }

/* ---------- 2. Temel ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:.9375rem;      /* 15px */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ margin:0; font-weight:700; color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
h1{ font-size:1.5rem; } h2{ font-size:1.25rem; } h3{ font-size:1.0625rem; } h4{ font-size:.9375rem; }
p{ margin:0; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-hover); }
small{ font-size:.8125rem; }
img{ max-width:100%; display:block; }
::selection{ background:var(--brand-200); }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; border-radius:4px; }

.muted{ color:var(--ink-3); }
.text-2{ color:var(--ink-2); }
.text-success{ color:var(--success); } .text-danger{ color:var(--danger); } .text-warning{ color:var(--warning); }

/* ---------- 3. Yerleşim (layout) ---------- */
.layout{ min-height:100vh; }

.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:60;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; transition:width .22s ease, transform .22s ease;
}
.sidebar__brand{
  height:var(--topbar-h); display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 14px; border-bottom:1px solid var(--line-2); flex-shrink:0;
}
.sidebar__brand img{ height:100%; max-height:56px; width:auto; max-width:100%; object-fit:contain; }
.sidebar__brand .brand-mini{ display:none; width:38px; height:38px; border-radius:11px;
  align-items:center; justify-content:center; background:var(--brand-50, #EAF3E7); color:var(--brand-700, #2C6B22); }
.sidebar__brand .brand-mini .ico{ width:22px; height:22px; }
.sidebar__nav{ flex:1; overflow-y:auto; padding:12px 12px 24px; }
.sidebar__nav::-webkit-scrollbar{ width:8px; } .sidebar__nav::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

.nav-group-title{
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 12px 6px;
}
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:500; cursor:pointer; user-select:none;
  transition:background .15s, color .15s; white-space:nowrap;
}
.nav-link:hover{ background:var(--surface-2); color:var(--ink); }
.nav-link.active{ background:var(--primary-soft); color:var(--primary); font-weight:600; }
.nav-link.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--primary); border-radius:0 3px 3px 0;
}
.nav-link .ico{ flex-shrink:0; width:20px; height:20px; }
.nav-link .caret{ margin-left:auto; width:16px; height:16px; transition:transform .2s; color:var(--ink-3); }
.nav-item.open > .nav-link .caret{ transform:rotate(90deg); }
.nav-badge{ margin-left:auto; font-size:.6875rem; font-weight:700; background:var(--danger); color:#fff;
  border-radius:var(--r-pill); padding:1px 7px; }

.nav-sub{ overflow:hidden; max-height:0; transition:max-height .25s ease; }
.nav-item.open > .nav-sub{ max-height:520px; }
.nav-sub .nav-link{ padding-left:44px; font-size:.875rem; font-weight:500; }
.nav-sub .nav-link.active{ background:transparent; color:var(--primary); }
.nav-sub .nav-link.active::before{ display:none; }
.nav-sub .nav-link.active .dot{ background:var(--primary); }
.nav-sub .dot{ width:6px; height:6px; border-radius:50%; background:var(--line); flex-shrink:0; margin-left:2px; }

/* Topbar */
.main{ margin-left:var(--sidebar-w); transition:margin .22s ease; }
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px;
  padding:0 24px;
}
.icon-btn{
  width:40px; height:40px; border-radius:var(--r-sm); border:1px solid transparent;
  background:transparent; color:var(--ink-2); display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; position:relative; transition:background .15s,color .15s;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.icon-btn .ico{ width:21px; height:21px; }
.icon-btn .dot-badge{ position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface); }

.searchbar{ flex:1; max-width:420px; position:relative; }
.searchbar .ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-3); }
.searchbar input{
  width:100%; height:42px; border:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--r); padding:0 14px 0 40px; font:inherit; font-size:.875rem; color:var(--ink);
}
.searchbar input:focus{ outline:none; border-color:var(--brand-400); background:#fff; }
.topbar__spacer{ flex:1; }

.userchip{ display:flex; align-items:center; gap:6px; padding:4px 8px 4px 4px; border-radius:var(--r-pill);
  cursor:pointer; transition:background .15s,border-color .15s; background:var(--surface-2); font:inherit; border:1px solid var(--line); }
.userchip:hover{ background:var(--surface); border-color:var(--brand-300); }
.dd.open .userchip{ background:var(--surface); border-color:var(--brand-300); }
.userchip .avatar{ width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8125rem; flex-shrink:0; }
.userchip .u-name{ font-weight:600; font-size:.9375rem; line-height:1; letter-spacing:.005em; color:var(--ink); margin-right:2px; }
.userchip .caret{ width:18px; height:18px; color:var(--ink-3); transition:transform .2s; }
.dd.open .userchip .caret{ transform:rotate(180deg); }
.role-chip{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px;
  background:var(--primary-soft); color:var(--primary); font-size:.625rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin-top:6px; }

/* İçerik */
.content{ padding:24px 24px 80px; max-width:1440px; margin:0 auto; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head .subtitle{ color:var(--ink-3); font-size:.875rem; margin-top:2px; }
.breadcrumb{ font-size:.8125rem; color:var(--ink-3); margin-bottom:4px; }
.breadcrumb b{ color:var(--ink-2); font-weight:600; }

/* ---------- 4. Bileşenler ---------- */
/* Kart */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line-2); }
.card__head h3{ display:flex; align-items:center; gap:8px; }
.card__body{ padding:20px; }
.card__foot{ padding:14px 20px; border-top:1px solid var(--line-2); }

/* KPI kart */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s, border-color .15s; }
.kpi:hover{ box-shadow:var(--shadow); border-color:var(--brand-200); }
.kpi__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.kpi__icon{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi__icon .ico{ width:21px; height:21px; }
.kpi__label{ font-size:.8125rem; color:var(--ink-2); font-weight:600; }
.kpi__value{ font-size:1.875rem; font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--ink); }
.kpi__unit{ font-size:1rem; font-weight:600; color:var(--ink-3); margin-left:5px; letter-spacing:0; }
.kpi__meta{ font-size:.78125rem; margin-top:10px; display:flex; align-items:center; gap:6px; color:var(--ink-3); font-weight:500; }
.kpi__meta .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.kpi__meta.pos{ color:#1B7A35; } .kpi__meta.pos .dot{ background:#1B7A35; }
.kpi__meta.neg{ color:#B32720; } .kpi__meta.neg .dot{ background:#B32720; }

/* Modül kutucukları (dashboard hızlı erişim — menüden üretilir) */
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.tile{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-sm); color:var(--ink); transition:transform .12s, box-shadow .15s, border-color .15s; }
.tile:hover{ border-color:var(--brand-300); box-shadow:var(--shadow); transform:translateY(-2px); color:var(--ink); }
.tile__ic{ width:40px; height:40px; border-radius:11px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tile__ic .ico{ width:20px; height:20px; }
.tile__name{ font-weight:700; font-size:.875rem; line-height:1.2; }
.tile__go{ margin-left:auto; color:var(--ink-3); width:17px; height:17px; flex-shrink:0; }
.section-title{ font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin:4px 2px 14px; }

/* Aktif iş emirleri durum özeti (panel) */
.statlist{ display:flex; flex-direction:column; }
.statlist .li{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-2); }
.statlist .li:last-child{ border-bottom:none; }
.statlist .li .n{ margin-left:auto; font-weight:800; font-variant-numeric:tabular-nums; }
.kpi--green .kpi__icon{ background:var(--primary-soft); color:var(--primary); }
.kpi--blue .kpi__icon{ background:var(--info-soft); color:var(--info); }
.kpi--amber .kpi__icon{ background:var(--warning-soft); color:var(--warning); }
.kpi--red .kpi__icon{ background:var(--danger-soft); color:var(--danger); }
.kpi--violet .kpi__icon{ background:#EEE9FB; color:#6D48C7; }

/* Buton */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px;
  border-radius:var(--r); font:inherit; font-weight:600; font-size:.875rem; cursor:pointer; border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s; white-space:nowrap; }
.btn .ico{ width:18px; height:18px; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-hover); color:#fff; box-shadow:var(--shadow); }
.btn-outline{ background:#fff; border-color:var(--line); color:var(--ink-2); }
.btn-outline:hover{ border-color:var(--brand-400); color:var(--ink); background:var(--surface-2); }
.btn-ghost{ background:transparent; color:var(--ink-2); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-sm{ height:34px; padding:0 12px; font-size:.8125rem; }
.btn-block{ width:100%; }

/* Rozet / durum */
.badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:600; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
/* Rozet metin tonları AA için koyulaştırıldı (soft zemin üzerinde ≥4.5:1) */
.badge-success{ background:var(--success-soft); color:#1B7A35; }
.badge-warning{ background:var(--warning-soft); color:#8A590C; }
.badge-danger{ background:var(--danger-soft); color:#B32720; }
.badge-info{ background:var(--info-soft); color:#1F5C9E; }
.badge-muted{ background:var(--line-2); color:var(--ink-2); }

/* Tablo */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.875rem; }
table.tbl th{ text-align:left; font-weight:600; color:var(--ink-3); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.03em; padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.tbl td{ padding:14px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.tbl tbody tr:hover{ background:var(--surface-2); }
table.tbl tbody tr:last-child td{ border-bottom:none; }
.cell-strong{ font-weight:600; color:var(--ink); }
.cell-sub{ font-size:.75rem; color:var(--ink-3); }

/* Form */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8125rem; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.input, .select{ width:100%; height:46px; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:0 14px; font:inherit; font-size:.9375rem; color:var(--ink); transition:border-color .15s,box-shadow .15s; }
.input:focus,.select:focus{ outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
.input::placeholder{ color:var(--ink-3); }
input[type="password"]{ font-family:Arial,Helvetica,sans-serif; letter-spacing:normal; }
.input-icon{ position:relative; }
.input-icon .ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-3); }
.input-icon .input{ padding-left:44px; }

/* Info noktası (panel-içi yardım) — erişilebilir buton + popover */
.info-dot{ width:19px; height:19px; border-radius:50%; border:1.5px solid var(--ink-3); color:var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:.6875rem; font-weight:700; cursor:pointer;
  background:transparent; padding:0; line-height:1; font-family:inherit; vertical-align:middle; flex-shrink:0; }
.info-dot:hover, .info-dot[aria-expanded="true"]{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.info-pop{ position:fixed; z-index:80; max-width:280px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-lg); border-radius:var(--r); padding:12px 14px; font-size:.8125rem; line-height:1.5;
  color:var(--ink-2); }
.info-pop b{ color:var(--ink); display:block; margin-bottom:3px; }

/* Hafif grafikler (kütüphanesiz, saf CSS/SVG) */
.chart-bars{ display:flex; align-items:flex-end; gap:12px; height:150px; }
.chart-bars .bar{ flex:1; background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  border-radius:7px 7px 0 0; min-height:8px; position:relative; transition:filter .15s; }
.chart-bars .bar:hover{ filter:brightness(1.08); }
.chart-bars .bar .val{ position:absolute; top:-20px; left:0; right:0; text-align:center; font-size:.6875rem;
  font-weight:700; color:var(--ink-2); }
.chart-x{ display:flex; gap:12px; margin-top:10px; }
.chart-x span{ flex:1; text-align:center; font-size:.6875rem; color:var(--ink-3); font-weight:500; }
.donut-wrap{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; }
.donut{ width:150px; height:150px; border-radius:50%; position:relative; flex-shrink:0; }
.donut::after{ content:""; position:absolute; inset:22px; background:#fff; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-2); }
.donut__center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.donut__center b{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.donut__center span{ font-size:.6875rem; color:var(--ink-3); }
.legend{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:200px; }
.legend .li{ display:flex; align-items:center; gap:10px; font-size:.875rem; padding:8px 10px; border-radius:var(--r-sm); transition:background .12s; }
.legend .li:hover{ background:var(--surface-2); }
.legend .sw{ width:11px; height:11px; border-radius:4px; flex-shrink:0; }
.legend .li .lbl{ color:var(--ink-2); font-weight:500; }
.legend .li .n{ margin-left:auto; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.legend .li .pct{ font-size:.75rem; color:var(--ink-3); font-weight:600; min-width:38px; text-align:right; }

/* Sekmeler (tabs) — modern segment kontrolü */
.tabs{ display:inline-flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px;
  padding:5px; margin-bottom:22px; max-width:100%; overflow-x:auto; }
.tabs a, .tabs button{ padding:9px 16px; font:inherit; font-weight:600; font-size:.875rem; color:var(--ink-2);
  background:none; border:none; border-radius:9px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center;
  transition:background .15s, color .15s, box-shadow .15s; }
.tabs a:hover, .tabs button:hover{ color:var(--ink); }
.tabs .active{ background:#fff; color:var(--primary); box-shadow:var(--shadow-sm); }
.tabs .count{ font-size:.75rem; color:var(--ink-3); margin-left:6px; font-weight:600; }
.tabs .active .count{ color:var(--primary); opacity:.75; }

/* İlerleme çubuğu (hedef gerçekleşme) */
.goal{ margin-bottom:18px; }
.goal:last-child{ margin-bottom:0; }
.goal__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.goal__top .lbl{ font-size:.8125rem; color:var(--ink-2); font-weight:600; }
.goal__top .v{ font-size:.8125rem; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.goal__top .v small{ color:var(--ink-3); font-weight:600; }
.progress{ height:9px; background:var(--line-2); border-radius:99px; overflow:hidden; }
.progress__bar{ height:100%; background:linear-gradient(90deg,var(--brand-400),var(--brand-700)); border-radius:99px; transition:width .3s; }
.goal__pct{ font-size:.6875rem; color:var(--ink-3); font-weight:600; margin-top:4px; text-align:right; }

/* Puantaj tablosu (İK · aylık) */
.puantaj{ border-collapse:collapse; font-size:.75rem; width:100%; }
.puantaj th, .puantaj td{ border:1px solid var(--line-2); padding:7px 4px; text-align:center; min-width:36px; }
.puantaj thead th{ background:var(--brand-600); color:#fff; font-weight:700; position:sticky; top:0; }
.puantaj thead th .wd{ display:block; font-size:.5625rem; opacity:.85; font-weight:500; margin-top:1px; }
.puantaj thead th.we{ background:var(--brand-800); }
.puantaj thead th.hol{ background:var(--danger); cursor:pointer; }
.puantaj td.we{ background:var(--surface-2); color:var(--ink-3); }
.puantaj td.hol{ background:var(--danger-soft); color:#B32720; font-weight:700; }
.puantaj .pname{ text-align:left; font-weight:600; white-space:nowrap; position:sticky; left:0; z-index:1;
  background:#fff; min-width:170px; padding-left:12px; cursor:pointer; }
.puantaj thead .pname{ background:var(--brand-700); }
.puantaj tbody tr:hover .pname{ background:var(--surface-2); }
.puantaj td.izin{ color:var(--info); font-weight:700; }
.puantaj td.rapor{ color:#8A590C; font-weight:700; }
.puantaj td.sari{ background:#FEF3C7; color:#8A590C; font-weight:800; }
.puantaj td.work{ color:var(--ink); font-weight:600; }

/* Rapor tablosu — NET HAKEDİŞ vurgusu */
.tbl .col-total{ background:var(--brand-700); color:#fff; }
.tbl td.col-total{ background:var(--primary-soft); color:var(--primary); font-weight:800; }
.tbl thead th.col-accent{ color:var(--brand-100); }

/* Bilgi kutusu (nasıl kullanılır) */
.howto{ background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:20px; }
.howto h4{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.howto ul{ margin:0; padding-left:20px; color:var(--ink-2); font-size:.8125rem; line-height:1.7; }
.howto .mark{ background:#FEF3C7; color:#8A590C; padding:1px 6px; border-radius:5px; font-weight:700; font-size:.75rem; }
.howto .mark-r{ background:var(--danger-soft); color:#B32720; padding:1px 6px; border-radius:5px; font-weight:700; font-size:.75rem; }

/* Seçim çipleri (ör. maliyet ürün seçimi) */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.chip{ padding:8px 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink-2);
  font:inherit; font-size:.8125rem; font-weight:600; cursor:pointer; transition:background .12s,border-color .12s,color .12s; white-space:nowrap; }
.chip:hover{ border-color:var(--brand-400); color:var(--ink); }
.chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* Filtre çubuğu */
.filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.filters .searchbox{ flex:1; min-width:220px; }

/* Yardımcılar */
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; }
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:2fr 1fr; }
.wrap{ flex-wrap:wrap; } .between{ justify-content:space-between; } .center{ align-items:center; }

/* Açılır menü (dropdown) — bildirim / mesaj / ajanda / dil / profil */
.dd{ position:relative; }
.dd-panel{ position:absolute; top:calc(100% + 10px); right:0; width:340px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); z-index:70;
  overflow:hidden; display:none; }
.dd.open .dd-panel{ display:block; }
.dd-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line-2); }
.dd-head h4{ font-size:.9375rem; }
.dd-head a{ font-size:.75rem; font-weight:600; }
.dd-list{ max-height:380px; overflow-y:auto; padding:6px; }
/* Satırlar buton — UA çerçevesi sıfırlandı (kutu/border görünümü kalktı) */
.dd-item{ display:flex; gap:12px; align-items:flex-start; width:100%; padding:11px 12px; border:none;
  background:transparent; border-radius:var(--r-sm); cursor:pointer; text-align:left; font:inherit; position:relative; }
.dd-item:hover{ background:var(--surface-2); }
.dd-item.unread::after{ content:""; position:absolute; top:14px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--primary); }
.dd-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dd-ic .ico{ width:18px; height:18px; }
.dd-ic.g{ background:var(--primary-soft); color:var(--primary); }
.dd-ic.a{ background:var(--warning-soft); color:#8A590C; }
.dd-ic.r{ background:var(--danger-soft); color:#B32720; }
.dd-ic.b{ background:var(--info-soft); color:#1F5C9E; }
.dd-body{ flex:1; min-width:0; padding-right:14px; }
.dd-title{ display:block; font-weight:700; font-size:.8125rem; color:var(--ink); }
.dd-sub{ display:block; font-size:.75rem; color:var(--ink-2); margin-top:2px; line-height:1.45; }
.dd-time{ display:block; font-size:.6875rem; color:var(--ink-3); margin-top:5px; }
/* Okunmuş bildirim soluk, okunmamış koyu (md: Okunmamışlar koyu) */
.dd-item.is-read .dd-title{ font-weight:600; color:var(--ink-2); }
.dd-item.is-read .dd-ic{ opacity:.7; }

/* Boş durum (bildirim / liste yok) */
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px; }
.empty-state .es-ring{ width:72px; height:72px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--primary); }
.empty-state .es-ring .ico{ width:34px; height:34px; }
.empty-state .es-title{ font-weight:700; font-size:1rem; color:var(--ink); }
.empty-state .es-sub{ font-size:.8125rem; color:var(--ink-3); margin-top:5px; }
.dd-foot{ padding:11px 16px; text-align:center; border-top:1px solid var(--line-2); }
.dd-foot a{ font-size:.8125rem; font-weight:600; }
.dd-avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem; flex-shrink:0; }
.menu-list{ padding:6px; }
.menu-list a{ display:flex; gap:10px; align-items:center; padding:10px 12px; color:var(--ink-2); font-size:.875rem; border-radius:var(--r-sm); }
.menu-list a .ico{ width:18px; height:18px; }
.menu-list a:hover{ background:var(--surface-2); color:var(--ink); }
.menu-list a.danger{ color:var(--danger); }
.menu-list a.danger:hover{ background:var(--danger-soft); }
.menu-sep{ height:1px; background:var(--line-2); margin:6px 0; }
.lang-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; font-size:.875rem; }
.lang-item:hover{ background:var(--surface-2); }
.lang-item .flag{ font-size:1.1rem; } .lang-item .chk{ margin-left:auto; color:var(--primary); }
.profile-head{ display:flex; gap:12px; align-items:center; padding:16px; border-bottom:1px solid var(--line-2); }
.profile-head .u-name{ font-weight:700; font-size:.9375rem; } .profile-head .u-mail{ font-size:.75rem; color:var(--ink-3); }

@media (max-width:900px){
  .dd-panel{ position:fixed; top:calc(var(--topbar-h) + 6px); left:8px; right:8px; width:auto !important; }
}

/* Ürün listeleme hücresi (görsel solda + ad/EN/özellik alt alta) */
.prod{ display:flex; align-items:center; gap:14px; }
.prod__img{ width:56px; height:56px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prod__img svg, .prod__img img{ width:100%; height:100%; object-fit:cover; }
.prod__meta{ min-width:0; }
.prod__name{ font-weight:700; color:var(--ink); line-height:1.25; }
.prod__en{ font-size:.75rem; color:var(--ink-3); font-style:italic; margin-top:1px; }
.prod__spec{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; }
.spec-chip{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--ink-2); }
.spec-chip .ico{ width:13px; height:13px; color:var(--ink-3); flex-shrink:0; }
.cell-icons{ display:flex; flex-direction:column; gap:5px; }
.cell-icons .spec-chip{ font-size:.8125rem; }
@media (max-width:520px){ .prod__img{ width:46px; height:46px; } }

/* Tablo işlem butonları (minimalist ikon) */
.act{ display:inline-flex; gap:6px; }
.icon-btn-sm{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
.icon-btn-sm .ico{ width:16px; height:16px; }
.icon-btn-sm:hover{ border-color:var(--brand-400); color:var(--primary); background:var(--surface-2); }
.icon-btn-sm.danger:hover{ border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }

/* Modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(18,30,20,.5); z-index:90; display:none;
  align-items:center; justify-content:center; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:100%; max-width:560px;
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.modal.modal--lg{ max-width:740px; }
/* Form bölüm başlığı (profesyonel çok bölümlü formlar) */
.form-section{ font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
  margin:22px 0 14px; padding-top:16px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:8px; }
.form-section:first-child{ margin-top:0; padding-top:0; border-top:none; }
.form-section .ico{ width:16px; height:16px; color:var(--primary); }
.modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line-2); }
.modal__head h3{ display:flex; align-items:center; gap:10px; }
.modal__body{ padding:22px; overflow:auto; }
.modal__foot{ padding:16px 22px; border-top:1px solid var(--line-2); display:flex; gap:12px; justify-content:flex-end; }
.dl{ display:grid; grid-template-columns:160px 1fr; gap:12px 18px; margin:0; }
.dl dt{ color:var(--ink-3); font-size:.8125rem; font-weight:500; }
.dl dd{ margin:0; font-weight:600; color:var(--ink); }
@media (max-width:520px){ .dl{ grid-template-columns:1fr; gap:2px 0; } .dl dd{ margin-bottom:10px; } }

/* Görsel yükleme (sürükle-bırak) modalı — form modalının üstünde */
.upload-overlay{ position:fixed; inset:0; background:rgba(18,30,20,.55); z-index:95; display:none; align-items:center; justify-content:center; padding:20px; }
.upload-overlay.show{ display:flex; }
.dropzone{ border:2px dashed var(--line); border-radius:var(--r-lg); padding:34px 22px; text-align:center;
  background:var(--surface-2); transition:border-color .15s, background .15s; cursor:pointer; }
.dropzone.drag{ border-color:var(--brand-500); background:var(--brand-50); }
.dropzone__ic{ width:54px; height:54px; border-radius:15px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.dropzone__ic .ico{ width:26px; height:26px; }
.dropzone h4{ margin-bottom:4px; }
.dz-preview{ max-width:100%; max-height:220px; border-radius:var(--r); margin-top:16px; border:1px solid var(--line); }
.upload-preview:empty{ display:none; }

/* Toast (bilgi bildirimi) */
.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--info); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:14px 16px; min-width:300px; max-width:380px; display:flex; gap:12px; align-items:flex-start;
  animation:toastIn .22s ease; }
.toast.info{ border-left-color:var(--info); } .toast.info .toast__ic{ color:var(--info); }
.toast.success{ border-left-color:var(--success); } .toast.success .toast__ic{ color:var(--success); }
.toast.warning{ border-left-color:var(--warning); } .toast.warning .toast__ic{ color:var(--warning); }
.toast__ic{ flex-shrink:0; margin-top:1px; } .toast__ic .ico{ width:20px; height:20px; }
.toast__body{ font-size:.8125rem; color:var(--ink-2); line-height:1.5; }
.toast__body b{ color:var(--ink); display:block; margin-bottom:2px; }
.toast__x{ margin-left:auto; background:none; border:none; color:var(--ink-3); cursor:pointer; padding:0; line-height:1; flex-shrink:0; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:520px){ .toast-wrap{ left:12px; right:12px; bottom:12px; } .toast{ min-width:0; max-width:none; } }

/* Mobil overlay */
.overlay{ position:fixed; inset:0; background:rgba(20,32,24,.45); z-index:55; opacity:0; visibility:hidden; transition:.2s; }
.overlay.show{ opacity:1; visibility:visible; }

/* ---------- 5. Sidebar daraltma (masaüstü) ---------- */
body.sidebar-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }
body.sidebar-collapsed .main{ margin-left:var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar .label,
body.sidebar-collapsed .sidebar .caret,
body.sidebar-collapsed .sidebar .nav-group-title,
body.sidebar-collapsed .sidebar .nav-badge{ display:none; }
body.sidebar-collapsed .sidebar .sidebar__brand{ padding:0 8px; }
body.sidebar-collapsed .sidebar .sidebar__brand .brand-full{ display:none; }
body.sidebar-collapsed .sidebar .sidebar__brand .brand-mini{ display:inline-flex; }
body.sidebar-collapsed .sidebar .nav-sub{ display:none; }
body.sidebar-collapsed .nav-link{ justify-content:center; }

/* ---------- 6. Responsive ---------- */
@media (max-width:1024px){
  /* inline grid-template-columns'ı da ez ki mobilde tek kolona insin */
  .grid-2{ grid-template-columns:1fr !important; }
}
@media (max-width:680px){
  .grid{ grid-template-columns:1fr !important; }
}
@media (max-width:900px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  body.nav-open .sidebar{ transform:translateX(0); }
  .main{ margin-left:0; }
  .content{ padding:16px 16px 64px; }
  .topbar{ padding:0 16px; }
  /* Mobilde arama: ikon ile açılır tam-genişlik satır */
  .searchbar{ display:none; position:absolute; top:var(--topbar-h); left:0; right:0; max-width:none;
    padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .searchbar .ico{ left:24px; }
  .searchbar.open{ display:block; max-width:none !important; }
  .desk-only{ display:none !important; }
}
@media (min-width:901px){
  .mobile-only{ display:none !important; }
  .sidebar__close{ display:none; }
}
@media (max-width:520px){
  .kpi__value{ font-size:1.5rem; }
  .page-head .btn{ width:auto; padding:0 14px; }
  .hide-sm{ display:none !important; }
}

/* ---------- 7. Giriş (login) ekranı ---------- */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; background:var(--surface); }
.auth__brandside{ position:relative; background:linear-gradient(150deg,var(--brand-800),var(--brand-600) 55%,var(--brand-400));
  color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth__brandside::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(600px 400px at 80% 10%, rgba(255,255,255,.14), transparent 60%),
  radial-gradient(500px 400px at 10% 90%, rgba(255,255,255,.10), transparent 60%); }
.auth__brandside > *{ position:relative; z-index:1; }
.auth__logo{ background:#fff; border-radius:14px; padding:14px 18px; display:inline-flex; width:max-content; box-shadow:var(--shadow); }
.auth__logo img{ height:40px; }
.auth__tag h2{ color:#fff; font-size:1.9rem; line-height:1.2; }
.auth__tag p{ color:rgba(255,255,255,.85); margin-top:12px; max-width:420px; font-size:1rem; }
.auth__feat{ display:flex; gap:10px; align-items:center; color:rgba(255,255,255,.92); font-size:.9rem; margin-top:12px; }
.auth__feat .ico{ width:20px; height:20px; }
.auth__form{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px 88px; position:relative; }
.auth__card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow); }
.auth__card h1{ margin-bottom:6px; }
.auth__card .sub{ color:var(--ink-3); margin-bottom:28px; }
.toggle-pass{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:22px; height:22px;
  color:var(--ink-3); cursor:pointer; background:transparent; border:none; padding:0; }
.form-row-between{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 24px; font-size:.8125rem; }
.check{ display:flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer; }
.check input{ width:16px; height:16px; accent-color:var(--primary); }
@media (max-width:860px){ .auth{ grid-template-columns:1fr; } .auth__brandside{ display:none; } }

/* ==========================================================================
   İÇ İLETİŞİM — WhatsApp benzeri gelişmiş sohbet modülü (modüler)
   ========================================================================== */
.chat{
  display:grid; grid-template-columns:340px 1fr; gap:0;
  height:calc(100dvh - var(--topbar-h) - 150px); min-height:560px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
}
.chat.info-open{ grid-template-columns:340px 1fr 320px; }

/* ---- Sol: sohbet listesi ---- */
.chat__list{ display:flex; flex-direction:column; border-right:1px solid var(--line); min-width:0; background:var(--surface); }
.chat__list-top{ padding:14px 14px 10px; border-bottom:1px solid var(--line-2); flex-shrink:0; }
.chat__list-top .row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.chat__me{ display:flex; align-items:center; gap:10px; min-width:0; }
.chat-search{ position:relative; }
.chat-search .ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); }
.chat-search input{ width:100%; padding:9px 12px 9px 36px; border:1px solid var(--line); border-radius:var(--r-pill);
  font:inherit; font-size:.875rem; background:var(--surface-2); color:var(--ink); }
.chat-search input:focus{ outline:none; border-color:var(--brand-300); background:#fff; }
.chat__convs{ flex:1; overflow-y:auto; padding:6px; }
.chat__convs::-webkit-scrollbar{ width:8px; } .chat__convs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.conv{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:none; background:transparent;
  border-radius:var(--r); cursor:pointer; text-align:left; font:inherit; position:relative; }
.conv:hover{ background:var(--surface-2); }
.conv.active{ background:var(--primary-soft); }
.conv__av{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--brand-100); color:var(--brand-700); font-weight:700; font-size:.9rem; position:relative; }
.conv__av .ico{ width:22px; height:22px; }
.conv__av.online::after{ content:""; position:absolute; right:1px; bottom:1px; width:11px; height:11px; border-radius:50%;
  background:var(--success); border:2px solid #fff; }
.conv__main{ flex:1; min-width:0; }
.conv__name{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.875rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv__last{ display:block; font-size:.75rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.conv__last .ico{ width:13px; height:13px; vertical-align:-2px; margin-right:3px; color:var(--ink-3); }
.conv__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.conv__time{ font-size:.6875rem; color:var(--ink-3); }
.conv__badge{ min-width:19px; height:19px; padding:0 5px; border-radius:var(--r-pill); background:var(--primary); color:#fff;
  font-size:.6875rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ---- Orta: konuşma ---- */
.chat__main{ display:flex; flex-direction:column; min-width:0; background:#ECE5DC;
  background-image:radial-gradient(rgba(44,107,34,.045) 1px, transparent 1px); background-size:22px 22px; }
.chat__top{ display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--surface);
  border-bottom:1px solid var(--line); flex-shrink:0; }
.chat__back{ display:none; width:36px; height:36px; border:none; background:transparent; color:var(--ink); cursor:pointer; border-radius:8px; }
.chat__back .ico{ width:22px; height:22px; color:var(--ink); }
.chat__back:hover{ background:var(--surface-2); }
.chat__top-av{ width:42px; height:42px; border-radius:50%; background:var(--brand-100); color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; cursor:pointer; }
.chat__top-av .ico{ width:20px; height:20px; }
.chat__top-info{ flex:1; min-width:0; cursor:pointer; }
.chat__top-name{ font-weight:700; font-size:.95rem; color:var(--ink); }
.chat__top-sub{ font-size:.75rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat__top-sub .on{ color:var(--success); font-weight:600; }
.chat__top-acts{ display:flex; align-items:center; gap:2px; }
.chat-ico{ width:38px; height:38px; border:none; background:transparent; color:var(--ink-2); cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center; }
.chat-ico:hover{ background:var(--surface-2); color:var(--ink); }
.chat-ico .ico{ width:20px; height:20px; }

.chat__body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:8px; }
.chat__body::-webkit-scrollbar{ width:8px; } .chat__body::-webkit-scrollbar-thumb{ background:rgba(20,48,12,.16); border-radius:8px; }
.day-sep{ align-self:center; background:rgba(255,255,255,.92); color:var(--ink-3); font-size:.6875rem; font-weight:700;
  padding:4px 12px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); margin:6px 0; text-transform:uppercase; letter-spacing:.03em; }

.msg{ max-width:76%; align-self:flex-start; }
.msg.out{ align-self:flex-end; }
.msg__b{ background:#fff; border-radius:2px 12px 12px 12px; padding:7px 11px 6px; box-shadow:var(--shadow-sm); position:relative; }
.msg.out .msg__b{ background:var(--primary-soft); border-radius:12px 2px 12px 12px; }
.msg__name{ display:block; font-size:.75rem; font-weight:700; color:var(--brand-600); margin-bottom:2px; }
.msg__txt{ font-size:.875rem; color:var(--ink); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.msg__meta{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:2px; }
.msg__time{ font-size:.625rem; color:var(--ink-3); }
.msg.out .msg__time{ color:var(--brand-700); opacity:.75; }
.tick{ width:16px; height:16px; color:var(--ink-3); }
.msg.out .tick.read{ color:#2F76C0; }

/* mesaj ekleri */
.msg-img{ display:block; max-width:240px; border-radius:9px; margin-bottom:4px; cursor:pointer; }
.msg-doc{ display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.04); border-radius:9px; padding:9px 11px; margin-bottom:4px; min-width:210px; }
.msg.out .msg-doc{ background:rgba(255,255,255,.5); }
.msg-doc__ic{ width:38px; height:38px; border-radius:8px; background:var(--danger-soft); color:var(--danger);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.msg-doc__ic .ico{ width:20px; height:20px; }
.msg-doc__body{ flex:1; min-width:0; }
.msg-doc__name{ font-size:.8125rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-doc__meta{ font-size:.6875rem; color:var(--ink-3); margin-top:1px; }
.msg-doc__acts{ display:flex; gap:1px; flex-shrink:0; }
.doc-btn{ width:30px; height:30px; border:none; background:transparent; color:var(--ink-2); cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center; }
.doc-btn:hover{ background:rgba(0,0,0,.08); color:var(--ink); }
.doc-btn .ico{ width:17px; height:17px; }
.msg-media{ position:relative; display:inline-block; line-height:0; }
.media-dl{ position:absolute; top:7px; right:7px; width:32px; height:32px; border:none; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.media-dl:hover{ background:rgba(0,0,0,.72); }
.media-dl .ico{ width:16px; height:16px; }
.msg-audio{ display:flex; align-items:center; gap:10px; min-width:210px; }
.msg-audio__play{ width:38px; height:38px; border-radius:50%; border:none; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.msg-audio__play .ico{ width:18px; height:18px; }
.msg-audio__wave{ flex:1; display:flex; align-items:center; gap:2px; height:26px; }
.msg-audio__wave i{ flex:1; background:var(--brand-300); border-radius:2px; }
.msg-audio__dur{ font-size:.6875rem; color:var(--ink-3); flex-shrink:0; }

/* ---- Composer ---- */
.composer{ padding:10px 14px; background:var(--surface); border-top:1px solid var(--line); flex-shrink:0; position:relative; }
.composer__row{ display:flex; align-items:flex-end; gap:8px; }
.composer__row > .c-ico{ width:46px; height:46px; }
.composer__field{ flex:1; display:flex; align-items:flex-end; gap:6px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:20px; padding:5px 6px 5px 14px; }
.composer__field:focus-within{ border-color:var(--brand-300); background:#fff; }
.composer__ta{ flex:1; border:none; background:transparent; resize:none; font:inherit; font-size:.9rem; color:var(--ink);
  line-height:1.4; padding:7px 0; max-height:120px; }
.composer__ta:focus{ outline:none; }
.c-ico{ width:38px; height:38px; border:none; background:transparent; color:var(--ink-2); cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.c-ico:hover{ background:rgba(0,0,0,.05); color:var(--ink); }
.c-ico .ico{ width:22px; height:22px; }
.composer__send{ width:46px; height:46px; border-radius:50%; border:none; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-shadow:var(--shadow-sm); }
.composer__send:hover{ background:var(--primary-hover); }
.composer__send .ico{ width:22px; height:22px; }

/* ek menüsü (WhatsApp ataç) */
.attach-menu{ position:absolute; left:14px; bottom:70px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; width:230px; display:none; z-index:20; }
.attach-menu.open{ display:block; }
.attach-item{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:none; background:transparent;
  border-radius:10px; cursor:pointer; text-align:left; font:inherit; font-size:.875rem; font-weight:600; color:var(--ink); }
.attach-item:hover{ background:var(--surface-2); }
.attach-item .ai{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.attach-item .ai .ico{ width:18px; height:18px; }
.ai-doc{ background:#5B5FC7; } .ai-photo{ background:#C2408A; } .ai-cam{ background:#D6433B; }
.ai-audio{ background:#C9821B; } .ai-rem{ background:var(--primary); }

/* kayıt çubuğu */
.rec-bar{ display:none; align-items:center; gap:12px; width:100%; padding:6px 6px 6px 16px; }
.rec-bar.on{ display:flex; }
.rec-dot{ width:12px; height:12px; border-radius:50%; background:var(--danger); animation:recpulse 1.1s infinite; }
@keyframes recpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.rec-time{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); }
.rec-hint{ flex:1; color:var(--ink-3); font-size:.8125rem; }

/* ---- Sağ: bilgi paneli ---- */
.chat__info{ border-left:1px solid var(--line); background:var(--surface); overflow-y:auto; display:none; }
.chat.info-open .chat__info{ display:block; }
.chat__info::-webkit-scrollbar{ width:8px; } .chat__info::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.info__top{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line-2); }
.info__top h4{ font-size:.95rem; margin:0; }
.info__hero{ text-align:center; padding:22px 18px; border-bottom:8px solid var(--line-2); }
.info__hero-av{ width:96px; height:96px; border-radius:50%; background:var(--brand-100); color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.info__hero-av .ico{ width:44px; height:44px; }
.info__hero h3{ font-size:1.15rem; margin:0 0 3px; }
.info__hero p{ font-size:.8125rem; color:var(--ink-3); margin:0; }
.info__section{ padding:14px 16px; border-bottom:8px solid var(--line-2); }
.info__section:last-child{ border-bottom:none; }
.info__label{ font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.info__desc{ font-size:.875rem; color:var(--ink-2); line-height:1.5; }
.media-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.media-tile{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 8px 11px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; font:inherit;
  box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s; }
.media-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-200); }
.media-tile .mt-ic{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.media-tile .mt-ic .ico{ width:20px; height:20px; }
.media-tile .mt-ic.m1{ background:var(--info-soft); color:var(--info); }
.media-tile .mt-ic.m2{ background:var(--danger-soft); color:var(--danger); }
.media-tile .mt-ic.m3{ background:var(--primary-soft); color:var(--primary); }
.media-tile .mt-label{ font-size:.75rem; font-weight:700; color:var(--ink); }
.media-tile .mt-count{ font-size:.6875rem; color:var(--ink-3); }
.reminder{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.reminder:last-child{ border-bottom:none; }
.reminder__ic{ width:34px; height:34px; border-radius:9px; background:var(--warning-soft); color:var(--warning);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.reminder__ic .ico{ width:17px; height:17px; }
.reminder__t{ font-size:.8125rem; font-weight:600; color:var(--ink); }
.reminder__d{ font-size:.6875rem; color:var(--ink-3); margin-top:1px; }
.member{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.member__av{ width:36px; height:36px; border-radius:50%; background:var(--brand-100); color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.75rem; flex-shrink:0; }
.member__main{ flex:1; min-width:0; }
.member__n{ font-size:.8125rem; font-weight:600; color:var(--ink); }
.member__r{ font-size:.6875rem; color:var(--ink-3); }
.member__rm{ width:28px; height:28px; border:none; background:transparent; color:var(--ink-3); cursor:pointer;
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.5; }
.member:hover .member__rm{ opacity:1; }
.member__rm:hover{ background:var(--danger-soft); color:var(--danger); }
.member__rm .ico{ width:16px; height:16px; }

/* üye seçim listesi (modal) */
.pick-list{ max-height:340px; overflow-y:auto; margin:-4px -4px 0; padding:0 4px; }
.pick-row{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--line-2); cursor:pointer; }
.pick-row:last-child{ border-bottom:none; }
.pick-row input{ width:18px; height:18px; accent-color:var(--primary); flex-shrink:0; }
.pick-empty{ text-align:center; color:var(--ink-3); font-size:.85rem; padding:24px; }

/* gelişmiş emoji seçici */
.emoji-pop{ position:absolute; left:14px; bottom:70px; width:340px; height:310px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); display:none; flex-direction:column; overflow:hidden; z-index:25; }
.emoji-pop.open{ display:flex; }
.emoji-tabs{ display:flex; border-bottom:1px solid var(--line-2); padding:5px; gap:2px; flex-shrink:0; }
.emoji-tabs button{ flex:1; border:none; background:transparent; cursor:pointer; font-size:1.2rem; padding:6px 0; border-radius:9px; line-height:1; filter:grayscale(.3); opacity:.6; }
.emoji-tabs button.active{ background:var(--primary-soft); opacity:1; filter:none; }
.emoji-grid{ flex:1; overflow-y:auto; padding:8px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; align-content:start; }
.emoji-grid::-webkit-scrollbar{ width:8px; } .emoji-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.emoji-grid button{ border:none; background:transparent; cursor:pointer; font-size:1.4rem; padding:5px 0; border-radius:9px; line-height:1; }
.emoji-grid button:hover{ background:var(--surface-2); }
.info-toggle{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; }
.info-toggle span{ font-size:.875rem; color:var(--ink); font-weight:600; }
.switch{ width:40px; height:23px; border-radius:99px; background:var(--line); position:relative; cursor:pointer; border:none; flex-shrink:0; transition:background .2s; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:left .2s; }
.switch.on{ background:var(--primary); } .switch.on::after{ left:19px; }

/* ---- Responsive ---- */
@media (max-width:1180px){
  .chat.info-open{ grid-template-columns:340px 1fr; }
  .chat.info-open .chat__info{ position:fixed; top:0; right:0; width:min(360px,88vw); height:100dvh; z-index:60; box-shadow:var(--shadow-lg); }
}
@media (max-width:820px){
  /* İç İletişim: mobilde tam-ekran; composer daima görünür (flex-fill, tarayıcı çubuğu güvenli) */
  body[data-page="iletisim"]{ overflow:hidden; }
  /* Kenar-çubuğu düzeni: .main tam ekran flex sütun */
  body[data-page="iletisim"] .main{ display:flex; flex-direction:column; height:100dvh; min-height:0; }
  /* Üst-menü düzeni: layout 100dvh flex sütun, main--center kalanı doldurur */
  body[data-page="iletisim"] .layout--center{ display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
  body[data-page="iletisim"] .main--center{ flex:1 1 auto !important; height:auto !important; min-height:0; }
  body[data-page="iletisim"] .content{ flex:1; min-height:0; display:flex; flex-direction:column; padding:8px !important; overflow:hidden; }
  body[data-page="iletisim"] .page-head{ display:none; }
  .chat{ display:block; flex:1 1 auto; height:auto; min-height:0; border-radius:14px; }
  .chat__list, .chat__main{ height:100%; }
  .chat__main{ display:none; }
  .chat.chat--open .chat__list{ display:none; }
  .chat.chat--open .chat__main{ display:flex; }
  .chat__back{ display:flex; align-items:center; justify-content:center; }
  .chat.info-open{ display:block; }
  .chat__top{ padding:8px 10px; gap:8px; }
  .chat__top-acts{ gap:0; }
  .chat__body{ padding:14px 12px; }
  .composer{ padding:8px 10px; }
  .emoji-pop{ width:min(340px, calc(100vw - 24px)); height:270px; left:12px; bottom:66px; }
  .attach-menu{ left:12px; bottom:66px; }
  .chat__list-top{ padding:12px 12px 8px; }
  .conv{ padding:9px 10px; }
}

/* ==========================================================================
   E-AJANDA — gerçekçi günlük ajanda / takvim (modüler)
   ========================================================================== */
.agenda-toolbar{ display:flex; gap:12px; align-items:stretch; margin-bottom:16px; flex-wrap:wrap; }
.agenda-toolbar .chat-search{ flex:1; min-width:240px; display:flex; }
.agenda-toolbar .chat-search input{ height:46px; border-radius:12px; padding:0 14px 0 38px; }
.agenda-toolbar .chat-search .ico{ top:23px; }
.agenda-toolbar .tabs{ height:46px; border-radius:12px; padding:4px; margin-bottom:0; align-items:center; overflow:visible; flex-shrink:0; }
.agenda-toolbar .tabs button{ height:36px; display:inline-flex; align-items:center; padding:0 15px; border-radius:9px; }

/* etiket renk paleti (CSS değişkenleriyle) */
.tag-satis{ --tc:#2F76C0; --tb:#E5EFFA; }
.tag-sevkiyat{ --tc:#2E9E4F; --tb:#E6F5EC; }
.tag-tedarik{ --tc:#C9821B; --tb:#FBF0DC; }
.tag-uretim{ --tc:#7A5AF8; --tb:#EDEAFD; }
.tag-ihracat{ --tc:#149E93; --tb:#DEF5F2; }
.tag-toplanti{ --tc:#2C6B22; --tb:#EAF4E1; }
.tag-kisisel{ --tc:#5F6B64; --tb:#EEF2EC; }
.ag-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  background:var(--tb); color:var(--tc); font-size:.6875rem; font-weight:700; white-space:nowrap; }
.ag-tag .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Günlük görünüm — kağıt ajanda */
.agenda-day{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.agenda-day__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-700)); color:#fff; }
.agenda-day__nav{ width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.agenda-day__nav:hover{ background:rgba(255,255,255,.3); }
.agenda-day__nav .ico{ width:20px; height:20px; }
.agenda-day__title{ text-align:center; flex:1; }
.agenda-day__title b{ font-size:1.35rem; display:block; line-height:1.1; }
.agenda-day__title span{ font-size:.8125rem; opacity:.88; }
.agenda-today{ margin-left:8px; padding:6px 12px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.4);
  background:transparent; color:#fff; font:inherit; font-size:.75rem; font-weight:700; cursor:pointer; }
.agenda-today:hover{ background:rgba(255,255,255,.15); }

.agenda-grid{ position:relative; max-height:600px; overflow-y:auto; }
.agenda-grid::-webkit-scrollbar{ width:9px; } .agenda-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.agenda-row{ display:flex; height:110px; }
.agenda-row__label{ width:74px; flex-shrink:0; text-align:right; padding:3px 12px 0 0; font-size:.75rem; font-weight:700;
  color:var(--ink-3); border-right:1px solid var(--line); font-variant-numeric:tabular-nums; }
.agenda-row__cell{ flex:1; border-top:1px solid var(--line-2); cursor:pointer; position:relative; }
.agenda-row:first-child .agenda-row__cell{ border-top:none; }
.agenda-row__cell:hover{ background:var(--surface-2); }
.agenda-row__cell:hover::after{ content:"+ görev ekle"; position:absolute; left:10px; top:4px; font-size:.7rem; color:var(--ink-3); }
.agenda-events{ position:absolute; top:0; left:74px; right:0; bottom:0; pointer-events:none; }
.agenda-event{ position:absolute; left:8px; right:10px; border-radius:9px; padding:6px 10px; overflow:hidden; cursor:pointer;
  pointer-events:auto; background:var(--tb); border-left:4px solid var(--tc); box-shadow:var(--shadow-sm); }
.agenda-event:hover{ box-shadow:var(--shadow); }
.agenda-event .ae-t{ font-size:.6875rem; font-weight:700; color:var(--tc); display:flex; align-items:center; gap:5px; line-height:1.3; }
.agenda-event b{ font-size:.8125rem; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; margin-top:1px; }
.agenda-event small{ font-size:.6875rem; color:var(--ink-2); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agenda-event .ico{ width:12px; height:12px; }
.agenda-now{ position:absolute; left:74px; right:0; height:2px; background:var(--danger); z-index:6; pointer-events:none; }
.agenda-now::before{ content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--danger); }
.agenda-now span{ position:absolute; left:6px; top:-9px; font-size:.625rem; font-weight:700; color:var(--danger); background:var(--surface); padding:0 4px; }

/* Kartlar görünümü */
.agenda-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.ag-card{ border:1px solid var(--line); border-left:4px solid var(--tc); border-radius:var(--r); padding:14px 16px;
  background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; }
.ag-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); transition:.15s; }
.ag-card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.ag-card__time{ font-weight:700; color:var(--tc); font-size:.8125rem; font-variant-numeric:tabular-nums; }
.ag-card__title{ font-weight:700; font-size:.9375rem; color:var(--ink); }
.ag-card__firm{ font-size:.75rem; color:var(--ink-3); margin-top:2px; display:flex; align-items:center; gap:5px; }
.ag-card__note{ font-size:.8125rem; color:var(--ink-2); margin-top:8px; line-height:1.45; }
.ag-card__rem{ display:inline-flex; align-items:center; gap:5px; font-size:.6875rem; color:var(--warning); font-weight:600; margin-top:8px; }
.ag-card__rem .ico{ width:13px; height:13px; }

@media (max-width:640px){
  .agenda-day__title b{ font-size:1.1rem; }
  .agenda-row__label{ width:58px; font-size:.7rem; }
  .agenda-events, .agenda-now{ left:58px; }
}

/* ==========================================================================
   Sidebar alt profil (dropup menü) — Profilim / Kullanıcılar / Firma Ayarları
   ========================================================================== */
.sidebar__foot{ border-top:1px solid var(--line-2); padding:10px; flex-shrink:0; }
.sidebar__foot .dd{ position:relative; }
.side-profile{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid transparent;
  background:transparent; border-radius:12px; cursor:pointer; font:inherit; text-align:left; }
.side-profile:hover{ background:var(--surface-2); }
.dd.open .side-profile{ background:var(--surface-2); border-color:var(--line); }
.side-profile__av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8125rem; flex-shrink:0; }
.side-profile__meta{ flex:1; min-width:0; }
.side-profile__name{ display:block; font-weight:700; font-size:.8125rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-profile__role{ display:block; font-size:.6875rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-profile__caret{ width:16px; height:16px; color:var(--ink-3); flex-shrink:0; transition:transform .2s; }
.dd.open .side-profile__caret{ transform:rotate(180deg); }
/* dropup: yukarı açılan panel */
.dd-up .dd-panel{ position:absolute; top:auto; bottom:calc(100% + 10px); left:0; right:0; width:auto; }
/* daraltılmış sidebar: sadece avatar + panel sabit genişlik */
body.sidebar-collapsed .side-profile{ justify-content:center; padding:8px; }
body.sidebar-collapsed .side-profile__meta, body.sidebar-collapsed .side-profile__caret{ display:none; }
body.sidebar-collapsed .dd-up .dd-panel{ left:6px; right:auto; width:232px; }

/* ==========================================================================
   Kullanıcı & Rol Yönetimi (gelişmiş)
   ========================================================================== */
.mail-split{ display:flex; align-items:stretch; }
.mail-split .input{ border-top-right-radius:0; border-bottom-right-radius:0; min-width:0; }
.mail-split .at{ display:flex; align-items:center; padding:0 10px; background:var(--surface-2);
  border:1px solid var(--line); border-left:0; color:var(--ink-3); font-weight:600; }
.mail-split .select{ border-top-left-radius:0; border-bottom-left-radius:0; border-left:0; width:auto; flex-shrink:0; }

.perm-preview{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; }
.perm-preview .lbl{ font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.perm-preview .chip-row{ display:flex; flex-wrap:wrap; gap:6px; }

.role-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.role-card{ border:1px solid var(--line); border-radius:14px; padding:15px 15px 14px; background:var(--surface); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; border-top:3px solid var(--tc,var(--primary)); }
.role-card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.role-card__top h4{ margin:0; font-size:.95rem; }
.role-card__meta{ font-size:.72rem; color:var(--ink-3); margin:4px 0 12px; }
.role-card__stats{ display:flex; gap:10px; margin-bottom:12px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:11px; }
.role-card__stats > div{ flex:1; }
.role-card__stats b{ display:block; font-size:1.05rem; font-weight:800; line-height:1.1; }
.role-card__stats span{ font-size:.66rem; color:var(--ink-3); }
.role-card .btn{ margin-top:auto; }

.perm-matrix{ width:100%; border-collapse:collapse; font-size:.8125rem; }
.perm-matrix th, .perm-matrix td{ padding:9px 8px; border-bottom:1px solid var(--line-2); text-align:center; white-space:nowrap; }
.perm-matrix thead th{ font-size:.6875rem; color:var(--ink-3); text-transform:uppercase; font-weight:700; }
.perm-matrix th.mod, .perm-matrix td.mod{ text-align:left; font-weight:600; color:var(--ink); position:sticky; left:0; background:var(--surface); }
.perm-matrix input{ width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.perm-matrix tbody tr:hover{ background:var(--surface-2); }

/* ==========================================================================
   ÜST-MENÜ (MERKEZ) DÜZENİ — sidebar'sız, giriş görseli mantığı
   ========================================================================== */
.layout--center .main--center{ margin-left:0; }
.topnav{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
.topnav__inner{ display:flex; align-items:center; gap:16px; height:var(--topbar-h); padding:0 max(24px, calc((100% - 1480px) / 2)); }
.topnav__brand{ display:flex; align-items:center; flex-shrink:0; }
.topnav__brand img{ height:28px; width:auto; display:block; }
.topnav__nav{ display:flex; align-items:center; gap:6px; }
.topnav__link{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:11px; border:none;
  background:transparent; cursor:pointer; font:inherit; font-weight:600; font-size:.9rem; color:var(--ink-2); }
.topnav__link:hover{ background:var(--surface-2); color:var(--ink); }
.topnav__link.active{ background:var(--primary-soft); color:var(--primary); }
.topnav__link .ico{ width:18px; height:18px; }
.topnav__link .caret{ width:15px; height:15px; color:var(--ink-3); transition:transform .2s; }
.dd.open .topnav__link .caret{ transform:rotate(180deg); }
.topnav__spacer{ flex:1; }
.topnav__actions{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.topnav__search{ flex:0 1 460px; max-width:460px; margin:0 20px 0 8px; }
.main--center .content{ max-width:none; margin:0; padding-left:max(24px, calc((100% - 1480px) / 2)); padding-right:max(24px, calc((100% - 1480px) / 2)); }

/* Modüller mega menü */
.mega-panel{ width:min(700px,92vw); left:0; right:auto; padding:12px; }
.mega-group{ font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:10px 8px 4px; }
.mega-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }
.mega-item{ display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:10px; color:var(--ink-2); }
.mega-item:hover{ background:var(--surface-2); color:var(--ink); }
.mega-item.active{ background:var(--primary-soft); color:var(--primary); }
.mega-ic{ width:34px; height:34px; border-radius:9px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mega-ic .ico{ width:18px; height:18px; }
.mega-lbl{ font-weight:600; font-size:.85rem; }
@media (max-width:760px){
  .topnav__inner{ gap:4px; padding:0 10px; overflow:hidden; }
  .topnav__link span{ display:none; }
  .topnav__link{ padding:0 10px; }
  .topnav__brand{ display:none; }
  .mega-list{ grid-template-columns:1fr 1fr; }
  .mega-panel{ left:8px !important; right:8px !important; max-height:calc(100dvh - var(--topbar-h) - 18px); overflow-y:auto; }
  .topnav__spacer, .topnav__search{ display:none; }
  .topnav__actions{ gap:0; margin-left:auto; }
  .topnav__actions .icon-btn{ width:38px; height:38px; }
  .userchip{ padding:3px 4px; }
}
@media (max-width:400px){
  .topnav .topnav__link{ display:none; }   /* Panel yazısı gizli; logo ana sayfaya gider, Modüller mega menüde */
  .topnav__actions .icon-btn{ width:34px; }
}

/* ==========================================================================
   GÖRÜNÜM AYARLARI MODALI (tema + menü düzeni)
   ========================================================================== */
.pref-sec{ font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.pref-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pref-opt{ position:relative; text-align:left; border:2px solid var(--line); border-radius:14px; padding:12px; background:var(--surface); cursor:pointer; font:inherit; }
.pref-opt:hover{ border-color:var(--brand-300); }
.pref-opt.active{ border-color:var(--primary); background:var(--primary-soft); }
.pref-opt__t{ display:block; font-weight:700; font-size:.9rem; color:var(--ink); margin-top:10px; }
.pref-opt__d{ display:block; font-size:.72rem; color:var(--ink-3); margin-top:2px; }
.pref-opt__tick{ position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; display:none; align-items:center; justify-content:center; }
.pref-opt__tick .ico{ width:14px; height:14px; }
.pref-opt.active .pref-opt__tick{ display:flex; }
.pv{ display:block; height:76px; border-radius:9px; overflow:hidden; border:1px solid var(--line); position:relative; }
.pv-bar{ display:block; height:15px; width:100%; }
.pv-row{ display:flex; gap:6px; padding:9px; }
.pv-row span{ flex:1; height:34px; border-radius:5px; border:1px solid rgba(128,128,128,.15); display:block; }
.pv-side{ position:absolute; left:0; top:0; bottom:0; width:26%; background:#2C6B22; }
.pv-main{ position:absolute; left:26%; right:0; top:0; bottom:0; display:flex; gap:6px; padding:9px; }
.pv-main span{ flex:1; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:5px; }
.pv-top{ position:absolute; left:0; right:0; top:0; height:16px; background:#2C6B22; }
.pv-tiles{ position:absolute; left:0; right:0; top:16px; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:9px; }
.pv-tiles span{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:5px; }
@media (max-width:480px){ .pref-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   KOYU TEMA (dark) — sıfırdan token seti + bileşen düzeltmeleri
   ========================================================================== */
html[data-theme="dark"]{
  --brand-800:#3C8A2E; --brand-700:#4A9A38; --brand-600:#57A945; --brand-500:#6BBF52; --brand-400:#82CF6A;
  --primary:#5FB84E; --primary-hover:#71C85E; --primary-soft:#1E2A18; --accent:#8FD46E;
  --ink:#E7ECE7; --ink-2:#ADB8AF; --ink-3:#8A968C;
  --line:#2A332C; --line-2:#222A23;
  --bg:#0E130F; --surface:#161D18; --surface-2:#1D251E;
  --success:#4FB86A; --success-soft:#15281B;
  --warning:#E0A23A; --warning-soft:#2C2413;
  --danger:#EF6B63; --danger-soft:#2E1918;
  --info:#5AA0E6; --info-soft:#14243A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.5);
  --shadow-lg:0 14px 36px rgba(0,0,0,.62);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .topnav{ background:var(--surface); }
html[data-theme="dark"] .input, html[data-theme="dark"] .select,
html[data-theme="dark"] .searchbar input:focus,
html[data-theme="dark"] .chat-search input, html[data-theme="dark"] .chat-search input:focus,
html[data-theme="dark"] .composer__field:focus-within,
html[data-theme="dark"] .puantaj td select{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--ink-3); }
html[data-theme="dark"] .dd-panel, html[data-theme="dark"] .modal,
html[data-theme="dark"] .toast, html[data-theme="dark"] .info-pop{ background:var(--surface); border:1px solid var(--line); }
html[data-theme="dark"] .icon-btn-sm, html[data-theme="dark"] .chip,
html[data-theme="dark"] .btn-outline{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
html[data-theme="dark"] .btn-outline:hover{ background:var(--surface); color:var(--ink); }
html[data-theme="dark"] .tabs .active{ background:var(--surface); color:var(--primary); }
html[data-theme="dark"] .searchbar{ background:var(--surface-2); border-color:var(--line); }
html[data-theme="dark"] .donut::after{ background:var(--surface); }
html[data-theme="dark"] .badge-success{ color:#6FD98A; }
html[data-theme="dark"] .badge-warning{ color:#EABB63; }
html[data-theme="dark"] .badge-danger{ color:#F28C85; }
html[data-theme="dark"] .badge-info{ color:#84B8EF; }
html[data-theme="dark"] .kpi__meta.pos{ color:#6FD98A; } html[data-theme="dark"] .kpi__meta.pos .dot{ background:#6FD98A; }
html[data-theme="dark"] .kpi__meta.neg{ color:#F28C85; } html[data-theme="dark"] .kpi__meta.neg .dot{ background:#F28C85; }
html[data-theme="dark"] .kpi .kpi__icon{ background:rgba(255,255,255,.07); }
html[data-theme="dark"] .puantaj td.sari{ background:#3A2E12; color:#EABB63; }
html[data-theme="dark"] .howto .mark{ background:#3A2E12; color:#EABB63; }
html[data-theme="dark"] .conv__av.online::after{ border-color:var(--surface); }
html[data-theme="dark"] .chat__main{ background:#10160F; background-image:radial-gradient(rgba(120,200,90,.05) 1px, transparent 1px); }
html[data-theme="dark"] .msg__b{ background:var(--surface-2); }
html[data-theme="dark"] .day-sep{ background:rgba(30,40,32,.92); color:var(--ink-3); }
html[data-theme="dark"] .msg-doc{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] .msg.out .msg-doc{ background:rgba(0,0,0,.25); }
html[data-theme="dark"] .tag-satis, html[data-theme="dark"] .tag-sevkiyat, html[data-theme="dark"] .tag-tedarik,
html[data-theme="dark"] .tag-uretim, html[data-theme="dark"] .tag-ihracat, html[data-theme="dark"] .tag-toplanti,
html[data-theme="dark"] .tag-kisisel{ --tb:#20281F; }
html[data-theme="dark"] .empty-state .es-ring{ border-color:var(--line); }
html[data-theme="dark"] .auth{ background:var(--bg); }
html[data-theme="dark"] .auth__card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; }

/* Üst-menü modunda dashboard üstündeki büyük modül kutucukları */
.tiles--hero{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:28px; }
.tiles--hero .tile{ padding:20px 22px; border-radius:16px; }
.tiles--hero .tile__ic{ width:54px; height:54px; border-radius:15px; }
.tiles--hero .tile__ic .ico{ width:26px; height:26px; }
.tiles--hero .tile__name{ font-size:1.02rem; }
.tiles--hero .tile__go{ width:20px; height:20px; }
.layout--center .content > .section-title{ font-size:.9rem; }

/* Bilgilendirme kutuları (.howto) — koyu mod okunabilirliği */
html[data-theme="dark"] .howto{ background:#16210F; border-color:#26351A; }
html[data-theme="dark"] .howto ul{ color:var(--ink-2); }
html[data-theme="dark"] .howto .mark-r{ color:#F28C85; }
html[data-theme="dark"] .howto code{ background:rgba(255,255,255,.06); color:var(--ink); padding:1px 5px; border-radius:4px; }

/* Uyarı paneli bileşeni (.alert) — her iki temada tutarlı */
.alert{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; border:1px solid transparent; }
.alert__ic{ flex-shrink:0; }
.alert__ic .ico{ width:22px; height:22px; }
.alert__title{ display:block; margin-bottom:2px; font-weight:700; }
.alert-warning{ background:var(--warning-soft); border-color:#ECCB86; color:#8A590C; }
.alert-warning .alert__ic, .alert-warning .alert__title, .alert-warning b{ color:#8A590C; }
html[data-theme="dark"] .alert-warning{ background:rgba(224,162,58,.10); border-color:rgba(224,162,58,.38); color:#EEC873; }
html[data-theme="dark"] .alert-warning .alert__ic, html[data-theme="dark"] .alert-warning .alert__title, html[data-theme="dark"] .alert-warning b{ color:#EEC873; }

/* Puantaj tablosu — koyu mod: isim sütunu ve durum renkleri */
html[data-theme="dark"] .puantaj .pname{ background:var(--surface); color:var(--ink); }
html[data-theme="dark"] .puantaj thead .pname{ background:var(--brand-800); color:#fff; }
html[data-theme="dark"] .puantaj tbody tr:hover .pname{ background:var(--surface-2); }
html[data-theme="dark"] .puantaj td.rapor{ color:#EABB63; }
html[data-theme="dark"] .puantaj td.hol{ color:#F28C85; }
html[data-theme="dark"] .puantaj td.we{ background:var(--surface-2); color:var(--ink-3); }

/* Giriş ekranı — mobil logo, kredi ve tema butonu */
.auth__mlogo{ display:none; height:88px; width:auto; margin:0 auto 32px; }
@media (max-width:860px){ .auth__mlogo{ display:block; } }
.auth__credit{ text-align:center; line-height:1.55; position:absolute; left:0; right:0; bottom:20px; }
.auth__credit .pb{ display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.625rem; color:var(--ink-3); margin-bottom:3px; }
.auth__credit .n1{ display:block; font-weight:700; color:var(--ink); font-size:.9375rem; }
.auth__credit .n2{ display:block; font-size:.8125rem; color:var(--ink-2); }
.auth__theme{ position:fixed; top:18px; right:18px; z-index:5; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.auth__theme:hover{ color:var(--ink); border-color:var(--brand-300); }
.auth__theme .ico{ width:20px; height:20px; }

/* Mobil — başlık alanı (page-head) kompakt */
@media (max-width:640px){
  .page-head{ margin-bottom:16px; gap:6px; row-gap:4px; }
  .page-head .breadcrumb{ display:none; }
  .page-head .subtitle{ display:none; }
  .page-head h1{ font-size:1.2rem; }
  .page-head .icon-btn{ width:34px; height:34px; }
  .page-head .row.gap-8{ gap:6px; }
  #dPickBtn{ height:34px !important; padding:0 11px !important; font-size:.8rem !important; }
  #dPickBtn .ico:first-child{ width:14px !important; height:14px !important; }
  .section-title{ margin:0 2px 10px; }
  .content{ padding-top:14px; }
  .filters{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px; }
  .filters .searchbox{ min-width:0; }
  .filters .select{ max-width:none !important; width:100%; }
  .agenda-toolbar{ gap:10px; }
  .agenda-toolbar .select{ max-width:none !important; width:100%; }
  .page-head > .row.gap-12{ display:flex; flex-wrap:nowrap; width:100%; margin-top:16px; gap:14px; }
  .page-head > .row.gap-12 .btn{ flex:1 1 0; min-width:0; width:auto; height:44px; justify-content:center; }
  body[data-page="index"] .page-head{ flex-wrap:nowrap; align-items:center; }
  body[data-page="index"] .page-head > div:first-child{ min-width:0; }
  body[data-page="index"] .page-head h1{ font-size:1.05rem; }
  .page-head > .row.gap-8{ width:auto; margin-top:0; flex-shrink:0; gap:2px; }
  .page-head .row.gap-8 .icon-btn{ width:30px; height:30px; }
  #dPickBtn > svg:last-of-type{ display:none; }
}

/* Yatay taşma önleme — grid/inputlar (özellikle type=date) daralabilsin */
.grid > *{ min-width:0; }
.field{ min-width:0; }
.input, .select{ min-width:0; max-width:100%; }
input[type="date"], input[type="time"], input[type="datetime-local"]{ min-width:0; -webkit-appearance:none; appearance:none; }

/* ==========================================================================
   SVG İKON VARSAYILANI — bağlam kuralı olmayan yerlerde taşmayı önler.
   Daha spesifik kurallar (.btn .ico, .kpi__icon .ico vb.) bunu geçersiz kılar.
   ========================================================================== */
.ico{ width:20px; height:20px; flex-shrink:0; display:block; }

/* Yuvarlak/kare ikon kutuları: içindeki SVG'yi ortala ve taşırmama garantisi */
[class*="-ic"] > .ico, [class*="__ic"] > .ico{ display:block; }

/* ==========================================================================
   BELGE EKRANI (tam sayfa teklif / proforma / fatura) — A4 kâğıt görünümü
   ========================================================================== */
.doc-bar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; margin:-8px -8px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-sm); }
.doc-bar__t{ font-weight:700; font-size:.95rem; }
.doc-bar__s{ font-size:.72rem; color:var(--ink-3); }
.doc-bar__sp{ flex:1; }

.doc-sheet{ background:#fff; color:#17241C; max-width:1100px; margin:0 auto 24px; padding:26px 28px;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
html[data-theme="dark"] .doc-sheet{ background:#F7F9F6; }
.doc-sheet .dh{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  border-bottom:2px solid var(--brand-700); padding-bottom:12px; margin-bottom:14px; flex-wrap:wrap; }
.doc-sheet .dh img{ height:44px; width:auto; }
.doc-sheet .dh .co{ font-size:.72rem; color:#4C5A52; line-height:1.5; margin-top:6px; max-width:340px; }
.doc-sheet .dh-r{ text-align:right; }
.doc-sheet .dh-r h1{ font-size:1.35rem; color:var(--brand-800); letter-spacing:.02em; margin:0 0 6px; }
.doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:14px; }
.doc-box{ border:1px solid #DCE3D8; border-radius:10px; padding:10px 12px; }
.doc-box h4{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:#5F6B64; margin:0 0 7px; }
.doc-box .kv{ display:flex; gap:8px; font-size:.78rem; line-height:1.7; }
.doc-box .kv span:first-child{ color:#5F6B64; min-width:78px; }
.doc-box .kv b{ font-weight:600; }
.doc-inp{ border:none; border-bottom:1px dashed #B9C4B4; background:transparent; font:inherit; font-size:.8rem;
  color:#17241C; padding:1px 3px; width:100%; }
.doc-inp:focus{ outline:none; border-bottom-color:var(--brand-600); background:#F1F8EA; }

/* teklif kalem tablosu */
.qt{ width:100%; border-collapse:collapse; font-size:.72rem; }
.qt th, .qt td{ border:1px solid #CBD5C6; padding:5px 6px; text-align:center; }
.qt thead th{ background:#EDF3E8; color:#22571B; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.02em; font-weight:700; white-space:nowrap; }
.qt td.l{ text-align:left; }
.qt td.r{ text-align:right; font-variant-numeric:tabular-nums; }
.qt input, .qt select{ width:100%; min-width:44px; border:none; background:transparent; font:inherit;
  font-size:.72rem; text-align:center; color:#17241C; padding:2px; }
.qt input:focus, .qt select:focus{ outline:1px solid var(--brand-400); background:#F1F8EA; border-radius:4px; }
.qt input.r{ text-align:right; }
.qt tfoot td{ background:#EDF3E8; font-weight:800; color:#22571B; font-variant-numeric:tabular-nums; }
.qt .del{ border:none; background:transparent; color:#B32720; cursor:pointer; padding:2px 4px; }
.qt-scroll{ overflow-x:auto; margin-bottom:10px; }

.doc-terms{ font-size:.68rem; color:#4C5A52; line-height:1.65; }
.doc-terms b{ color:#17241C; }
.doc-sign{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
.doc-sign div{ border-top:1px solid #8D9A88; padding-top:6px; font-size:.7rem; text-align:center; color:#4C5A52; }
.doc-foot{ display:flex; justify-content:space-between; gap:16px; margin-top:18px; padding-top:10px;
  border-top:1px solid #DCE3D8; font-size:.7rem; color:#4C5A52; flex-wrap:wrap; }

/* durum şeridi (belge) */
.doc-status{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
@media (max-width:760px){
  .doc-grid, .doc-sign{ grid-template-columns:1fr; }
  .doc-sheet{ padding:16px 14px; }
  .doc-bar{ position:static; margin:0 0 14px; }
}

/* ==========================================================================
   ÜRETİM TAKİP PANELİ v3.1 — 2 katlı yapı, safhalar, saat bazlı sayım, fire
   ========================================================================== */
/* Durum şeridi */
.durum-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.durum-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--dc,var(--primary)); border-radius:13px; box-shadow:var(--shadow-sm); }
.durum-card .dc-ic{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:var(--dcb,var(--primary-soft)); color:var(--dc,var(--primary)); }
.durum-card .dc-ic .ico{ width:20px; height:20px; }
.durum-card .dc-n{ font-size:1.5rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.durum-card .dc-l{ font-size:.72rem; color:var(--ink-3); margin-top:3px; }

/* Kat başlığı */
.kat-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px; flex-wrap:wrap; }
.kat-head h2{ font-size:1.05rem; margin:0; }
.kat-head .kat-no{ width:26px; height:26px; border-radius:8px; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; flex-shrink:0; }

/* İş satırı (açılır) */
.job{ border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.job.open{ border-color:var(--brand-300); box-shadow:var(--shadow); }
.job__head{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:13px 16px; cursor:pointer; }
.job__head:hover{ background:var(--surface-2); }
.job__caret{ width:22px; height:22px; color:var(--ink-3); transition:transform .2s; flex-shrink:0; }
.job.open .job__caret{ transform:rotate(90deg); }
.job__title{ font-weight:700; font-size:.9375rem; }
.job__meta{ font-size:.75rem; color:var(--ink-3); margin-top:3px; display:flex; gap:12px; flex-wrap:wrap; }
.job__meta b{ color:var(--ink-2); font-weight:600; }
.job__right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.job__prog{ min-width:150px; }
.job__prog .pl{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--ink-3); margin-bottom:4px; }
.job__body{ display:none; border-top:1px solid var(--line-2); padding:16px; background:var(--surface-2); }
.job.open .job__body{ display:block; }

/* Safha zinciri */
.safhalar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.safha{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; font-size:.78rem;
  font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--ink-3); }
.safha .ico{ width:14px; height:14px; }
.safha.bitti{ background:var(--success-soft); border-color:transparent; color:#1B7A35; }
.safha.aktif{ background:var(--primary); border-color:var(--primary); color:#fff; }
.safha-ok{ color:var(--ink-3); font-size:1rem; line-height:1; }
html[data-theme="dark"] .safha.bitti{ color:#6FD98A; }

/* Sayım tablosu */
.sayim{ width:100%; border-collapse:collapse; font-size:.8125rem; }
.sayim th, .sayim td{ border:1px solid var(--line); padding:7px 9px; text-align:center; }
.sayim thead th{ background:var(--brand-600); color:#fff; font-weight:700; font-size:.75rem; }
.sayim td.saat{ font-weight:700; background:var(--surface); text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sayim input{ width:100%; min-width:70px; border:1px solid var(--line); border-radius:7px; padding:5px 7px;
  font:inherit; font-size:.8125rem; text-align:right; background:var(--surface); color:var(--ink); font-variant-numeric:tabular-nums; }
.sayim input:focus{ outline:none; border-color:var(--brand-400); }
.sayim input.isk{ color:#B32720; }
html[data-theme="dark"] .sayim input.isk{ color:#F28C85; }
.sayim tfoot td{ background:var(--brand-700); color:#fff; font-weight:800; font-variant-numeric:tabular-nums; }
.sayim tr.gun-ayrac td{ background:var(--surface-2); font-weight:700; text-align:left; color:var(--ink-2); font-size:.75rem; }

/* Fire özeti */
.fire-box{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:14px 0; }
.fire-item{ padding:10px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--line); }
.fire-item .fl{ font-size:.68rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.fire-item .fv{ font-size:1.15rem; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; }
.fire-item.plan .fv{ color:var(--ink-2); }
.fire-item.gercek .fv{ color:var(--warning); }
.fire-item.sapma-iyi .fv{ color:var(--success); }
.fire-item.sapma-kotu .fv{ color:var(--danger); }

/* Üretim bilgi kutusu (fiyatsız) */
.uret-bilgi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.uret-bilgi .ub{ padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:11px; }
.uret-bilgi .ub-l{ font-size:.68rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.uret-bilgi .ub-v{ font-size:.875rem; font-weight:600; margin-top:3px; }

@media (max-width:760px){
  .job__head{ grid-template-columns:auto 1fr; }
  .job__right{ grid-column:1 / -1; justify-content:flex-start; margin-top:8px; }
  .sayim input{ min-width:56px; }
}

/* ==========================================================================
   ROL SİSTEMİ (Senaryo v3.1) — görünürlük, maskeleme, salt-okunur
   ========================================================================== */
.rol-switch{ padding:8px 12px 10px; }
.rol-switch__t{ display:block; font-size:.6875rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.rol-switch__t i{ font-style:normal; opacity:.7; text-transform:none; letter-spacing:0; }
.rol-switch__b{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.rol-switch__b button{ font:inherit; font-size:.75rem; font-weight:600; padding:7px 6px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); cursor:pointer; }
.rol-switch__b button:hover{ border-color:var(--brand-300); color:var(--ink); }
.rol-switch__b button.on{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* Fiyat / mali bilgi maskeleme — Üretim ve Depo rolleri */
body.rol-fiyat-gizli [data-para]{ display:none !important; }

/* Salt-okunur (Depo) — yazma aksiyonları devre dışı */
body.rol-salt-okunur [data-yaz]{ opacity:.4; pointer-events:none; filter:grayscale(1); }
.readonly-bar{ display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:16px;
  background:var(--info-soft); border:1px solid rgba(47,118,192,.35); border-radius:12px;
  color:#1F5C9E; font-size:.8125rem; font-weight:600; }
.readonly-bar .ico{ width:18px; height:18px; flex-shrink:0; }
html[data-theme="dark"] .readonly-bar{ background:rgba(90,160,230,.10); border-color:rgba(90,160,230,.35); color:#84B8EF; }

/* Powered by — ortalı alt footer */
.app-credit{ text-align:center; padding:26px 12px 6px; margin-top:10px; }
.app-credit .pb{ display:block; font-size:.5625rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); margin-bottom:3px; }
.app-credit b{ display:block; font-size:.8125rem; color:var(--ink-2); font-weight:700; }
.app-credit .n2{ display:block; font-size:.6875rem; color:var(--ink-3); margin-top:1px; }