:root {
  --bg: #f7f4ef;
  --ink: #1a1a1a;
  --muted: #5c6b78;
  --blue: #0b4f9c;
  --blue-deep: #0a3a74;
  --line: #d0c8bc;
  --card: #fff;
  --orange: #c45c12;
  --sand: #f0ebe3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); }
.card, .sheet { background: var(--card); border: 1px solid #e0dbd2; border-radius: 8px; padding: 16px; }
.brand { font-size: 22px; font-weight: 700; color: var(--blue-deep); }
.sub { color: #3d4f63; font-size: 12px; font-weight: 600; margin: 2px 0 0; }
.who { display: inline-block; margin-top: 6px; background: #fff; border: 1px solid #b7d0ea; border-radius: 6px; padding: 3px 8px; color: var(--blue); font-size: 12px; font-weight: 700; }
.muted { color: #666; }
.msg { min-height: 1.2em; color: #8a3d0a; font-weight: 600; }
.msg.ok { color: #17835e; }
label { display: block; margin: 10px 0; font-weight: 600; color: #555; font-size: 12px; }
input, select, textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
textarea { min-height: 64px; }
.btn { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.btn.ghost.printed { background: #17835e; color: #fff; border-color: #17835e; }
.btn.ok { background: #17835e; color: #fff; }
.btn.ok:disabled { opacity: 0.7; }
.btn.warn { background: var(--orange); }
.btn.slim { padding: 6px 10px; font-size: 12px; }
.btn.del { color: #b42318; border-color: #e7b2ac; }
.app { max-width: 1100px; margin: 0 auto; padding: 16px; }
.shell { display: flex; align-items: flex-start; gap: 16px; margin-top: 12px; }
.work { flex: 1; min-width: 0; display: grid; gap: 12px; align-content: start; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #eef5fc; border: 1.5px solid #b7d0ea; border-radius: 14px; padding: 12px; }
.brand-block { display: flex; gap: 12px; align-items: center; }
.mark { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1.5px solid #8fb4d8; color: var(--blue); display: grid; place-items: center; font-weight: 800; font-size: 26px; }
.tabs { display: flex; flex-direction: column; flex: 0 0 188px; width: 188px; gap: 6px; margin: 0; }
.tab { width: 100%; text-align: left; border-radius: 10px; border: 1.5px solid var(--line); background: var(--sand); padding: 7px 11px; font-weight: 700; cursor: pointer; color: #3a4a44; }
.tab.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.tab.haz { background: #eef5fc; border-color: #8fb4d9; color: #0a3a74; }
.tab.kar { background: #e8f5ef; border-color: #7ed0a8; color: #17835e; }
.tab.tam { background: #d8f5e5; border-color: #7ed0a8; color: #0a6b42; }
.tab.olustur { background: #fff6eb; border-color: #e0a86a; color: #8a3d0a; }
.tab.kisiler { background: #f3f7ee; border-color: #9bbb7a; color: #1f5a2c; }
.view { display: grid; gap: 12px; }
.sheet-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 16px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row input { margin-top: 0; flex: 1; min-width: 160px; }
.chip { border-radius: 10px; padding: 7px 11px; border: 1.5px solid; font-weight: 800; cursor: pointer; background: #fff; }
.chip.haz { color: #0a3a74; background: #eef5fc; border-color: #8fb4d9; }
.chip.kar { color: #17835e; background: #e8f5ef; border-color: #7ed0a8; }
.chip.tam { color: #0a6b42; background: #d8f5e5; border-color: #7ed0a8; }
.chip.on { outline: 2px solid var(--blue); }
.list { border: 1px solid #e8e4dc; border-radius: 6px; overflow: hidden; }
.ship-list { border: 0; overflow: visible; display: grid; gap: 12px; background: transparent; }
.ship-list .line { border: 2px solid #b7aea2; border-radius: 12px; padding: 12px; background: #fff; }
.ship-when { font-weight: 800; color: #1a1a1a; }
.ship-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid #efeae3; }
.ship-edit input[readonly] { background: #f6f3ee; color: #666; }
.print-ico { display: block; }
.line { display: grid; grid-template-columns: 6px 1fr auto; gap: 10px; align-items: start; padding: 8px 8px 8px 0; border-bottom: 1px solid #f0ebe3; background: #fff; }
.line:last-child { border-bottom: 0; }
.swatch { min-height: 100%; border-radius: 0 3px 3px 0; }
.line b { display: block; }
.meta { color: #777; font-size: 12px; margin-top: 2px; }
.carrier { font-weight: 800; }
.side { display: grid; gap: 6px; justify-items: end; }
.pill { border-radius: 10px; padding: 4px 10px; font-size: 11px; font-weight: 800; background: #e7f0ff; color: #1e4d8c; }
.pill.hata { background: #f8d7da; color: #721c24; }
.pill.kargolandi { background: #17835e; color: #fff; }
.pill.tamam { background: #d8f5e5; color: #0a6b42; }
.cargo-line { display: grid; grid-template-columns: minmax(200px, 1.1fr) auto minmax(0, 2.2fr); gap: 10px; align-items: end; }
.cargo-line label { margin-bottom: 0; }
.cargo-line .phone-fit { width: max-content; }
.cargo-line .phone-fit input { width: 15ch; padding-left: 8px; padding-right: 8px; }
.cargo-line .note-fit textarea { min-height: 0; height: 38px; resize: vertical; }
.cargo-drop { position: relative; margin: 0; }
.cargo-drop-btn { position: relative; display: block; width: 100%; text-align: left; border: 0; border-radius: 10px; padding: 12px 40px 12px 14px; font-weight: 800; cursor: pointer; background: var(--tone); color: var(--on, #fff); }
.cargo-drop-btn::after { content: ""; position: absolute; right: 16px; top: 50%; margin-top: -3px; border: 6px solid transparent; border-top-color: currentColor; }
.cargo-drop-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; display: grid; gap: 6px; max-height: 262px; overflow-y: auto; background: #fff; border: 1px solid #e0dbd2; border-radius: 12px; padding: 8px; box-shadow: 0 10px 28px rgba(26, 26, 26, 0.12); }
.cargo-drop-list.hidden { display: none; }
.ship-pick { display: block; width: 100%; text-align: left; border: 2px solid var(--tone); background: #fff; color: var(--tone); border-radius: 8px; padding: 10px 12px; font-weight: 800; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.title { font-family: Georgia, "Times New Roman", serif; font-size: 26px; margin: 0 0 12px; }
.recipient { background: #eef5fc; border-color: #8fb4d9; }
.sender { background: #fff6eb; border-color: #e0a86a; }
.hits { border: 1px solid #e8e4dc; background: #fafaf8; border-radius: 6px; max-height: 200px; overflow: auto; }
.hit { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #f0ebe3; padding: 8px 10px; cursor: pointer; }
.hit:hover { background: #eef5fc; }
.qr { display: flex; justify-content: center; background: #fff; border: 1px solid #e0e6e3; border-radius: 6px; padding: 8px; }
.server-qr { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; background: #fff; border: 1.5px solid #b7d0ea; border-radius: 14px; padding: 12px; }
.server-qr h2 { margin: 0 0 4px; font-size: 16px; color: var(--blue-deep); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cargo-list { display: grid; gap: 12px; }
.cargo-card { background: #fff; border: 1px solid #e0dbd2; border-radius: 16px; padding: 14px; box-shadow: 0 1px 0 rgba(26, 26, 26, 0.03); }
.cargo-card.open { border-color: var(--tone, #b7d0ea); box-shadow: 0 8px 24px rgba(11, 79, 156, 0.08); }
.cargo-top { display: flex; align-items: center; gap: 12px; }
.cargo-mark { width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; flex: 0 0 auto; }
.cargo-meta { flex: 1; min-width: 0; }
.cargo-meta b { display: block; font-size: 16px; }
.cargo-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cargo-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid #efeae3; }
.cargo-form label:first-child { margin-top: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.check input { width: auto; margin: 0; }
.paper { position: fixed; left: -10000px; top: 0; }
.print-kind { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.yci-label { background: #fff; color: #111; border: 1px solid #d0c8bc; padding: 0.65rem 0.75rem 0.85rem; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; max-width: 20rem; }
.yci-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; }
.yci-yk { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.04em; }
.yci-time { font-size: 0.72rem; white-space: nowrap; padding-top: 0.15rem; }
.yci-frame { display: grid; grid-template-columns: 1fr 3.85rem; border: 1.5px solid #111; min-height: 11rem; }
.yci-body { display: flex; flex-direction: column; min-width: 0; }
.yci-block { display: grid; grid-template-columns: 1.1rem 1fr; border-bottom: 1.5px solid #111; }
.yci-block:last-child { border-bottom: 0; flex: 1; }
.yci-gon { min-height: 2.6rem; }
.yci-rail { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center; border-right: 1.5px solid #111; padding: 0.2rem 0; }
.yci-content { padding: 0.35rem 0.45rem; font-size: 0.72rem; line-height: 1.25; }
.yci-gon .yci-content { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; white-space: pre-wrap; }
.yci-name { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 800; text-transform: uppercase; }
.yci-addr, .yci-line, .yci-piece { margin: 0.15rem 0 0; }
.yci-piece { margin-top: 0.55rem; font-weight: 700; }
.yci-vbar { border-left: 1.5px solid #111; display: flex; overflow: hidden; min-height: 11rem; }
.yci-vbar-bc { flex: 1; position: relative; min-width: 0; }
.yci-vbar-rot { position: absolute; left: 50%; top: 50%; width: 10.5rem; height: 1.85rem; margin-left: -5.25rem; margin-top: -0.92rem; transform: rotate(-90deg); display: flex; align-items: center; justify-content: center; }
.yci-vbar-rot canvas, .yci-vbar-rot img { width: 100%; height: 100%; object-fit: contain; }
.yci-vcode { flex: 0 0 1.15rem; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 0.62rem/1.05 ui-monospace, Consolas, monospace; display: flex; align-items: center; justify-content: center; border-left: 1px solid #ddd; }
.yci-hbar { margin-top: 0.65rem; text-align: center; }
.yci-hbar canvas, .yci-hbar img { max-width: 100%; height: auto; }
.yci-hcode { margin: 0.2rem 0 0; font: 700 0.95rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.08em; }
@media print {
  #login, #app, #paperPrint, #paperNote { display: none !important; }
  #paper, .paper { position: absolute; left: 0; top: 0; margin: 0; }
  .yci-label { border: 0; }
}
@media (max-width: 700px) {
  .app { padding: 8px; }
  .top { flex-direction: column; align-items: stretch; }
  .shell { gap: 8px; }
  .tabs { flex: 0 0 132px; width: 132px; }
  .tab { padding: 8px; font-size: 13px; }
  .grid2, .grid3, .pair, .server-qr, .cargo-line { grid-template-columns: 1fr; }
  .cargo-top { align-items: flex-start; }
  .server-qr { flex-direction: column; align-items: stretch; }
  .line { grid-template-columns: 6px 1fr; }
  .side { justify-items: start; grid-column: 2; }
  input, select, textarea, .btn { font-size: 16px; }
  .btn, .tab, .chip { min-height: 44px; }
}