/* Musteri portali - ekip panelinden (style.css) BAGIMSIZ. Ingilizce.
   Gorsel dunya (25 Eyl 2026, Tunahan secimi "Container Yard"): acik celik zemin, tek guclu
   renk pas kirmizisi (konteyner kapisi), siparisler kod plakasi, durumlar boyali isaret.
   Yon sozlesmesi: .impeccable/surfaces/public-portal-html.md */
:root {
  --ground:#F2F3F1; --plate:#FBFBFA; --rule:#DCDFDC; --rule-2:#C4C9C6;
  --ink:#15181B; --ink-2:#3A4047; --muted:#5A626B;
  --oxide:#8E3A22; --oxide-deep:#6E2A17; --oxide-hi:#A5482E; --on-oxide:#F7EDE7; --on-oxide-2:#E3C6B9;
  --amber:#D9A21B; --amber-ink:#7A560A; --amber-wash:#FBF1D9;
  /* durum boyalari: konteyner filosunun renkleri */
  --shipped:#2E6A4E;  --shipped-wash:#E1EEE6;
  --wh:#2C5876;       --wh-wash:#E0EAF1;
  --secured:#5A4E8C;  --secured-wash:#ECE9F4;
  --sourcing:#4E555D; --sourcing-wash:#E7E9EA;
  --unavail:#A82B1C;  --unavail-wash:#F6E1DD;
  --credited:#8A6D1F; --credited-wash:#F4EDD9;
  --lift:0 1px 0 rgba(21,24,27,.04), 0 6px 16px -8px rgba(21,24,27,.22);
  --f-ui:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --f-cap:'Barlow Condensed', 'Barlow', Arial, sans-serif;
  --f-stencil:'Big Shoulders Stencil', 'Barlow Condensed', Impact, sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
html { background:var(--ground); }
body { margin:0; background:var(--ground); color:var(--ink);
  font:400 15px/1.5 var(--f-ui); font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:var(--oxide); color:var(--on-oxide); }
a { color:var(--oxide); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--oxide-deep); }
:focus-visible { outline:2px solid var(--oxide); outline-offset:2px; }
.hidden { display:none !important; }
.cap { font:600 11.5px/1.2 var(--f-cap); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ico { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; flex:none; vertical-align:-3px; }
* { scrollbar-color:var(--rule-2) transparent; }

/* ---------- buttons, fields ---------- */
.btn, .btn-solid, .btn-bar { font:600 14px/1 var(--f-ui); display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; border-radius:3px; transition:background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn { border:1px solid var(--rule-2); background:var(--plate); color:var(--ink); padding:9px 14px; }
.btn:hover:not(:disabled) { border-color:var(--ink); }
.btn:disabled { color:var(--rule-2); cursor:default; }
.btn-solid { border:0; background:var(--ink); color:#fff; padding:14px 18px; justify-content:center; }
.btn-solid:hover { background:var(--oxide); }
.btn-solid:disabled { background:var(--muted); cursor:progress; }
.btn-bar { border:1px solid rgba(247,237,231,.35); background:transparent; color:var(--on-oxide); padding:8px 12px; }
.btn-bar:hover { border-color:var(--on-oxide); background:rgba(0,0,0,.12); }
.field { display:block; margin:0 0 16px; }
.field .cap { display:block; margin-bottom:6px; color:var(--ink-2); }
.field input, .search { width:100%; font:500 16px/1.3 var(--f-ui); color:var(--ink); background:#fff;
  border:1px solid var(--rule-2); border-bottom:2px solid var(--ink); border-radius:2px; padding:12px 12px 11px;
  caret-color:var(--oxide); transition:border-color .15s ease, background-color .15s ease; }
.field input:hover, .search:hover { border-color:var(--ink-2); }
.field input:focus, .search:focus { outline:none; border-color:var(--oxide); border-bottom-color:var(--oxide); background:#fff; }
.err { color:var(--unavail); font-size:13.5px; font-weight:500; min-height:20px; margin-top:10px; }

/* Plaka: kosesinde percin izi olan celik levha */
.plate { position:relative; background:var(--plate); border:1px solid var(--rule-2); border-radius:3px; }
.plate::before, .plate::after { content:""; position:absolute; top:9px; width:5px; height:5px; border-radius:50%;
  background:var(--rule-2); }
.plate::before { left:9px; } .plate::after { right:9px; }

/* ---------- sign in: konteyner kapisi + plaka ---------- */
.signin { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); }
.door { position:relative; overflow:hidden; background:var(--oxide);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 2px, transparent 2px 30px, rgba(255,255,255,.07) 30px 32px,
      transparent 32px 44px, rgba(0,0,0,.12) 44px 46px, transparent 46px 60px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)); }
.door::after { content:""; position:absolute; inset:0; box-shadow:inset -18px 0 32px -18px rgba(0,0,0,.45); pointer-events:none; }
.door-mark { position:absolute; left:clamp(28px,5vw,64px); top:clamp(28px,5vw,56px); width:clamp(150px,15vw,220px); height:auto; }
.rod { position:absolute; top:0; bottom:0; width:12px; background:var(--oxide-deep); border-left:1px solid var(--oxide-hi); }
.rod-a { right:28%; } .rod-b { right:12%; }
.rod i { position:absolute; left:-9px; width:30px; height:44px; background:var(--oxide-deep); border:1px solid var(--oxide-hi); }
.rod i:first-child { top:22%; } .rod i:last-child { bottom:18%; }
.door-plate { position:absolute; left:clamp(28px,5vw,64px); bottom:clamp(28px,5vw,56px); display:flex; align-items:stretch;
  background:#F7F3EE; color:var(--ink); border-radius:2px; box-shadow:0 10px 24px -10px rgba(0,0,0,.55); }
.dp-code { font:800 56px/1 var(--f-stencil); letter-spacing:.02em; padding:14px 18px 10px; border-right:2px solid var(--ink); }
.dp-rows { display:flex; flex-direction:column; justify-content:center; gap:6px; padding:12px 18px;
  font:600 13px/1.2 var(--f-cap); letter-spacing:.14em; text-transform:uppercase; }
.dp-rows span + span { color:var(--muted); }
.gate { display:flex; flex-direction:column; justify-content:center; padding:48px clamp(24px,6vw,96px); }
.gate-mark { display:none; }
.signin-plate { width:100%; max-width:440px; padding:44px 36px 30px; box-shadow:var(--lift); }
.signin-plate h1 { font:700 40px/1 var(--f-cap); letter-spacing:.01em; text-transform:uppercase; margin:0 0 10px; }
.lede { color:var(--muted); margin:0 0 28px; font-size:15px; max-width:34ch; }
.signin-plate .btn-solid { width:100%; margin-top:8px; font-size:15px; }
.gate-foot { color:var(--muted); font-size:13px; margin:18px 0 0; max-width:440px; }

/* ---------- app shell ---------- */
.topbar { background:var(--oxide); color:var(--on-oxide); position:sticky; top:0; z-index:20;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 22px);
  box-shadow:0 1px 0 var(--oxide-deep); }
.topbar-in { max-width:1180px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:22px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img { width:112px; height:auto; display:block; }
.brand-tag { font:600 12px/1 var(--f-cap); letter-spacing:.2em; text-transform:uppercase; color:var(--on-oxide-2);
  border-left:1px solid rgba(247,237,231,.35); padding-left:12px; }
.acct-menu { margin-left:auto; position:relative; min-width:0; }
.brand { flex-shrink:0; }
.acct-menu summary b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-menu .caret { flex-shrink:0; }
.acct-menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid rgba(247,237,231,.35); font:600 15px/1 var(--f-ui); color:#fff; }
.acct-menu summary::-webkit-details-marker { display:none; }
.acct-menu summary:hover, .acct-menu[open] summary { border-color:var(--on-oxide); background:rgba(0,0,0,.12); }
.acct-menu .caret { width:0; height:0; border:5px solid transparent; border-top-color:currentColor; border-bottom:0; transition:transform .15s; }
.acct-menu[open] .caret { transform:rotate(180deg); }
.acct-pop { position:absolute; right:0; top:calc(100% + 6px); min-width:190px; background:var(--plate); border:1px solid var(--rule-2);
  box-shadow:var(--lift); display:flex; flex-direction:column; padding:4px 0; }
.acct-pop button { font:500 14px/1 var(--f-ui); color:var(--ink); background:none; border:0; text-align:left; padding:12px 16px; cursor:pointer; }
.acct-pop button:hover, .acct-pop button:focus-visible { background:var(--ground); color:var(--oxide); }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px 80px; }

/* ---------- headings ---------- */
.page-head { padding:34px 0 22px; }
.page-title { font:700 44px/1 var(--f-cap); text-transform:uppercase; letter-spacing:.005em; margin:0; }
.page-title.stencil { font:800 52px/.95 var(--f-stencil); letter-spacing:.01em; text-transform:none; }
.page-sub { color:var(--muted); margin:10px 0 0; font-size:15px; }
h2.sec { display:flex; align-items:baseline; gap:14px; font:700 22px/1 var(--f-cap); text-transform:uppercase;
  letter-spacing:.02em; margin:44px 0 14px; }
h2.sec small { font:500 14px/1 var(--f-ui); text-transform:none; letter-spacing:0; color:var(--muted); }
.crumb { display:inline-flex; align-items:center; gap:6px; margin:26px 0 0; font:600 13px/1 var(--f-cap);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:none; border:0; padding:4px 0; cursor:pointer; }
.crumb:hover { color:var(--oxide); }

/* ---------- manifest (ozet levhasi) ---------- */
.manifest { padding:26px 26px 22px; }
.manifest-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.big { font:700 68px/.9 var(--f-cap); letter-spacing:-.01em; }
.big small { font:600 22px/1 var(--f-cap); color:var(--muted); letter-spacing:.04em; margin-left:6px; }
.manifest-head .cap { display:block; margin-bottom:8px; }
.bar { display:flex; height:14px; background:var(--rule); margin:18px 0 20px; gap:2px; }
.bar span { display:block; min-width:3px;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 6px, transparent 6px 12px); }
.seg-shipped{background-color:var(--shipped)} .seg-in_warehouse{background-color:var(--wh)}
.seg-secured{background-color:var(--secured)} .seg-sourcing{background-color:var(--sourcing)}
.seg-unavailable{background-color:var(--unavail)}
.seg-credited{background-color:var(--credited)}
.tiles { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--rule); }
.tile { padding:14px 14px 4px 0; }
.tile + .tile { padding-left:16px; border-left:1px solid var(--rule); }
.tile b { display:block; font:700 34px/1 var(--f-cap); }
.tile span { display:flex; align-items:center; gap:7px; margin-top:8px; font:600 12px/1.2 var(--f-cap);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.dot { width:10px; height:10px; display:inline-block; flex:none; }
.lbl { font-style:normal; }
.tip-btn { border:0; background:none; padding:2px; margin-left:4px; cursor:pointer; color:var(--muted); display:inline-flex; vertical-align:-3px; }
.tip-btn .ico { width:14px; height:14px; }
.tip-btn:hover, .tip-btn[aria-expanded="true"] { color:var(--ink); }
.tip { margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); }

/* ---------- tables ---------- */
.tbl-wrap { background:var(--plate); border:1px solid var(--rule-2); border-radius:3px; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font:600 11.5px/1.2 var(--f-cap); letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  padding:14px 14px 10px; border-bottom:2px solid var(--ink); background:var(--plate); white-space:nowrap; }
td { padding:12px 14px; border-top:1px solid var(--rule); vertical-align:top; }
tbody tr:first-child td { border-top:0; }
tr.clickable { cursor:pointer; }
tr.clickable:hover td { background:#fff; }
.num { text-align:right; white-space:nowrap; }
.mono { font:500 13px/1.3 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing:.01em; }
.t-title { font-weight:500; }
.sub { color:var(--muted); font-size:12.5px; }

/* ---------- status marks ---------- */
.badge { display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1 var(--f-cap); letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; padding:5px 8px 5px 6px; border-radius:2px; }
.badge::before { content:""; width:8px; height:8px; background:currentColor; }
.b-shipped{color:var(--shipped);background:var(--shipped-wash)}
.b-in_warehouse{color:var(--wh);background:var(--wh-wash)}
.b-secured{color:var(--secured);background:var(--secured-wash)}
.b-sourcing{color:var(--sourcing);background:var(--sourcing-wash)}
.b-unavailable{color:var(--unavail);background:var(--unavail-wash)}
.b-credited{color:var(--credited);background:var(--credited-wash)}
.b-packed{color:var(--wh);background:var(--wh-wash)}
/* Siparis bitti: her kopya ya cikti ya bulunamadi (bkz src/portal.js orderDone) */
.b-done{color:var(--shipped);background:var(--shipped-wash)}
.op-done { display:block; width:max-content; margin-top:9px; padding:5px 8px;
  font:600 12.5px/1 var(--f-cap); letter-spacing:.08em; text-transform:uppercase;
  color:var(--shipped); background:var(--shipped-wash); border-radius:2px; }
.b-sub { color:var(--amber-ink); background:var(--amber-wash); }
.b-sub::before { display:none; }

/* ---------- order plates ---------- */
.orders { display:grid; gap:10px; }
.order-plate { display:grid; grid-template-columns:minmax(180px,1.1fr) minmax(0,2.4fr) auto; align-items:center; gap:24px;
  padding:18px 22px; cursor:pointer; transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; }
.order-plate:hover, .order-plate:focus-visible { transform:translateY(-2px); box-shadow:var(--lift); border-color:var(--ink-2); }
.op-id { font:800 30px/1 var(--f-stencil); letter-spacing:.01em; overflow-wrap:anywhere; }
.op-label { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.op-label div { padding:0 14px; border-left:1px solid var(--rule); }
.op-label b { display:block; font:700 20px/1.1 var(--f-ui); margin-top:4px; }
.op-bar { grid-column:2 / 3; }
.op-bar .bar { margin:12px 0 0; height:8px; }
.op-go { color:var(--muted); display:flex; align-items:center; }
.order-plate:hover .op-go { color:var(--oxide); }
.op-marks { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12.5px; color:var(--muted); }
.op-marks span { display:inline-flex; align-items:center; gap:6px; }
.op-marks i { font-style:normal; color:var(--ink); font-weight:600; }

/* ---------- filters ---------- */
.toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:22px 0 12px; }
.chips { display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--rule-2); border-radius:3px; background:var(--plate); }
.chip { border:0; border-right:1px solid var(--rule); background:transparent; color:var(--ink-2); padding:10px 14px;
  font:600 13px/1 var(--f-cap); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.chip:last-child { border-right:0; }
.chip:hover { color:var(--ink); background:#fff; }
.chip.active { background:var(--ink); color:#fff; }
.chip i { font:600 13px/1 var(--f-ui); font-style:normal; opacity:.7; letter-spacing:0; }
.search { flex:1; min-width:220px; padding:10px 12px; font-size:15px; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px;
  border-top:2px solid var(--ink); font-size:13.5px; color:var(--muted); flex-wrap:wrap; }
.pager span:last-child { display:flex; gap:8px; }
.empty { padding:44px 16px; text-align:center; color:var(--muted); font-size:15px; }
.plate.empty { padding:44px 16px; }
.note { font-size:13px; color:var(--muted); margin-top:12px; line-height:1.6; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:3px; font-size:14px; z-index:50; box-shadow:var(--lift); }

/* ---------- shipment ---------- */
.track-plate { display:flex; flex-wrap:wrap; gap:0; padding:0; }
.track-plate > div { padding:18px 22px; border-right:1px solid var(--rule); min-width:180px; }
.track-plate > div:last-child { border-right:0; }
.track-plate b { display:block; font:700 18px/1.2 var(--f-ui); margin-top:6px; }
.track-plate .mono { font-size:15px; }

/* ---------- account statement ---------- */
.acct-plate { padding:24px 26px 20px; }
.acct-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.acct-tiles > div { padding:0 18px; border-left:1px solid var(--rule); }
.acct-tiles > div:first-child { padding-left:0; border-left:0; }
.acct-tiles b { display:block; font:700 40px/1 var(--f-cap); margin-top:8px; }
.acct-tiles .open b { color:var(--oxide); }
.acct-tiles .settled b { color:var(--shipped); }
.acct-detail { margin-top:22px; border-top:1px solid var(--rule); }
.acct-detail summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:14px 0 4px;
  font:600 13px/1 var(--f-cap); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.acct-detail summary::-webkit-details-marker { display:none; }
.acct-detail summary .ico { transition:transform .2s ease; }
.acct-detail[open] summary .ico { transform:rotate(90deg); }
.acct-detail summary:hover { color:var(--oxide); }
.acct-scroll { overflow-x:auto; margin-top:10px; }
table.acct { font-size:13.5px; }
table.acct th { padding:10px 12px 8px; background:transparent; }
table.acct td { padding:11px 12px; }
table.acct td:first-child { font-weight:700; }
table.acct .inv { font-weight:600; }
table.acct .bal { font-weight:700; }
.pay { display:flex; justify-content:space-between; gap:16px; }
.pay + .pay { margin-top:4px; }
.pay .sub { white-space:nowrap; }
.bal-open { color:var(--oxide); }
.acct-foot { font-size:13px; color:var(--muted); margin:14px 0 0; }

/* ---------- musteriye gorunen kalem notu (23 Eyl 2026) ---------- */
tr.has-note > td { background:var(--amber-wash); }
.note-btn { border:0; background:none; cursor:pointer; padding:0 2px; color:var(--amber-ink); vertical-align:middle; }
.note-btn:hover, .note-btn.open { color:var(--ink); }
.note-text { margin-top:8px; padding:8px 10px; max-width:44ch; background:#fff; border:1px solid var(--amber);
  font-size:13px; line-height:1.45; }
/* Ana ekranin ustundeki ozet bandi */
.portal-note { margin:28px 0 0; background:var(--amber-wash); border:1px solid var(--amber);
  font-size:14px; line-height:1.55; }
.portal-note summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:10px 14px; min-width:0; }
.portal-note summary::-webkit-details-marker { display:none; }
.portal-note .pn-cap { flex-shrink:0; font:700 12px/1 var(--f-cap); letter-spacing:.12em; text-transform:uppercase; color:var(--amber-ink); }
.portal-note .pn-new { margin-left:6px; padding:2px 6px; background:var(--amber); color:#fff; letter-spacing:.06em; }
.portal-note .pn-first { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.portal-note[open] .pn-first { visibility:hidden; }
.portal-note summary .ico { flex-shrink:0; transition:transform .2s ease; }
.portal-note[open] summary .ico { transform:rotate(90deg); }
.portal-note .pn-body { padding:0 14px 14px; }
.portal-note .pn-gap  { height:9px; }
.portal-note .pn-head { font:700 14px/1.3 var(--f-cap); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.portal-note .pn-line { margin:1px 0; }

/* ---------- dialog ---------- */
.dlg { border:0; padding:0; background:transparent; width:min(420px, calc(100vw - 32px)); }
.dlg .plate { padding:30px 26px 22px; box-shadow:0 24px 60px -20px rgba(21,24,27,.5); }
.dlg::backdrop { background:rgba(21,24,27,.45); }
.dlg h2 { font:700 24px/1 var(--f-cap); text-transform:uppercase; margin:0 0 20px; }
.dlg-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.dlg-actions .btn-solid { padding:10px 18px; }

/* ---------- responsive ---------- */
@media (max-width:980px) {
  .order-plate { grid-template-columns:1fr auto; gap:14px 18px; }
  .op-label { grid-column:1 / -1; grid-row:2; }
  .op-label div:first-child { padding-left:0; border-left:0; }
  .op-bar { grid-column:1 / -1; }
  .tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tile:nth-child(4) { padding-left:0; border-left:0; }
}
@media (max-width:760px) {
  .signin { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .door { height:190px; }
  .door-mark { width:130px; }
  .door-plate { bottom:22px; }
  .dp-code { font-size:38px; padding:10px 12px 6px; }
  .dp-rows { font-size:11.5px; padding:8px 12px; }
  .gate { justify-content:flex-start; padding:28px 16px 40px; }
  .signin-plate { padding:34px 22px 24px; max-width:none; }
  .topbar-in { padding:10px 16px; gap:14px; }
  .brand img { width:92px; }
  .brand-tag { display:none; }
  .wrap { padding:0 16px 64px; }
  .page-title { font-size:34px; }
  .page-title.stencil { font-size:40px; }
  .big { font-size:48px; }
  .manifest, .acct-plate { padding:20px 16px 16px; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile, .tile + .tile { padding:12px 10px 4px 0; border-left:0; }
  .tile:nth-child(even) { padding-left:12px; border-left:1px solid var(--rule); }
  .acct-tiles { grid-template-columns:1fr; gap:14px; }
  .acct-tiles > div { padding:0; border-left:0; }
  .topbar { position:static; }
  .pay { flex-direction:column; gap:0; }
  .pay > span:first-child { display:flex; flex-direction:column; }
  .pay .num { text-align:left; }
  .pay + .pay { margin-top:10px; }
  table.acct td:first-child { word-break:break-word; min-width:0; max-width:110px; }
  table.acct td, table.acct th { padding-right:8px; }
  .acct-plate table.acct td, .acct-plate table.acct th { padding-left:0; }
  .hide-sm { display:none; }
  .track-plate > div { border-right:0; border-bottom:1px solid var(--rule); width:100%; }
  .chips { width:100%; }
  .chip { flex:1 1 auto; justify-content:center; padding:10px 10px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ---------- siparis belgeleri ---------- */
.docs { display:grid; gap:0; }
.doc { display:flex; gap:12px; align-items:center; padding:12px 16px; background:none; border:0; border-bottom:1px solid var(--rule);
  text-align:left; cursor:pointer; color:var(--ink); font:inherit; }
.doc:last-child { border-bottom:0; }
.doc:hover { background:var(--ground); color:var(--oxide); }
.doc span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.doc small { color:var(--muted); font-size:12.5px; }

/* ---------- yeni PO ---------- */
h2.sec .sec-btn { margin-left:auto; font-size:14px; }
.po-preview { font-size:14px; color:var(--ink-2); min-height:20px; }
.sub-declined { opacity:.85; }
.sub-note { grid-column:1 / -1; margin:8px 0 0; color:var(--unavail); font-size:13.5px; }
#po-dlg textarea { width:100%; font:13px/1.5 ui-monospace, monospace; }

/* katalog karti (28 Eyl 2026) */
.cat-card { margin:24px 0; padding:16px; background:var(--plate); border:1px solid var(--rule);
  display:grid; gap:12px; }
.cat-main { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cat-meta { flex:1 1 220px; display:flex; flex-direction:column; gap:2px; }
.cat-main .btn-solid { padding:9px 14px; }
.cat-meta .muted { color:var(--muted); font-size:14px; }
.cat-langs { display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--rule); padding-top:12px; }
.cat-lang { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cat-pricing { font-size:14px; border-top:1px solid var(--rule); padding-top:12px; }

/* Ilk giris / sifre kurulumu baglantisi (30 Eyl 2026) */
.linklike { display:inline-block; margin-top:14px; padding:0; background:none; border:0;
  color:var(--muted); font:500 13.5px/1.3 inherit; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; }
.linklike:hover { color:var(--ink, inherit); }

/* ---------- ekip musteri gorunumu (salt okunur) ---------- */
.view-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:8px 24px;
  background:var(--amber-wash); color:var(--amber-ink); border-bottom:1px solid var(--amber); font-size:14px; }
.view-bar .vb-tag { font:600 12px/1.2 var(--f-cap); letter-spacing:.14em; text-transform:uppercase; }
.view-bar .vb-sel { display:flex; align-items:center; gap:8px; }
.view-bar select { font:500 14px/1.2 var(--f-ui); padding:6px 8px; border:1px solid var(--rule-2);
  border-radius:4px; background:var(--plate); color:var(--ink); max-width:100%; }
.view-bar .vb-back { margin-left:auto; }
.view-mode #btn-new-po, .view-mode #btn-pw, .view-mode #btn-out, .view-mode .acct-menu .caret { display:none; }
.view-mode .acct-menu summary { pointer-events:none; }
@media (max-width:640px) { .view-bar { padding:8px 16px; } .view-bar .vb-back { margin-left:0; } }