/* ============================================================
   TESLİM MERKEZİ · app.css  (premium SaaS)
   ============================================================ */
:root{
  --bg:#F6F7F9; --bg-grad-1:#F4F6FA; --bg-grad-2:#EEF0F6;
  --surface:#FFFFFF; --surface-2:#FBFBFD; --surface-glass:rgba(255,255,255,.72);
  --ink-900:#12141C; --ink-800:#1B1E28; --ink-700:#33384A; --ink-500:#6A7186; --ink-400:#949BAE; --ink-300:#B9BFCE;
  --line:rgba(19,20,28,.07); --line-strong:rgba(19,20,28,.11);
  --accent:#5B5BD6; --accent-600:#4E4EC7; --accent-700:#4141AE; --accent-soft:#EDEEFB; --accent-tint:#F5F5FE;
  --success:#17936A; --success-soft:#DFF4EC; --amber:#B7791F; --amber-soft:#FBEFD6;
  --sky:#2C7BD6; --sky-soft:#E1EEFB; --rose:#C2445E; --rose-soft:#FBE7EC;
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(19,20,28,.05);
  --sh-md:0 1px 2px rgba(19,20,28,.05),0 10px 26px -14px rgba(19,20,28,.22);
  --sh-lg:0 2px 4px rgba(19,20,28,.05),0 24px 48px -22px rgba(19,20,28,.30);
  --sh-accent:0 8px 22px -8px rgba(91,91,214,.45);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,'Cascadia Mono',monospace;
  --sidebar-w:264px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{ overflow-x:hidden; font-family:var(--font); color:var(--ink-800); letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 700px at 85% -10%,#EEF0FB 0%,rgba(238,240,251,0) 55%),radial-gradient(900px 600px at -5% 110%,#EAF3F0 0%,rgba(234,243,240,0) 50%),linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2)); }
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--accent-soft); color:var(--accent-700); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ico{ width:18px; height:18px; flex-shrink:0; }
.spacer{ margin-left:auto; }

/* ---------- shell ---------- */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; padding:20px 16px; display:flex; flex-direction:column; gap:6px;
  background:var(--surface-glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-right:1px solid var(--line); z-index:40; }
.brand{ display:flex; align-items:center; gap:12px; padding:8px 8px 10px; }
.brand-mark{ width:38px; height:38px; border-radius:12px; flex-shrink:0; background:linear-gradient(145deg,var(--accent),#7A6CF0); display:grid; place-items:center; color:#fff; box-shadow:var(--sh-accent); position:relative; overflow:hidden; }
.brand-mark::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%); }
.brand-mark svg{ width:20px; height:20px; position:relative; z-index:1; }
.brand-text b{ font-size:14.5px; font-weight:700; color:var(--ink-900); display:block; line-height:1.15; }
.brand-text span{ font-size:11.5px; color:var(--ink-400); font-weight:500; }
.nav-group-label{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-400); padding:14px 12px 6px; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--ink-500); font-size:13.5px; font-weight:500; position:relative; transition:background .18s,color .18s; }
.nav-item svg{ width:19px; height:19px; }
.nav-item:hover{ background:rgba(19,20,28,.04); color:var(--ink-800); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent-700); font-weight:600; }
.nav-item.active::before{ content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:4px; height:20px; border-radius:0 4px 4px 0; background:var(--accent); }
.nav-badge{ margin-left:auto; font-size:11px; font-weight:600; font-family:var(--mono); background:var(--accent); color:#fff; border-radius:var(--r-pill); min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; }
.sidebar-foot{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }
.user-chip{ display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:12px; }
.avatar{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; font-size:12.5px; font-weight:700; }
.user-meta b{ font-size:12.5px; color:var(--ink-800); font-weight:600; display:block; line-height:1.25; }
.user-meta span{ font-size:11px; color:var(--ink-400); }
.logout-link{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:8px; padding:9px; border-radius:10px; font-size:12.5px; font-weight:600; color:var(--ink-500); border:1px solid var(--line); background:var(--surface); transition:all .16s; }
.logout-link:hover{ color:var(--rose); border-color:rgba(194,68,94,.25); background:var(--rose-soft); }
.logout-link svg{ width:15px; height:15px; }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px; padding:16px 30px;
  background:linear-gradient(180deg,rgba(246,247,249,.9),rgba(246,247,249,.55)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.icon-btn{ width:38px; height:38px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; color:var(--ink-500); background:var(--surface); border:1px solid var(--line); transition:all .18s; }
.icon-btn:hover{ color:var(--ink-800); border-color:var(--line-strong); box-shadow:var(--sh-sm); transform:translateY(-1px); }
.icon-btn svg{ width:18px; height:18px; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-400); }
.crumbs b{ color:var(--ink-800); font-weight:600; }
.crumbs svg{ width:15px; height:15px; }
.topbar-user{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.topbar-user .avatar{ width:34px; height:34px; }
.content{ padding:30px; max-width:1320px; width:100%; margin:0 auto; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.page-head h1{ font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--ink-900); }
.page-head p{ font-size:13.5px; color:var(--ink-500); margin-top:5px; max-width:66ch; }
.eyebrow{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.11em; color:var(--accent); margin-bottom:9px; display:flex; align-items:center; gap:7px; }
.eyebrow svg{ width:14px; height:14px; }

/* ---------- primitives ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); }
.card-pad{ padding:22px 24px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:12px; font-size:13.5px; font-weight:600; letter-spacing:-.01em; transition:all .17s; white-space:nowrap; position:relative; }
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:linear-gradient(180deg,var(--accent),var(--accent-600)); color:#fff; box-shadow:var(--sh-accent); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(91,91,214,.55); }
.btn-primary:active{ transform:translateY(0) scale(.985); }
.btn-ghost{ background:var(--surface); color:var(--ink-700); border:1px solid var(--line); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ border-color:var(--line-strong); color:var(--ink-900); transform:translateY(-1px); }
.btn-success{ background:linear-gradient(180deg,#1CA778,var(--success)); color:#fff; box-shadow:0 8px 20px -8px rgba(23,147,106,.5); }
.btn-success:hover{ transform:translateY(-1px); }
.btn-amber{ background:var(--amber-soft); color:var(--amber); border:1px solid rgba(183,121,31,.22); }
.btn-amber:hover{ background:#F8E7C6; }
.btn[disabled],.btn.disabled{ opacity:.5; pointer-events:none; }
.btn-sm{ padding:8px 13px; font-size:12.5px; border-radius:10px; }
.btn-block{ width:100%; }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; }
.pill .dot{ width:6px; height:6px; border-radius:50%; }
.pill-ready{ background:var(--sky-soft); color:var(--sky); } .pill-ready .dot{ background:var(--sky); }
.pill-sent{ background:var(--accent-soft); color:var(--accent-700); } .pill-sent .dot{ background:var(--accent); }
.pill-ok{ background:var(--success-soft); color:var(--success); } .pill-ok .dot{ background:var(--success); }
.pill-rev{ background:var(--amber-soft); color:var(--amber); } .pill-rev .dot{ background:var(--amber); }
.pill-acil{ background:var(--rose-soft); color:var(--rose); } .pill-acil .dot{ background:var(--rose); }

.rise{ opacity:0; animation:rise .5s var(--ease) forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- KPI ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--sh-md); position:relative; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.kpi::after{ content:""; position:absolute; inset:0 0 auto auto; width:120px; height:120px; border-radius:50%; filter:blur(30px); opacity:.5; transform:translate(35%,-45%); }
.kpi.k-sky::after{ background:var(--sky-soft); } .kpi.k-accent::after{ background:var(--accent-soft); } .kpi.k-ok::after{ background:var(--success-soft); } .kpi.k-amber::after{ background:var(--amber-soft); }
.kpi-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; position:relative; z-index:1; }
.kpi-ic svg{ width:20px; height:20px; }
.k-sky .kpi-ic{ background:var(--sky-soft); color:var(--sky); } .k-accent .kpi-ic{ background:var(--accent-soft); color:var(--accent-700); } .k-ok .kpi-ic{ background:var(--success-soft); color:var(--success); } .k-amber .kpi-ic{ background:var(--amber-soft); color:var(--amber); }
.kpi-val{ font-size:31px; font-weight:700; letter-spacing:-.04em; color:var(--ink-900); margin-top:14px; line-height:1; position:relative; z-index:1; }
.kpi-lbl{ font-size:12.5px; color:var(--ink-500); margin-top:7px; font-weight:500; position:relative; z-index:1; }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-head h3{ font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--ink-900); }
.section-head .sub{ font-size:12px; color:var(--ink-400); font-weight:500; }
.link-btn{ font-size:12.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:4px; }
.link-btn svg{ width:14px; height:14px; }

/* ---------- tables ---------- */
.table-card{ padding:0; overflow:hidden; }
.table-toolbar{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.seg{ display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line); padding:3px; border-radius:11px; }
.seg a,.seg button{ padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-500); transition:all .16s; }
.seg a.active,.seg button.active{ background:#fff; color:var(--ink-900); box-shadow:var(--sh-sm); }
.tbl-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); padding:13px 18px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2); }
tbody td{ padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr{ transition:background .15s; }
tbody tr:hover{ background:var(--surface-2); }
tbody tr:last-child td{ border-bottom:none; }
.td-req{ display:flex; align-items:center; gap:11px; }
.td-req .r-logo{ width:34px; height:34px; border-radius:10px; font-size:12px; display:grid; place-items:center; font-weight:700; }
.td-req b{ font-size:13px; color:var(--ink-900); font-weight:600; display:block; }
.td-req span{ font-size:11px; color:var(--ink-400); font-family:var(--mono); }
.td-link{ font-family:var(--mono); font-size:12px; color:var(--sky); display:inline-flex; align-items:center; gap:6px; }
.td-link svg{ width:13px; height:13px; }
.td-date{ font-family:var(--mono); font-size:12px; color:var(--ink-500); }
.td-user{ display:flex; align-items:center; gap:8px; }
.td-user .avatar{ width:26px; height:26px; border-radius:8px; font-size:10px; }
.td-user span{ font-size:12.5px; color:var(--ink-700); font-weight:500; }
.own-tag{ font-size:10px; font-weight:700; color:var(--accent-700); background:var(--accent-soft); padding:2px 7px; border-radius:var(--r-pill); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.version-note{ font-size:11.5px; color:var(--ink-400); padding:14px 18px; background:var(--accent-tint); border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.version-note svg{ width:15px; height:15px; color:var(--accent); }

/* ---------- forms ---------- */
.flow-grid{ display:grid; grid-template-columns:1fr 1.35fr; gap:20px; align-items:start; }
.form-card{ padding:26px; }
.form-title{ font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink-900); display:flex; align-items:center; gap:9px; }
.form-title svg{ width:19px; height:19px; color:var(--accent); }
.form-sub{ font-size:13px; color:var(--ink-500); margin-top:6px; }
.field{ margin-top:22px; }
.field-label{ font-size:12.5px; font-weight:600; color:var(--ink-800); display:flex; align-items:center; gap:6px; margin-bottom:9px; }
.field-label .req{ color:var(--accent); }
.field-hint{ font-size:11.5px; color:var(--ink-400); font-weight:400; margin-left:auto; }
.input-wrap{ position:relative; }
.input-wrap .in-ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none; }
.input-wrap .in-ic svg{ width:17px; height:17px; }
.input{ width:100%; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface-2); font-size:13.5px; color:var(--ink-900); transition:all .17s; font-family:var(--font); }
.input.has-ic{ padding-left:42px; }
.input::placeholder{ color:var(--ink-300); }
.input:focus{ outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 4px var(--accent-tint); }
textarea.input{ resize:vertical; min-height:90px; line-height:1.55; }
.mono-input{ font-family:var(--mono); }
.form-foot{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.form-foot .note{ font-size:11.5px; color:var(--ink-400); display:flex; align-items:center; gap:6px; }
.form-foot .note svg{ width:14px; height:14px; }
.prio-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.prio-opt{ display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 6px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink-700); font-size:12.5px; font-weight:600; transition:all .16s; cursor:pointer; }
.prio-opt svg{ width:15px; height:15px; }
.prio-opt.on[data-p="normal"]{ border-color:var(--sky); color:var(--sky); background:var(--sky-soft); }
.prio-opt.on[data-p="yuksek"]{ border-color:var(--amber); color:var(--amber); background:var(--amber-soft); }
.prio-opt.on[data-p="acil"]{ border-color:var(--rose); color:var(--rose); background:var(--rose-soft); }

/* summary card */
.summary-card .sc-banner{ padding:20px 22px; border-radius:var(--r-lg) var(--r-lg) 0 0; background:linear-gradient(135deg,#1F2130,#2C2E42); color:#fff; position:relative; overflow:hidden; }
.summary-card .sc-banner::after{ content:""; position:absolute; inset:0; background:radial-gradient(400px 140px at 100% 0,rgba(91,91,214,.5),transparent 70%); }
.sc-banner .rel{ position:relative; z-index:1; }
.sc-id{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.6); }
.sc-title{ font-size:19px; font-weight:700; margin-top:6px; letter-spacing:-.02em; }
.sc-firma{ font-size:13px; color:rgba(255,255,255,.75); margin-top:3px; }
.sc-meta{ padding:6px 22px 8px; }
.meta-row{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13px; }
.meta-row:last-child{ border-bottom:none; }
.meta-row .m-ic{ width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-500); flex-shrink:0; }
.meta-row .m-ic svg{ width:16px; height:16px; }
.meta-row .m-k{ color:var(--ink-400); font-size:12px; }
.meta-row .m-v{ color:var(--ink-900); font-weight:600; margin-left:auto; text-align:right; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.chip{ font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent-700); }

/* ---------- multi-item + media ---------- */
.item-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px; background:var(--surface-2); margin-bottom:12px; }
.item-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.item-num{ font-size:11px; font-weight:700; color:var(--accent-700); background:var(--accent-soft); padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.item-title-input{ flex:1; min-width:0; border:none; background:none; font-size:13.5px; font-weight:600; color:var(--ink-900); outline:none; padding:7px 9px; border-radius:8px; transition:box-shadow .16s; }
.item-title-input:focus{ background:#fff; box-shadow:0 0 0 2px var(--accent-tint); }
.item-title-input::placeholder{ color:var(--ink-300); font-weight:500; }
.item-del{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--ink-400); background:#fff; border:1px solid var(--line); transition:all .16s; flex-shrink:0; }
.item-del:hover{ color:var(--rose); border-color:rgba(194,68,94,.25); background:var(--rose-soft); }
.item-del svg{ width:15px; height:15px; }
.item-desc{ min-height:56px; font-size:13px; margin-bottom:12px; }
.media-toolbar{ display:flex; flex-wrap:wrap; gap:8px; }
.media-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink-700); font-size:12px; font-weight:600; transition:all .16s; cursor:pointer; }
.media-btn:hover{ border-color:var(--accent); color:var(--accent-700); background:var(--accent-tint); }
.media-btn svg{ width:15px; height:15px; }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:12px; }
.media-grid:empty{ display:none; }
.media-thumb{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#111318; }
.media-thumb img,.media-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.media-play{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28); color:#fff; pointer-events:none; }
.media-play svg{ width:22px; height:22px; fill:#fff; }
.media-kind{ position:absolute; bottom:4px; left:4px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:5px; }
.thumb-del{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:rgba(19,20,28,.72); color:#fff; border:none; cursor:pointer; z-index:2; transition:background .15s; }
.thumb-del:hover{ background:var(--rose); }
.thumb-del svg{ width:13px; height:13px; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(10,11,16,.88); backdrop-filter:blur(6px); display:none; place-items:center; padding:24px; }
.lightbox.open{ display:grid; }
.lightbox img,.lightbox video{ max-width:min(92vw,1100px); max-height:88vh; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5); background:#000; }
.lb-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff; border:none; cursor:pointer; transition:background .15s; }
.lb-close:hover{ background:rgba(255,255,255,.26); }
.lb-close svg{ width:20px; height:20px; }

/* yükleniyor katmanı */
.uploading{ position:fixed; inset:0; z-index:130; background:rgba(19,20,28,.55); backdrop-filter:blur(4px); display:none; place-items:center; padding:24px; }
.uploading.open{ display:grid; }
.up-card{ background:#fff; border-radius:18px; padding:28px 30px; max-width:340px; text-align:center; box-shadow:var(--sh-lg); }
.up-card .spinner{ width:42px; height:42px; margin:0 auto 16px; border-radius:50%; border:4px solid var(--accent-soft); border-top-color:var(--accent); animation:spin .8s linear infinite; }
.up-card b{ display:block; font-size:15px; color:var(--ink-900); font-weight:700; }
.up-card span{ display:block; font-size:12.5px; color:var(--ink-500); margin-top:6px; line-height:1.5; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* mesajlaşma */
.msg-thread{ display:flex; flex-direction:column; gap:14px; margin:6px 0 18px; max-height:420px; overflow-y:auto; padding-right:4px; }
.msg{ display:flex; gap:10px; align-items:flex-start; }
.msg.mine{ flex-direction:row-reverse; }
.msg-av{ width:32px; height:32px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-size:11px; font-weight:700; }
.msg-bubble{ max-width:78%; }
.msg-meta{ font-size:11px; color:var(--ink-400); margin-bottom:4px; }
.msg-meta b{ color:var(--ink-800); font-weight:600; font-size:12px; }
.msg.mine .msg-meta{ text-align:right; }
.msg-text{ font-size:13px; color:var(--ink-800); line-height:1.55; background:var(--surface-2); border:1px solid var(--line); padding:10px 13px; border-radius:12px; border-top-left-radius:4px; white-space:pre-wrap; word-break:break-word; }
.msg.mine .msg-text{ background:var(--accent-tint); border-color:rgba(91,91,214,.16); color:var(--ink-900); border-top-left-radius:12px; border-top-right-radius:4px; }
.msg-compose{ display:flex; gap:10px; align-items:flex-end; border-top:1px solid var(--line); padding-top:16px; }
.msg-compose textarea{ flex:1; min-height:46px; }
.msg-compose .btn{ flex-shrink:0; }
.add-item-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:11px 14px; border-radius:12px; border:1.5px dashed var(--line-strong); background:transparent; color:var(--ink-500); font-size:12.5px; font-weight:600; transition:all .16s; }
.add-item-btn:hover{ border-color:var(--accent); color:var(--accent-700); background:var(--accent-tint); }
.add-item-btn svg{ width:16px; height:16px; }

/* ---------- detail page ---------- */
.detail-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
.kalem-block{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-bottom:14px; background:var(--surface-2); }
.kalem-block:last-child{ margin-bottom:0; }
.kalem-block h4{ font-size:14px; font-weight:700; color:var(--ink-900); display:flex; align-items:center; gap:9px; }
.kalem-block .kb-num{ font-size:10.5px; font-weight:700; color:var(--accent-700); background:var(--accent-soft); padding:3px 8px; border-radius:var(--r-pill); }
.kalem-block p{ font-size:13px; color:var(--ink-700); margin-top:8px; line-height:1.55; }
.dl-file{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; background:var(--surface-2); display:flex; align-items:center; gap:14px; margin-top:4px; flex-wrap:wrap; }
.dl-file .f-ic{ width:44px; height:44px; border-radius:12px; background:linear-gradient(145deg,#5B8DEF,#4066D5); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.dl-file .f-ic svg{ width:22px; height:22px; }
.dl-thumb{ width:56px; height:56px; border-radius:12px; overflow:hidden; flex-shrink:0; border:1px solid var(--line); cursor:pointer; background:#f0f1f5; }
.dl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dl-thumb.sm{ width:40px; height:40px; border-radius:9px; }
.onizleme-btn.on{ border-color:var(--success); color:var(--success); background:var(--success-soft); }
.dl-file .f-body{ flex:1; min-width:0; }
.dl-file .f-body b{ font-size:13px; color:var(--ink-900); display:block; }
.dl-file .f-body span{ font-size:11.5px; color:var(--ink-400); font-family:var(--mono); word-break:break-all; }
.note-box{ font-size:13.5px; color:var(--ink-700); line-height:1.6; padding:15px 17px; background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; margin-top:10px; }
.perm-note{ font-size:11.5px; color:var(--ink-400); display:flex; align-items:center; gap:7px; margin-top:10px; }
.perm-note svg{ width:14px; height:14px; }

/* timeline */
.timeline{ position:relative; }
.tl-item{ display:flex; gap:15px; padding-bottom:20px; position:relative; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:15px; top:30px; bottom:-2px; width:2px; background:var(--line-strong); }
.tl-item:last-child::before{ display:none; }
.tl-dot{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--surface); border:2px solid var(--line-strong); color:var(--ink-400); z-index:1; }
.tl-dot svg{ width:15px; height:15px; }
.tl-item.done .tl-dot{ background:var(--accent); border-color:var(--accent); color:#fff; } .tl-item.done::before{ background:var(--accent); }
.tl-item.ok .tl-dot{ background:var(--success); border-color:var(--success); color:#fff; }
.tl-item.rev .tl-dot{ background:var(--amber); border-color:var(--amber); color:#fff; }
.tl-item.pending .tl-dot{ border-style:dashed; }
.tl-body b{ font-size:13px; color:var(--ink-900); font-weight:600; display:block; }
.tl-body span{ font-size:12px; color:var(--ink-400); }
.tl-body .tl-time{ font-family:var(--mono); font-size:11px; color:var(--ink-400); margin-top:3px; display:block; }
.tl-item.pending .tl-body b{ color:var(--ink-400); }

/* role picker (add user) */
.role-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.role-pick label{ display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink-700); font-size:12.5px; font-weight:600; transition:all .16s; cursor:pointer; }
.role-pick label svg{ width:16px; height:16px; }
.role-pick input{ display:none; }
.role-pick input:checked + label,.role-pick label.on{ border-color:var(--accent); color:var(--accent-700); background:var(--accent-tint); box-shadow:0 0 0 3px var(--accent-tint); }

/* ---------- modal ---------- */
.overlay{ position:fixed; inset:0; z-index:90; background:rgba(19,20,28,.42); backdrop-filter:blur(4px); display:none; place-items:center; padding:20px; }
.overlay.open{ display:grid; }
.modal{ background:var(--surface); border-radius:var(--r-xl); width:100%; max-width:460px; box-shadow:var(--sh-lg); overflow:hidden; animation:modalIn .3s var(--ease); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.modal-head{ padding:24px 26px 0; }
.modal-ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; }
.modal-ic.amber{ background:var(--amber-soft); color:var(--amber); }
.modal-ic.accent{ background:var(--accent-soft); color:var(--accent-700); }
.modal-ic svg{ width:24px; height:24px; }
.modal-head h3{ font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--ink-900); }
.modal-head p{ font-size:13.5px; color:var(--ink-500); margin-top:7px; line-height:1.55; }
.modal-body{ padding:16px 26px; }
.modal-foot{ padding:16px 26px 24px; display:flex; gap:11px; }
.modal-foot .btn{ flex:1; }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:26px; right:26px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; background:var(--ink-900); color:#fff; box-shadow:var(--sh-lg); min-width:300px; animation:toastIn .4s var(--ease); }
.toast.out{ animation:toastOut .3s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(20px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(30px); } }
.toast .t-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.toast .t-ic svg{ width:17px; height:17px; }
.toast.ok .t-ic{ background:rgba(23,147,106,.25); color:#5FE0B0; }
.toast.info .t-ic{ background:rgba(91,91,214,.3); color:#B0B0F5; }
.toast.amber .t-ic{ background:rgba(183,121,31,.3); color:#F0C878; }
.toast .t-body b{ font-size:13px; font-weight:600; display:block; }
.toast .t-body span{ font-size:12px; color:rgba(255,255,255,.6); }

/* ---------- login ---------- */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:34px 32px; animation:rise .5s var(--ease) forwards; }
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.login-card h1{ font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--ink-900); }
.login-card .sub{ font-size:13px; color:var(--ink-500); margin-top:6px; margin-bottom:22px; }
.login-err{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:500; color:var(--rose); background:var(--rose-soft); border:1px solid rgba(194,68,94,.2); padding:11px 14px; border-radius:11px; margin-bottom:18px; }
.login-err svg{ width:16px; height:16px; }
.demo-box{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.demo-box .dh{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-400); margin-bottom:10px; }
.demo-row{ display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 0; cursor:pointer; border-radius:8px; transition:background .14s; }
.demo-row:hover{ background:var(--surface-2); }
.demo-row .pill{ font-size:10.5px; }
.demo-row .mono{ color:var(--ink-500); }
.demo-row .fill{ margin-left:auto; font-size:11px; color:var(--accent); font-weight:600; }

/* ---------- responsive ---------- */
.menu-toggle{ display:none; }
.scrim{ position:fixed; inset:0; background:rgba(19,20,28,.4); z-index:39; display:none; }
@media (max-width:1080px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .flow-grid,.detail-grid{ grid-template-columns:1fr; }
  .content{ padding:26px 22px; }
}
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .34s var(--ease); box-shadow:var(--sh-lg); }
  .app.nav-open .sidebar{ transform:translateX(0); }
  .app.nav-open .scrim{ display:block; }
  .menu-toggle{ display:grid; }
  .content{ padding:22px 18px; }
  .topbar{ padding:14px 18px; }
}
@media (max-width:720px){ .kpi-grid{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .content{ padding:16px 14px; }
  .card-pad,.form-card{ padding:18px 16px; }
  .page-head h1{ font-size:21px; }
  .kpi-val{ font-size:27px; }
  .prio-seg,.role-pick{ grid-template-columns:1fr; }
  .modal{ max-width:100%; }
  .toast-wrap{ left:14px; right:14px; bottom:14px; }
  .toast{ min-width:0; width:100%; }
  .login-card{ padding:26px 20px; }
}