:root { --navy:#3D4559; --coral:#D96268; --blush:#F6E6E7; --sky:#EAF0F5; --paper:#FBF7F6; --line:#E4DCCF;
        --muted:#6A7185; --ok:#3F8A5A; --amber:#C98A1B; }
* { box-sizing: border-box; }
html, body { margin:0; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--navy); background:var(--paper); font-size:15px; }
button, input, select { font: inherit; }
button { cursor:pointer; }
.btn { border:1px solid var(--navy); background:#fff; color:var(--navy); padding:8px 14px; border-radius:4px; }
.btn.primary { background:var(--navy); color:#fff; }
.btn.small { padding:4px 10px; font-size:13px; }
.btn.danger { border-color:var(--coral); color:var(--coral); }
.muted { color:var(--muted); } .small { font-size:13px; }
.err { color:var(--coral); min-height:1.3em; font-size:14px; }
.okmsg { color:var(--ok); min-height:1.3em; font-size:14px; }
input, select { width:100%; padding:10px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--navy); }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
.hidden { display:none !important; }

/* giriş / kurulum */
.card-form { max-width:380px; margin:10vh auto; background:#fff; border:1px solid var(--line); border-radius:6px; padding:28px; }
.card-form h1 { font-family: Georgia, serif; font-weight:normal; margin:0 0 4px; }
.card-form .btn { width:100%; margin-top:16px; padding:12px; }

/* uygulama iskeleti */
.top { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line);
       position:sticky; top:0; z-index:5; }
.top .brand { font-family: Georgia, serif; font-size:18px; white-space:nowrap; }
.top .brand b { color:var(--coral); font-weight:normal; }
.top .spacer { flex:1; }
.top .who { font-size:13px; text-align:right; line-height:1.2; }
/* sol menü: ikon + yazı; ✕ ile sadece ikonlar */
.layout { display:grid; grid-template-columns: 210px 1fr 170px; min-height: calc(100vh - 52px); }
body.collapsed .layout { grid-template-columns: 56px 1fr 170px; }
aside.side { background:var(--navy); color:#fff; position:sticky; top:52px; height:calc(100vh - 52px); overflow-y:auto; padding:8px 0; z-index:6; }
.sidetoggle { display:flex; align-items:center; justify-content:center; width:40px; height:36px; margin:0 8px 6px auto;
              background:transparent; border:0; color:#cfd3dd; border-radius:4px; }
body.collapsed .sidetoggle { margin:0 auto 6px; }
.sidetoggle:hover { background:#ffffff1a; color:#fff; }
.ico { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
#tabs a { display:flex; align-items:center; gap:12px; padding:10px 18px; color:#cfd3dd; text-decoration:none; white-space:nowrap;
          border-left:3px solid transparent; font-size:14px; }
#tabs a:hover { background:#ffffff12; color:#fff; }
#tabs a.on { color:#fff; background:#ffffff1f; border-left-color:var(--coral); }
.substores a { padding:7px 18px 7px 34px !important; font-size:13px !important; }
.substores .ico { width:16px; height:16px; }
body.collapsed #tabs a { justify-content:center; padding:10px 0 !important; }
body.collapsed .lbl { display:none; }
main { padding:18px; min-width:0; }
main h2 { font-family: Georgia, serif; font-weight:normal; margin:0 0 14px; }

/* öncelik panosu: hep görünür, kapatılamaz, dar */
aside.board { background:#fff; border-left:1px solid var(--line); padding:10px 8px; position:sticky; top:52px;
              height: calc(100vh - 52px); overflow-y:auto; }
aside.board h3 { margin:0 0 8px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--coral); }
.pitem { display:block; width:100%; text-align:left; border:1px solid var(--line); border-left:3px solid var(--coral);
         background:var(--blush); border-radius:4px; padding:5px 7px; margin-bottom:5px; color:var(--navy); }
.pitem.amber { border-left-color:var(--amber); background:#FBF2E1; }
.pitem .name { font-weight:600; display:block; font-size:12px; }
.pitem .why { font-size:10.5px; color:var(--muted); display:block; line-height:1.25; }

/* tablolar / kartlar */
.box { background:#fff; border:1px solid var(--line); border-radius:6px; padding:16px; margin-bottom:14px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; color:var(--muted); font-weight:normal; text-transform:uppercase; letter-spacing:.04em; }
tr.off td { opacity:.5; }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:10px; background:var(--sky); }
.tag.admin { background:var(--navy); color:#fff; } .tag.agent { background:var(--blush); } .tag.designer { background:#E6F2EA; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:0 12px; }
.empty { text-align:center; padding:40px 16px; color:var(--muted); }

@media (max-width: 800px) {
  .layout, body.collapsed .layout { grid-template-columns: 48px 1fr; grid-template-rows: auto 1fr; }
  aside.side { grid-row: 1 / span 2; grid-column:1; }
  body.collapsed #tabs a { padding:10px 0 !important; }
  /* menü açılınca içeriğin üstüne açılır */
  body:not(.collapsed) aside.side { position:fixed; left:0; top:52px; width:220px; box-shadow: 4px 0 16px #0003; }
  /* telefonda pano üstte yatay şerit olur, yine hep görünür */
  aside.board { grid-column:2; grid-row:1; position:sticky; top:52px; height:auto; border-left:0;
                border-bottom:1px solid var(--line); padding:6px 8px; z-index:4; display:flex; gap:6px;
                overflow-x:auto; align-items:center; }
  aside.board h3 { margin:0 4px 0 0; white-space:nowrap; }
  #boardItems { display:flex; gap:6px; }
  .pitem { width:auto; min-width:120px; margin:0; flex:none; }
  #boardEmpty { white-space:nowrap; }
  main { grid-column:2; grid-row:2; padding:12px 10px; }
  .grid2 { grid-template-columns: 1fr; }
  table.resp thead { display:none; }
  table.resp tr { display:block; border-bottom:1px solid var(--line); padding:8px 0; }
  table.resp td { display:flex; justify-content:space-between; gap:12px; border:0; padding:4px 0; }
  table.resp td::before { content: attr(data-l); color:var(--muted); font-size:12px; }
}

/* ---------- önizleme şeridi ---------- */
.demobar { background:var(--coral); color:#fff; padding:6px 16px; font-size:13px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.demobar .rolesel { width:auto; padding:3px 6px; font-size:13px; border:0; }
body.demo .top { top:0; }
#boardCount { background:var(--coral); color:#fff; border-radius:9px; padding:0 7px; font-size:11px; margin-left:4px; }
#boardCount:empty { display:none; }

/* ---------- sipariş listesi ---------- */
.head { display:flex; align-items:baseline; gap:10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chip { border:1px solid var(--line); background:#fff; color:var(--navy); padding:6px 10px; border-radius:16px; font-size:13px; }
.chip .n { margin-left:6px; color:var(--muted); font-size:12px; }
.chip.on { background:var(--navy); color:#fff; border-color:var(--navy); } .chip.on .n { color:#cfd3dd; }
.chip.alert { border-color:var(--coral); color:var(--coral); } .chip.alert.on { background:var(--coral); color:#fff; }
.chip.more { border-style:dashed; color:var(--muted); }
.tools { display:grid; grid-template-columns: 1fr 180px 160px; gap:8px; margin-bottom:10px; }
.bulk { display:flex; gap:8px; align-items:center; background:var(--sky); padding:8px 12px; border-radius:6px; margin-bottom:10px; }
.olist { display:flex; flex-direction:column; gap:8px; }
.ocard { display:grid; grid-template-columns: auto 64px 1fr 64px; grid-template-areas: "sel p i d" "sel p a d";
         gap:4px 12px; align-items:start; background:#fff; border:1px solid var(--line); border-left:4px solid var(--line);
         border-radius:6px; padding:10px 12px; }
.ocard.nomsg { border-left-color:var(--coral); background:#FFF7F7; }
.ocard.urgent { box-shadow: inset 0 0 0 1px var(--coral); }
.ocard .sel { grid-area:sel; width:18px; height:18px; margin-top:22px; }
.ocard .pimg { grid-area:p; width:64px; height:64px; object-fit:cover; border-radius:4px; border:1px solid var(--line); cursor:pointer; }
.ocard .oinfo { grid-area:i; min-width:0; cursor:pointer; }
.ocard .dimg { grid-area:d; width:64px; height:84px; object-fit:contain; background:var(--paper); border:1px solid var(--line); border-radius:4px; cursor:pointer; }
.ocard .dimg.none { display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; color:var(--coral); }
.ocard .oacts { grid-area:a; display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.l1 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.l3 { color:var(--navy); margin:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.store { font-size:11px; padding:1px 7px; border-radius:3px; background:#F1641E22; color:#B4470F; }
.store.shopify { background:#95BF4722; color:#4E7A12; }
.pills { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.pill { font-size:11px; padding:2px 8px; border-radius:10px; background:var(--sky); white-space:nowrap; }
.pill.red { background:var(--coral); color:#fff; } .pill.amber { background:#F3D9A4; } .pill.ok { background:#DCEFE2; color:var(--ok); }
.timer { margin-top:4px; color:var(--muted); } .timer.late, .late { color:var(--coral); font-weight:600; }

/* ---------- sipariş detayı ---------- */
.dhead { display:flex; justify-content:space-between; gap:16px; margin-bottom:14px; }
.dhead h2 { margin:6px 0 2px; }
.clock { text-align:right; background:#fff; border:1px solid var(--line); border-radius:6px; padding:10px 14px; min-width:170px; }
.clock .big { font-size:24px; font-family:Georgia, serif; }
.dgrid { display:grid; grid-template-columns: 1.3fr 1fr; gap:14px; }
.box h3 { margin:0 0 10px; font-size:15px; display:flex; gap:8px; align-items:center; }
.item { display:flex; gap:12px; }
.item .pimg { width:80px; height:80px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
.kv { display:grid; grid-template-columns: auto 1fr auto 1fr; gap:2px 10px; font-size:13px; margin:6px 0; }
.kv span:nth-child(odd) { color:var(--muted); }
.pers { background:var(--paper); border:1px dashed var(--line); padding:8px 10px; border-radius:4px; }
.gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.gallery figure { margin:0; border:1px solid var(--line); border-radius:6px; padding:6px; background:var(--paper); }
.gallery img { width:100%; height:180px; object-fit:contain; background:#fff; }
.gallery figcaption { font-size:12px; margin-top:4px; }
.kind { font-size:11px; padding:1px 6px; border-radius:3px; color:#fff; background:#3B6FB6; }
.kind.revision { background:#8A5CC2; }
a.btn { text-decoration:none; display:inline-block; }
.upload { margin-top:10px; border:2px dashed var(--line); border-radius:6px; padding:14px; text-align:center; cursor:pointer; }
.upload:hover { border-color:var(--navy); }
section.box > .btn, section.box > div { margin-bottom:8px; }
.done { color:var(--ok); font-size:14px; }
.seg { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.seg button { border:1px solid var(--line); background:#fff; padding:5px 9px; border-radius:4px; font-size:12px; color:var(--navy); }
.seg button.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.row { display:flex; gap:6px; flex-wrap:wrap; }
.chat { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; margin-bottom:8px; }
.msg { background:var(--sky); border-radius:8px; padding:6px 10px; max-width:88%; }
.msg.designer { background:#EFE7F8; } .msg.me { align-self:flex-end; }
.chatin { display:flex; gap:6px; align-items:flex-end; }
.chatin textarea { flex:1; padding:8px; border:1px solid var(--line); border-radius:4px; font:inherit; resize:vertical; }
ul.hist { list-style:none; padding:0; margin:0; max-height:280px; overflow-y:auto; }
ul.hist li { padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; }

@media (max-width: 800px) {
  .tools { grid-template-columns: 1fr 1fr; } .tools input { grid-column: 1 / -1; }
  .ocard { grid-template-columns: auto 52px 1fr; grid-template-areas: "sel p i" "sel d a"; }
  .ocard .pimg { width:52px; height:52px; }
  .ocard .dimg { width:52px; height:68px; }
  .dhead { flex-direction:column; } .clock { text-align:left; }
  .dgrid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: auto 1fr; }
  body.demo aside.board { top:52px; }
}
.demologin { color:#fff; margin-left:auto; text-decoration:underline; }
.gallery figure:focus { outline:2px solid var(--coral); }
.gallery .row { margin-top:4px; }
.prewrap { white-space:pre-wrap; word-break:break-word; }
.pers.note { margin-top:10px; background:#FFF8EC; }
.ocard div.pimg { background:var(--paper); }
.syncinfo { margin-left:auto; display:flex; gap:8px; align-items:center; }
.pill.ready { background:#E3ECF7; color:#2F5D99; }
.ocard.ready { border-left-color:#7FA3D1; }
.dimg.none.ok { color:#2F5D99; }
.readytoggle { display:flex; gap:6px; align-items:center; margin-top:8px; color:var(--muted); }
.readytoggle input { width:auto; }
.cmsg { border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin-bottom:8px; background:var(--paper); }
.unmatched summary { cursor:pointer; }
.unmatched li { justify-content:space-between; align-items:center; }
.steps { padding-left:18px; } .steps li { margin:4px 0; }
.cchat { display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; margin-bottom:8px; }
.cbubble { background:var(--sky); border-radius:8px; padding:7px 10px; max-width:88%; align-self:flex-start; }
.cbubble.shop { background:#F1ECE4; align-self:flex-end; }
.cimgs { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.cimgs img { width:90px; height:110px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:4px; }
.tr { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); color:#2F5D99; }
.cbubble .tr { margin-top:6px; padding-top:6px; }