/* Compel Teklif — İsviçre ızgarası.
   Tek aile (Montserrat, OFL, kendi sunucumuzdan), tek vurgu rengi (Compel mavisi),
   yapı 1px kural çizgileriyle; gölge yok, köşe en fazla 2px. */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #23201f;
  --ink-2: #4a4f55;
  --muted: #6b7178;
  --rule: #d9dde1;
  --rule-strong: #23201f;
  --field: #f3f5f7;
  --paper: #ffffff;
  --ground: #fafbfc;
  --blue: #3990bf;
  --blue-ink: #24739e;
  --blue-deep: #1d5f84;   /* birincil düğme hover: beyaz yazı 6.95:1 */
  --field-line: #8c949c;  /* kart içi alan çerçevesi: beyaz zeminde 3.07:1 (WCAG 1.4.11) */
  --blue-wash: #eaf3f8;
  --internal: #fbf7ec;
  --internal-rule: #e6dcc0;
  --internal-ink: #8a6d1f;
  --internal-ink-strong: #735a18; /* krem başlık bandında küçük yazı için (4.5:1 üstü) */
  --neg: #b42318;
  --ok: #1d7a5c;
  --radius: 2px;
  --gap: 24px;
  --row: 36px;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}
* { box-sizing: border-box; }
/* hidden özelliği, öğeye verilen display kuralından her zaman üstün gelir */
[hidden] { display: none !important; }
html { scrollbar-color: #c3c9cf transparent; scroll-padding-block: 64px calc(var(--totalbar-h, 88px) + 16px); }
body { margin: 0; background: var(--ground); -webkit-font-smoothing: antialiased; }
::selection { background: var(--blue); color: #fff; }
a { color: var(--blue-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Hover yalnız fareli/kalemli cihazlarda: dokunmatikte :hover dokunuştan sonra takılı kalır. */
@media (hover: hover) { a:hover { color: var(--ink); } }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 26px; line-height: 1.1; }
h2 { font-size: 15px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--field); padding: 1px 5px; border-radius: var(--radius); }
.icon { flex: none; display: block; }
.num, .fig { font-variant-numeric: tabular-nums lining-nums; }
.num { text-align: right !important; white-space: nowrap; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mikro etiket: büyük harf, aralıklı */
.label, label > span, .fld > .lbl, .field-label, th, dt, legend {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* Üst çubuk */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 40px; overflow-x: auto;
  height: 56px; padding: 0 32px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.topbar .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.topbar .brand img { height: 15px; width: auto; display: block; }
.topbar .brand span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding-left: 12px; border-left: 1px solid var(--rule); }
.topbar nav { display: flex; gap: 28px; align-self: stretch; }
.topbar nav a { display: flex; align-items: center; color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
@media (hover: hover) { .topbar nav a:hover { color: var(--ink); } }
.topbar nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue); }
.who { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-2); }
.who a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .who a:hover { color: var(--ink); } }

.page { padding: 32px; max-width: 1680px; margin: 0 auto; }
.flash { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 24px; background: var(--paper);
  border: 1px solid var(--rule); border-top: 2px solid var(--ok); font-size: 13px; }
.error { color: var(--neg); font-size: 13px; margin-bottom: 12px; }

/* Sayfa başlığı */
.pagehead { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.pagehead .spacer { flex: 1; }
.pagehead .doc-no { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.pagehead .doc-no .draft { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 10px; }
.actions-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--row); padding: 0 16px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s; }
/* Birincil düğme koyu mavi: beyaz yazı Compel mavisinde 3.55:1 kalıyordu, burada 5.22:1. */
.btn.primary { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.btn.small { height: 30px; padding: 0 12px; font-size: 12px; }
/* Önde ikon olan düğmede ikon tarafı 2px dar: ikonun boş kenarı optik boşluğu zaten büyütür. */
.btn:has(> .icon:first-child) { padding-left: 14px; }
.btn.small:has(> .icon:first-child) { padding-left: 10px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
/* Pasif düğme hover almaz; :where() özgüllüğü artırmaz, .ghost gibi türler sırayla üstün kalır. */
@media (hover: hover) {
  .btn:hover:where(:not(:disabled)) { border-color: var(--ink); color: var(--ink); }
  .btn.primary:hover:where(:not(:disabled)) { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
  .btn.ghost:hover:where(:not(:disabled)) { color: var(--ink); background: var(--field); border-color: transparent; }
}
.btn:disabled { opacity: .45; cursor: default; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); cursor: pointer; }
@media (hover: hover) {
  .iconbtn:hover { color: var(--ink); border-color: var(--rule); background: var(--paper); }
  .iconbtn.danger:hover { color: var(--neg); border-color: #f0c8c4; }
}
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-ink); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; }
.link.danger { color: var(--neg); }

/* Segmentli seçim */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.seg label { display: flex; align-items: center; height: 34px; padding: 0 14px; margin: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.seg label + label { border-left: 1px solid var(--rule); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blue); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Form alanları: etiket üstte, gri zemin, altta kural */
label { display: block; margin: 0; }
label > span { display: block; margin-bottom: 6px; }
input, select, textarea { display: block; width: 100%; height: var(--row); padding: 0 10px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--field); border: 1px solid transparent; border-bottom-color: #c3c9cf;
  border-radius: var(--radius) var(--radius) 0 0; transition: border-color .15s, background-color .15s; }
textarea { height: auto; padding: 8px 10px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
@media (hover: hover) { input:hover, select:hover, textarea:hover { border-bottom-color: var(--ink-2); } }
input:focus, select:focus, textarea:focus { outline: none; background: var(--paper); border-color: var(--blue); border-radius: var(--radius); }
select { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); display: inline-block; vertical-align: middle; }
input[type=file] { height: auto; padding: 8px; background: var(--paper); border: 1px dashed #c3c9cf; }
input[type=date] { font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Izgara */
.grid { display: grid; gap: var(--gap); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.fields { display: grid; gap: 16px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields .wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .cols-3, .cols-2 { grid-template-columns: minmax(0, 1fr); } }

/* Bölüm: kalın kural + başlık; kutu yok */
.section { padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.section > h2, .section > header h2 { margin-bottom: 16px; }
.section > header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.section > header h2 { margin: 0; }
.section > header .hint { font-size: 12.5px; color: var(--muted); }
.section > header .spacer { flex: 1; }
label.inline { display: flex; align-items: center; gap: 10px; }
label.inline > span { margin: 0; }
label.inline select { width: auto; height: 32px; font-size: 12.5px; }
.panel { background: var(--paper); border: 1px solid var(--rule); padding: 20px; }

/* Liste tablosu */
table.list { width: 100%; border-collapse: collapse; background: var(--paper); border-top: 1px solid var(--rule-strong); }
table.list th { text-align: left; padding: 12px 12px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.list td { padding: 0 12px; height: 48px; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
table.list tbody tr { transition: background-color .12s; }
table.list tbody tr:hover { background: #f6f8fa; }
table.list .no { font-weight: 600; font-variant-numeric: tabular-nums; }
table.list .no a { color: var(--ink); text-decoration: none; }
table.list .no a:hover { color: var(--blue-ink); text-decoration: underline; }
table.list .amount { font-weight: 600; }
table.list .cur { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 4px; }
table.list td.actions { width: 1%; white-space: nowrap; text-align: right; }
div.actions { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
div.actions form { display: contents; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius); }
.tag.proforma { color: var(--blue-ink); border-color: #b8d6e7; }
.empty { padding: 56px 12px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; font-weight: 600; }

.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.search input { width: 340px; padding-left: 34px; }
.filters { gap: 8px; }
.filters select { width: auto; min-width: 200px; }
.search-box { position: relative; display: flex; align-items: center; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.icon.flip { transform: scaleX(-1); }
table.list tr.eol td { color: var(--muted); }
.count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Teklif ekranı: üstte dört kolon, tablo tam genişlik, toplam çubuğu altta sabit */
/* Toplam çubuğu kısa tekliflerde de ekranın dibine otursun */
.page:has(> #quote-form) { padding-bottom: 0; }
#quote-form { display: flex; flex-direction: column; min-height: calc(100vh - 56px - 32px); }
.quote { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 36px; padding-bottom: 32px; }
.quote > * { min-width: 0; }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1360px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cols-4 { grid-template-columns: minmax(0, 1fr); } }

.rates { display: flex; align-items: flex-end; gap: 12px; }
.rates label { flex: 1; }
.rates .btn { flex: none; }
.rate-status { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 16px; }
.rate-status.is-error { color: var(--neg); }

/* Kalem tablosu */
.table-wrap { position: relative; overflow-x: auto; border-top: 1px solid var(--rule-strong); background: var(--paper); }
table.lines { width: 100%; border-collapse: collapse; min-width: 1180px; }
table.lines th { text-align: left; padding: 10px 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--paper); }
table.lines th.num { text-align: right; }
table.lines td { padding: 4px 3px; border-bottom: 1px solid #eceff2; vertical-align: middle; }
table.lines tbody tr:focus-within { background: var(--blue-wash); }
table.lines td.idx { width: 28px; padding-left: 8px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
table.lines select { padding: 0 24px 0 8px; background-position: right 6px center; }
table.lines input, table.lines select { height: 32px; font-size: 13px; background: transparent; border-color: transparent; border-radius: var(--radius); }
@media (hover: hover) { table.lines input:hover, table.lines select:hover { background: var(--field); border-bottom-color: transparent; } }
table.lines input:focus, table.lines select:focus { background: var(--paper); border-color: var(--blue); }
table.lines input.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lines .w-qty { width: 64px; }
table.lines .w-brand { width: 120px; }
table.lines .w-stock { width: 104px; }
table.lines .w-cur { width: 84px; }
table.lines .w-price { width: 96px; }
table.lines .w-pct { width: 68px; }
table.lines .w-out { width: 104px; }
table.lines .out { padding: 0 8px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-size: 13px; }
table.lines .out-total { font-weight: 600; }
table.lines .internal, table.lines th.internal { background: var(--internal); }
table.lines th.internal { box-shadow: inset 0 2px 0 var(--internal-rule); }
table.lines tbody tr:focus-within .internal { background: #f6efdc; }
table.lines td.del { width: 36px; }
/* Sil sütunu yatay kaydırmada sağda sabit; soldaki gölge arkada sütun olduğunu gösterir */
table.lines th:last-child, table.lines td.del { position: sticky; inset-inline-end: 0; z-index: 1; background: var(--paper);
  box-shadow: -10px 0 10px -10px rgba(20, 30, 40, .25); }
table.lines tbody tr:focus-within td.del { background: var(--blue-wash); }
.lines-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; align-items: center; }
.lines-foot .spacer { flex: 1; }
.kbd { font-size: 11.5px; color: var(--muted); }
.kbd kbd { font: inherit; font-weight: 600; color: var(--ink-2); padding: 1px 5px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.neg { color: var(--neg) !important; }

/* Toplam çubuğu: ekranın altına yapışık, genel toplam en büyük rakam */
.totalbar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 40px;
  margin: 0 -32px; padding: 14px 32px; background: var(--paper); border-top: 2px solid var(--blue); }
.totalbar dl { display: flex; gap: 40px; margin: 0; }
.totalbar dl > div { display: grid; gap: 4px; }
.totalbar dd { margin: 0; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.totalbar .spacer { flex: 1; }
.totalbar .grand-wrap { display: grid; justify-items: end; gap: 2px; }
.totalbar .grand-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.totalbar .grand { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.totalbar .grand .cur { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.totalbar .grand.tick { animation: tick .6s cubic-bezier(.16, 1, .3, 1); }
.totalbar .btn { height: 44px; padding: 0 28px; font-size: 14px; }
@keyframes tick { from { color: var(--blue); } to { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .totalbar .grand.tick { animation: none; } }
@media (max-width: 900px) {
  .totalbar { flex-wrap: wrap; gap: 12px 24px; margin: 0 -16px; padding: 12px 16px; }
  .totalbar dl { gap: 20px; width: 100%; }
  .totalbar .grand { font-size: 26px; }
}
/* Telefonda toplam çubuğu kısa kalsın: rakamlar sarar, genel toplam solda */
@media (max-width: 760px) {
  .lines-foot .kbd { flex-basis: 100%; }
  .totalbar dl { flex-wrap: wrap; gap: 4px 16px; }
  .totalbar dt { white-space: nowrap; }
  .totalbar .spacer { display: none; }
  .totalbar .grand-wrap { flex: 1; justify-items: start; }
}

/* İç bilgi: yazdırılmayan, sıcak zeminli bölüm */
.internal-panel { background: var(--internal); border-top-color: var(--internal-rule); padding: 14px 16px 16px; }
.internal-panel h2 span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--internal-ink-strong); margin-left: 6px; }
.internal-panel dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 14px; font-size: 13px; }
.internal-panel dt { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.internal-panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.internal-panel textarea { background: #fffdf6; }

/* Öneri listesi (combobox) */
.suggest { position: absolute; z-index: 50; background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
  max-height: 360px; overflow-y: auto; padding: 4px 0; }
.suggest [role=option] { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 8px 12px; cursor: pointer; }
.suggest [role=option][aria-selected=true] { background: var(--blue-wash); }
.suggest [role=option][aria-selected=true] .s-name { color: var(--blue-ink); }
/* Mavi zeminde gri yardımcı yazı 4.39:1 kalıyordu; seçili seçenekte --ink-2 */
.suggest [role=option][aria-selected=true] :is(.s-meta, .s-side, .s-src:not(.dealer)) { color: var(--ink-2); }
.suggest .s-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.suggest .s-price { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.suggest .s-meta { font-size: 11.5px; color: var(--muted); }
.suggest .s-side { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.suggest .s-eol { opacity: .62; }
.suggest .s-eol .s-name::after { content: "EOL"; margin-left: 8px; font-size: 10px; letter-spacing: .06em; color: var(--neg);
  border: 1px solid currentColor; border-radius: var(--radius); padding: 0 4px; vertical-align: 1px; }
.suggest .s-empty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }

/* Giriş */
.page:has(> .login-wrap) { padding: 0; max-width: none; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login { width: 100%; max-width: 380px; background: var(--paper); border-top: 2px solid var(--blue); padding: 32px; display: grid; gap: 18px; }
.login img { height: 18px; width: auto; }
.login h1 { font-size: 20px; }
.login .btn { width: 100%; }

@media (max-width: 760px) {
  .topbar { padding: 0 16px; gap: 16px; overflow-x: auto; }
  .topbar .brand span, .who .name { display: none; }
  .page { padding: 20px 16px; }
  .pagehead .doc-no { font-size: 30px; }
  .search input { width: 100%; }
  .search { flex: 1; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  input[type=date] { min-width: 0; }
  .topbar nav a { white-space: nowrap; }
  .pagehead { gap: 16px; }
}

/* LOGO cari bağlantısı: müşteri başlığının yanında küçük bir künye */
.cust-link { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; color: var(--ink-2); vertical-align: 1px; }
.cust-link b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cust-link .link { font-size: 11.5px; color: var(--ink-2); }
@media (hover: hover) { .cust-link .link:hover { color: var(--neg); } }
.suggest .s-src { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.suggest .s-src.dealer { color: var(--blue-ink); }

/* ERP'ye bağlı kalem: sıra numarası yerine mavi bağlantı işareti, model kalın */
table.lines td.idx .erp { display: none; color: var(--blue); }
table.lines tr.linked td.idx .erp { display: inline-flex; }
table.lines tr.linked td.idx .idx-n { display: none; }
table.lines tr.linked [data-f="model"] { font-weight: 600; }
table.lines input.refilled { animation: refill 1.2s cubic-bezier(.16, 1, .3, 1); }
@keyframes refill { from { background: var(--blue-wash); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { table.lines input.refilled { animation: none; } }
.kbd .inline-link { display: inline-block; vertical-align: -3px; color: var(--blue); width: 14px; height: 14px; }

/* Alan uyarıları */
.field-error { display: block; margin-top: 6px; font-size: 12px; color: var(--neg); }
.field-note { margin: 0; padding: 8px 10px; font-size: 12.5px; color: var(--ink-2); background: var(--blue-wash); border-radius: var(--radius); }

/* Teklifler: müşteri tablosu sayfanın gövdesi; açılan müşterinin teklifleri satırın altında */
.quotes-head .search input { padding-right: 38px; }
.search .clear { position: absolute; right: 3px; }
table.customers { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--paper);
  border-top: 1px solid var(--rule-strong); }
table.customers .w-count { width: 80px; }
table.customers .w-last { width: 210px; }
table.customers .w-total { width: 150px; }
table.customers .w-valid { width: 84px; }
table.customers .w-rep { width: 150px; }
table.customers > thead th { text-align: left; padding: 12px 12px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.customers tr.sum > td { padding: 0 12px; height: 52px; border-bottom: 1px solid var(--rule); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.customers tr.sum { cursor: pointer; transition: background-color .12s; }
table.customers tr.sum:hover { background: #f6f8fa; }
table.customers .who { border-left: 3px solid transparent; padding-left: 9px; }
table.customers .cust-name { color: var(--ink); font-weight: 600; text-decoration: none; }
table.customers .cust-name:focus-visible { outline-offset: 2px; }
table.customers .code { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
table.customers .m-meta { display: none; }
table.customers .last .no { font-weight: 600; font-variant-numeric: tabular-nums; }
table.customers .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
table.customers .cur { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 4px; }
table.customers .has-valid { color: var(--ok); font-weight: 600; }
/* Açık müşteri: mavi zemin ve sol kenar; ayrıntı aynı kenar çizgisiyle altına bağlanır */
table.customers tbody.open tr.sum { background: var(--blue-wash); }
table.customers tbody.open .who { border-left-color: var(--blue); }
table.customers tbody.open .muted { color: var(--ink-2); }
/* Klavye vurgusu (arama kutusundan oklarla), seçili satırdan ayrı */
table.customers tbody.active tr.sum { outline: 1px solid var(--blue); outline-offset: -1px; }
table.customers tbody { scroll-margin-top: 72px; }
/* Carisiz teklifler: krem zemin bilerek; "bağlanacak iş" listesi, iç bilgi gibi müşteriye gitmez */
table.customers tbody.unlinked tr.sum { background: var(--internal); }
table.customers tbody.unlinked tr.sum > td { border-bottom-color: var(--internal-rule); }
table.customers tbody.unlinked .cust-name { color: var(--internal-ink); }
table.customers tbody.unlinked.open .who { border-left-color: var(--internal-ink); }
table.customers tr.detail > td { padding: 0 0 20px 12px; border-left: 3px solid var(--blue); border-bottom: 1px solid var(--rule-strong); }
table.customers tbody.unlinked tr.detail > td { border-left-color: var(--internal-ink); }
.detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 12px 14px 0; }
.detail-head .spacer { flex: 1; }
.detail-head .sub { margin: 0; max-width: 72ch; font-size: 12.5px; color: var(--muted); }
.detail-head .sub strong { color: var(--ink-2); font-weight: 600; }
.detail .more { margin: 0; padding: 12px 0 0; font-size: 13px; }
table.quotes { border-top-color: var(--rule); }
table.quotes .no, table.quotes .fig { white-space: nowrap; }
table.quotes .latest { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--muted); }
table.quotes .expired { color: var(--muted); }
table.quotes .m-date { display: none; }
table.quotes .iconbtn.danger { margin-left: 8px; }
.empty.small { padding: 20px 12px; font-size: 12.5px; }
@media (max-width: 1280px) {
  table.customers .w-rep { width: 0; }
  table.customers .rep, table.customers th:last-child { display: none; }
  table.quotes .opt { display: none; }
}
@media (max-width: 760px) {
  .quotes-head .search { order: 5; flex: 1 0 100%; }
  .quotes-head .search input { width: 100%; }
  .quotes-head .spacer { display: none; }
  /* Telefonda müşteri satırı iki satır: ad + kod, altında sayı ve son tarih; sağda son tutar */
  table.customers, table.customers > tbody { display: block; }
  table.customers > colgroup, table.customers > thead { display: none; }
  table.customers tr.sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    padding: 10px 8px 10px 9px; border-bottom: 1px solid var(--rule); }
  table.customers tr.sum > td { display: none; height: auto; padding: 0; border: 0; }
  table.customers tr.sum > td.who, table.customers tr.sum > td:nth-child(4) { display: block; }
  table.customers tr.sum > td.who { justify-self: stretch; width: 100%; min-width: 0; text-align: left; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  table.customers .m-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
  table.customers tr.detail { display: block; }
  table.customers tr.detail > td { display: block; padding: 0 8px 16px; }
  .detail-head .btn { width: 100%; }
  table.quotes thead { display: none; }
  table.quotes, table.quotes tbody { display: block; }
  table.quotes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px;
    padding: 12px 4px; border-bottom: 1px solid var(--rule); }
  table.quotes td { display: block; height: auto; padding: 0; border: 0; }
  table.quotes .m-hide, table.quotes .opt { display: none; }
  table.quotes td.no { grid-row: 1 / 3; }
  table.quotes td.num { grid-column: 2; }
  table.quotes td.actions { grid-column: 2; width: auto; }
  table.quotes .m-date { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: normal; }
  table.quotes .iconbtn { width: 36px; height: 36px; }
}

/* Teklif ekranı: belge başlığı ipucu ve kayıt geçmişi (kapalı gelir; açılınca en yeni kayıt üstte) */
.field-hint { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.history summary { list-style: none; cursor: pointer; }
.history summary::-webkit-details-marker { display: none; }
.history summary h2 { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.history summary h2::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(-45deg); transition: transform .15s; align-self: center; }
.history[open] summary h2::before { transform: rotate(45deg); }
.history summary .count { font-weight: 400; color: var(--ink-2); }
.history ol { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.history ol > li { display: grid; grid-template-columns: 220px minmax(0, 1fr) 160px; gap: 24px; padding: 12px 0;
  border-bottom: 1px solid var(--rule); font-size: 13px; }
.history .when { display: grid; gap: 2px; }
.history .when time { font-weight: 600; font-variant-numeric: tabular-nums; }
.history .when span { color: var(--muted); font-size: 12px; }
.history .what ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; color: var(--ink-2); }
.history .amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.history .cur { color: var(--muted); font-size: 11.5px; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .history summary h2::before { transition: none; } }
@media (max-width: 760px) { .history ol > li { grid-template-columns: minmax(0, 1fr) auto; } .history .what { grid-column: 1 / -1; grid-row: 2; } }

/* Excel'den aktar: yükle → önizle (müşteri–cari eşleştirme, teklif listesi) → aktar */
.pagehead .back { display: inline-flex; align-items: center; gap: 6px; flex-basis: 100%; margin-bottom: -12px;
  font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.pagehead .back:hover { color: var(--ink); }
.section .lead { margin: 0 0 16px; max-width: 72ch; font-size: 13px; color: var(--ink-2); }
.upload-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.upload-row .file input { width: auto; height: auto; padding: 8px 0; background: none; border: 0; font-size: 13px; }
.upload-row .progress { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.upload-row .progress.error { color: var(--neg); }
.import-summary h2 { font-size: 20px; }
.import-stats { display: flex; gap: 40px; flex-wrap: wrap; margin: 16px 0 0; }
.import-stats div { display: grid; gap: 4px; }
.import-stats dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.import-summary .field-error, .import-summary .field-hint { margin-top: 12px; }
.import-form { display: grid; gap: 36px; }
table.import-map td { height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
table.import-map td:first-child { padding-top: 18px; font-weight: 600; }
table.import-map td.num { padding-top: 18px; }
.cari-pick { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px; }
.cari-pick select { width: 100%; }
.cari-results { position: absolute; z-index: 5; top: 100%; right: 0; width: 420px; max-height: 280px; overflow-y: auto; margin: 4px 0 0;
  padding: 4px 0; list-style: none; background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius); }
.cari-results button { display: block; width: 100%; padding: 8px 12px; text-align: left; font: inherit; font-size: 13px; color: var(--ink);
  background: none; border: 0; cursor: pointer; }
.cari-results button:hover, .cari-results button:focus-visible { background: var(--blue-wash); outline: none; }
.cari-results .none { padding: 8px 12px; font-size: 13px; color: var(--muted); }
table.import-list tr.skip td { color: var(--muted); }
table.import-list tr.bad td { color: var(--neg); }
.import-actions { display: flex; align-items: center; gap: 16px; padding: 16px 0 32px; border-top: 1px solid var(--rule-strong); }
.import-actions .spacer { flex: 1; }
.import-actions .lead { margin: 0; }
@media (max-width: 760px) {
  .cari-pick { grid-template-columns: minmax(0, 1fr); }
  .cari-results { width: 100%; }
  table.import-list .muted, table.import-list th:nth-child(4) { display: none; }
}

/* İpucu düğmesi (etiketin yanında) ve tek baloncuk (body'de, kırpılmaz) */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -6px -3px -6px 1px;
  padding: 0; vertical-align: middle; color: var(--muted); background: none; border: 0; border-radius: var(--radius); cursor: help; }
.tip .icon { width: 14px; height: 14px; }
.tip[aria-describedby] { color: var(--blue-ink); }
@media (hover: hover) { .tip:hover { color: var(--blue-ink); } }
.tip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Krem başlık bandında (#f4ead0) mavi halka 2.96:1 kalıyor; koyu mavi 4.36:1 */
.card.c-cream .card-h .tip:focus-visible { outline-color: var(--blue-ink); }
.tooltip { position: absolute; z-index: 50; max-width: 280px; padding: 8px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--radius); pointer-events: none; }
th .tip { margin-left: 2px; }
/* "Nasıl kullanılır" bağlantısı: sayfa başlığının yanında, sessiz */
.help-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .help-link:hover { color: var(--blue-ink); } }

/* Yardım sayfası: okunur sütun, solda bölüm dizini */
.help { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.help nav { position: sticky; top: 80px; display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.help nav a { padding: 5px 0; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.help nav a:hover { color: var(--blue-ink); }
.help article { max-width: 72ch; }
.help section { padding: 14px 0 28px; border-top: 1px solid var(--rule-strong); scroll-margin-top: 72px; }
.help h2 { margin-bottom: 12px; }
.help p, .help li { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.help p { margin: 0 0 10px; }
.help ol, .help ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.help strong { color: var(--ink); font-weight: 600; }
.help kbd { font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 2px 5px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); }
@media (max-width: 900px) { .help { grid-template-columns: minmax(0, 1fr); gap: 24px; } .help nav { position: static; } }
.help p .icon, .help li .icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--blue-ink); }

/* Teklif kilidi: hareketsizlik uyarısı (ekranın üstünde sabit şerit) ve başkasında açık teklif sayfası */
.idle-warning { position: sticky; top: 56px; z-index: 15; display: flex; align-items: center; gap: 16px; margin: 0 0 16px;
  padding: 10px 14px; font-size: 13px; color: var(--ink); background: var(--blue-wash); border-top: 2px solid var(--blue); }
.idle-warning[hidden] { display: none; }
.locked-quote { max-width: 72ch; }
.locked-quote p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.locked-quote p.muted { font-size: 13px; color: var(--muted); }
.locked-quote .actions-bar { margin-top: 20px; }
table.quotes .editing { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--blue-ink); }

/* Gönderimler: liste */
.seg.tabs a { white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.seg.tabs a + a { border-left: 1px solid var(--rule); }
.seg.tabs a:hover { color: var(--ink); }
.seg.tabs a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blue); }
.seg.tabs .n { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
table.shipments td { height: 56px; padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
table.shipments tbody tr { cursor: pointer; }
table.shipments .no { white-space: nowrap; }
table.shipments .sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
table.shipments .person .name { font-weight: 600; }
table.shipments .person .code, table.shipments .person .muted { margin-left: 8px; font-size: 12px; }
table.shipments .person .code { font-weight: 600; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
table.shipments .tag { vertical-align: top; }
.ok { color: var(--ok); font-weight: 600; }
.strong { font-weight: 600; }
@media (max-width: 1280px) { table.shipments .opt { display: none; } }
@media (max-width: 760px) { table.shipments .m-hide { display: none; } .seg.tabs { max-width: 100%; overflow-x: auto; } table.shipments .person .code, table.shipments .person .muted { display: none; } .ship-head .search input { width: 100%; } .ship-head .search { flex: 1 1 100%; } }

/* Gönderimler: gönderim ekranı */
.ship { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ship .pagehead, .ship .error { margin-bottom: 0; }
.ship-status p { margin: -16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ship-status .st-main { display: inline-flex; align-items: center; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ship-status .st-sub { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ship-status .late .st-main { color: var(--neg); }
.ship-status .st-main .icon { width: 18px; height: 18px; margin-right: 6px; }
.ship .ret .icon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.ship[data-kind="bilabedel"] .only-iadeli, .ship[data-kind="iadeli"] .only-bilabedel { display: none; }
.ship h2 .req { margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.accounts { display: grid; gap: 8px; max-width: 920px; }
.account { display: grid; grid-template-columns: 150px minmax(0, 1fr) 160px 30px; gap: 8px; align-items: center; }
@media (max-width: 760px) { .account { grid-template-columns: minmax(0, 1fr) 30px; } .account label:nth-child(-n+2) { grid-column: 1 / -1; } }
table.ship-lines { min-width: 840px; }
table.ship-lines .w-model { min-width: 220px; width: 26%; }
table.ship-lines .w-serial { width: 150px; }
table.ship-lines .w-cond { width: 120px; }
table.ship-lines .w-ret { width: 130px; }
table.ship-lines td.ret { padding: 0 8px; white-space: nowrap; font-size: 12.5px; }
table.ship-lines .ret-in { display: flex; align-items: center; gap: 4px; }
table.ship-lines td.ret .link { margin-left: 6px; font-size: 11.5px; color: var(--muted); }
table.ship-lines tr.returned input { color: var(--muted); }
@media (hover: hover) { .btn.danger:hover:where(:not(:disabled)) { color: var(--neg); } }
.ship-files .sf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ship-files .sf-head .link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.ship-files .sf-head .icon { width: 14px; height: 14px; }
.sf-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.sf-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.sf-thumb { display: grid; place-items: center; width: 44px; height: 44px; background: var(--field); color: var(--muted); overflow: hidden; border-radius: var(--radius); }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-name { min-width: 0; font-size: 12.5px; line-height: 1.35; }
.sf-name a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sf-name .muted { font-size: 11.5px; }
.sf-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px;
  border: 1px dashed #c3c9cf; border-radius: var(--radius); background: var(--paper); cursor: pointer;
  font-size: 12.5px; color: var(--ink-2); transition: border-color .15s, background-color .15s; }
.sf-drop > span { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.sf-drop.over { border-color: var(--blue); background: var(--blue-wash); }
@media (hover: hover) { .sf-drop:hover { border-color: var(--blue); background: var(--blue-wash); } }
.sf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sf-drop:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.sf-progress { margin: 6px 0 0; min-height: 16px; font-size: 12.5px; color: var(--muted); }
.sf-progress:empty { min-height: 0; margin: 0; }
.sf-progress.error { color: var(--neg); }
.notices ol { list-style: none; margin: 0; padding: 0; }
.notices .card-h .btn { margin-left: auto; }
.notices li.empty { display: block; text-align: left; }
.notify-docs { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 500; }
.notify-docs.ok { color: var(--ok); }
.notify-docs.neg { color: var(--neg); }
.notices li { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.notices time { color: var(--ink); font-weight: 600; }

.ship .lines-foot .field-note { margin: 0 0 0 8px; }
table.ship-lines input[data-f="serial_no"]::placeholder { color: var(--neg); }
.notices li.upcoming time { color: var(--ink-2); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); }
.danger-zone p { margin: 0; }
/* Telefon: ürün satırları alt alta, her alanın etiketi solunda (tablo yatay kaymaz). */
@media (max-width: 760px) {
  table.ship-lines { min-width: 0; }
  table.ship-lines thead { display: none; }
  table.ship-lines tbody tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 8px; padding: 10px 0;
    border-bottom: 1px solid var(--rule); }
  table.ship-lines tbody td { display: contents; border: 0; }
  table.ship-lines td[data-label]::before { content: attr(data-label); align-self: center; font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  table.ship-lines td.idx { display: none; }
  table.ship-lines td.ret > *, table.ship-lines td.del > * { justify-self: start; }
  table.ship-lines .ret-in { display: flex; align-items: center; gap: 8px; }
  table.ship-lines td.del::before { content: ""; }
  .danger-zone { flex-direction: column; align-items: flex-start; }
}
.ship .fields > .wide:empty { display: none; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-bottom-color: var(--neg); }

/* ===== Kart dili (gönderim ekranları; sonra bütün uygulamaya taşınacak) =====
   Açık gri zemin üzerinde beyaz kartlar. Her kartın başlık bandı kendi renginin açık tonunda, renkli ikon çipiyle:
   kişi mavi, gönderim yeşil, onay amber, belgeler mor, tablolar ve kayıtlar nötr. Durum renkli etiketle (pill). */
:root {
  --canvas: #eef1f4;
  --card-radius: 10px;
  --card-shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 6px 18px -10px rgba(20, 30, 40, .18);
  --hue-blue: #3990bf; --wash-blue: #e8f2f8;
  --hue-green: #1d7a5c; --wash-green: #e5f3ee;
  --hue-amber: #a8650f; --wash-amber: #fbf0dc;
  --hue-violet: #5f4fb0; --wash-violet: #eeebf8;
  --hue-ink: #23201f; --wash-ink: #f2f4f6;
  --hue-red: #b42318; --wash-red: #fdecea;
}
body { background: var(--canvas); }
.ship { gap: 20px; }
.ship > .grid.cols-4 { gap: 20px; }
.card { background: var(--paper); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 0 18px 18px; min-width: 0; }
.card.c-blue { --hue: var(--hue-blue); --wash: var(--wash-blue); }
.card.c-green { --hue: var(--hue-green); --wash: var(--wash-green); }
.card.c-amber { --hue: var(--hue-amber); --wash: var(--wash-amber); }
.card.c-violet { --hue: var(--hue-violet); --wash: var(--wash-violet); }
.card.c-ink { --hue: var(--hue-ink); --wash: var(--wash-ink); }
.card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 -18px 18px; padding: 12px 18px;
  background: var(--wash); border-radius: var(--card-radius) var(--card-radius) 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
header.card-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.card-h .hint { font-size: 12.5px; font-weight: 400; color: var(--ink-2); }
.card-h .spacer { flex: 1; }
.chip { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--hue); color: #fff; }
.chip .icon { width: 16px; height: 16px; }
.card .cust-link { margin-left: auto; }
/* Kart içindeki alanlar: beyaz, ince çerçeveli, köşesi hafif yuvarlak. */
.card .fields input:not([type=checkbox]), .card .fields select, .card .fields textarea, .card > label > textarea, .card form label > input,
.ship .accounts input, .ship .accounts select {
  background-color: var(--paper); border: 1px solid var(--field-line); border-radius: 6px; }
@media (hover: hover) {
  .card .fields input:not([type=checkbox]):hover, .card .fields select:hover, .card .fields textarea:hover,
  .ship .accounts input:hover, .ship .accounts select:hover { border-color: var(--muted); }
}
.card .fields input:focus, .card .fields select:focus, .card .fields textarea:focus, .card > label > textarea:focus,
.ship .accounts input:focus, .ship .accounts select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.ship .card input[aria-invalid="true"] { border-color: var(--neg); box-shadow: 0 0 0 3px var(--wash-red); }
.card .table-wrap { border-top: 0; margin: 0 -18px; padding: 0 10px; background: transparent; }
.card table.lines th:not(.internal) { background: transparent; }
.card .lines-foot { padding-bottom: 0; }
.card .field-note { border-radius: 6px; }
.ship .sf-drop { border-radius: 8px; }
.ship .sf-thumb { border-radius: 6px; }
.btn { border-radius: 6px; }
.iconbtn { border-radius: 6px; }
/* Durum şeridi */
.ship-banner { background: var(--paper); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 14px 18px; }
.ship-banner p { margin: 0; align-items: center; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pill-blue { background: var(--wash-blue); color: var(--blue-ink); }
.pill-green { background: var(--wash-green); color: var(--hue-green); }
.pill-amber { background: var(--wash-amber); color: var(--hue-amber); }
.pill-red { background: var(--wash-red); color: var(--hue-red); }
.pill-ink { background: var(--wash-ink); color: var(--ink-2); }
.ship-banner .st-main.ok { color: var(--ink); }
.ship-banner .st-main.ok .icon { color: var(--hue-green); }
.notices li:last-child { border-bottom: 0; }
.danger-zone { border-top: 0; padding: 4px 4px 0; }
@media (max-width: 760px) {
  .card { padding: 0 14px 14px; }
  .card-h { margin: 0 -14px 14px; padding: 10px 14px; }
  .card .table-wrap { margin: 0 -14px; padding: 0 14px; }
}

/* Kart dili: gönderim listesi */
.list-card { padding: 4px 8px 8px; overflow-x: auto; }
.list-card table.list { background: transparent; border-top: 0; }
.list-card table.list tbody tr:last-child td { border-bottom: 0; }
.list-card table.list tbody tr:hover { background: var(--wash-blue); }
.pill-violet { background: var(--wash-violet); color: var(--hue-violet); }
table.shipments .sub { margin-top: 4px; }
.empty.card { padding: 56px 24px; }
.ship-head .seg.tabs { border-radius: 8px; overflow: hidden; }
.ship-head .search input { background: var(--paper); border: 1px solid var(--field-line); border-radius: 8px; }
.ship-head .search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }

/* Kart dili: teklif ekranı ve diğer sayfalar */
.quote { gap: 20px; }
.quote .grid.cols-4 { gap: 20px; }
.card.c-cream { --hue: var(--internal-ink); --wash: #f4ead0; background: var(--internal); }
.card.internal-panel { padding: 0 18px 18px; border-top: 0; }
.internal-panel h2 .chip { margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; color: #fff; }
.internal-panel h2 > span:not(.chip) { margin-left: 2px; }
.totalbar { border-radius: var(--card-radius) var(--card-radius) 0 0; box-shadow: 0 -8px 24px -14px rgba(20, 30, 40, .25); }
.card.history summary h2::before { display: none; }
.card.history summary h2 { align-items: center; }
.card.history summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s; }
.card.history[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .card.history summary::after { transition: none; } }
.card.history:not([open]) { padding-bottom: 0; }
.card.history:not([open]) .card-h { margin-bottom: 0; border-radius: var(--card-radius); }
.card.history ol { border-top: 0; margin-top: 0; }
.list-card table.customers { border-top: 0; background: transparent; }
.list-card table.customers tr.sum > td { border-bottom-color: #eef0f2; }
.list-card table.customers tbody:last-child tr.sum > td { border-bottom: 0; }
.quotes-head .search input, .search input { background: var(--paper); border: 1px solid var(--field-line); border-radius: 8px; }
.search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.card.locked-quote { max-width: 72ch; }
.help article { background: var(--paper); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 4px 28px 8px; }
.help section:first-child { border-top: 0; }
.help nav { background: var(--paper); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 12px 16px; border-top: 0; }
.login { border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.card table.list { border-top: 0; background: transparent; }
.sf-drop.is-disabled { cursor: default; background: var(--field); border-color: #d3d9de; color: var(--muted); }
.sf-drop.is-disabled:hover { border-color: #d3d9de; background: var(--field); }
.sf-drop.is-disabled .icon { width: 14px; height: 14px; }
.ship .card input.refilled, .ship .card textarea.refilled { animation: refill 1.2s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .ship .card input.refilled, .ship .card textarea.refilled { animation: none; } }
.sf-read { font-size: 11.5px; }
.sf-read.ok { color: var(--ok); font-weight: 600; }
.sf-read .icon { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
.sf-list li.is-pending .pill { height: 18px; padding: 0 7px; font-size: 10px; }
#person-note b { font-weight: 600; }
/* Kimlik belgeleri: Teslim alan kartının altında tam genişlikte, dört alan yan yana */
.docs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; }
.person-docs .sf-drop { min-height: 40px; }
@media (max-width: 1100px) { .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .docs-grid { grid-template-columns: minmax(0, 1fr); } }

/* Alan etiketi ile ipucu düğmesi kardeş: düğme <label> içinde olsaydı etiket alanı değil düğmeyi gösterirdi. */
.fld > .lbl { display: block; margin-bottom: 6px; }
.fld > .lbl label { display: inline; cursor: pointer; }
.fld.inline { display: flex; align-items: center; gap: 10px; }
.fld.inline > .lbl { margin: 0; }
.fld.inline select { width: auto; height: 32px; font-size: 12.5px; }
.rates .fld { flex: 1; }
/* Odaklı satırdaki sıra numarası mavi zeminde de okunsun */
table.lines tbody tr:focus-within td.idx { color: var(--ink-2); }
/* iPhone, 16px'ten küçük yazılı alana dokununca sayfayı yakınlaştırır; telefonda bütün alanlar 16px.
   Tablo ve satır içi alanların kendi boyutlarını da ezmesi gerektiği için !important. */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
}