/* Interex — bileşenler (DESIGN.md §4–5). Renkler yalnızca var(--…) ile; hex yok.
   Sınıf öneki "o-". Admin ve müşteri paneli aynı dosyayı kullanır. */

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; } /* bileşen display kuralları hidden özniteliğini ezmesin */
/* Rozet ve çipler sütun düzeninde (flex/grid) satır boyu uzamaz, içerik genişliğinde kalır */
.o-rozet, .o-etiket-cip, .is-cip, .is-etiket { width: max-content; max-width: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: var(--t-14); line-height: var(--lh-14); font-weight: var(--w-regular);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* uzun e-posta, numara ve bağlantılar kutudan taşmasın */
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-semi); color: var(--ink); text-wrap: balance; }
p { margin: 0; }
a { color: var(--info); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
::selection { background: var(--info-bg); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-ctl); }
input, select, textarea, button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
.o-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.o-ikon { width: 16px; height: 16px; flex: none; fill: currentColor; vertical-align: middle; }
.o-ikon-20 { width: 20px; height: 20px; }
.o-sayi { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.o-kod { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-weight: var(--w-medium); white-space: nowrap; }
.o-soluk { color: var(--steel); }
.o-kucuk { font-size: var(--t-12); line-height: var(--lh-12); }

/* ---------- Uygulama kabuğu ---------- */
.o-kabuk { display: grid; grid-template-columns: var(--menu-w) minmax(0, 1fr); min-height: 100vh; }
.o-menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: var(--z-menu);
  background: var(--ink); color: var(--menu-text); display: flex; flex-direction: column;
  padding: var(--s4) var(--s3);
}
.o-menu-logo { display: flex; align-items: center; height: 40px; padding: 0 var(--s2); margin-bottom: var(--s5); }
.o-menu-logo img { height: 36px; width: auto; }
/* Çalışılan ülke ve saat dilimi (src/konum.py, web/static/interex-saat.js) */
.o-konum {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; margin: calc(-1 * var(--s3)) 0 var(--s4);
  padding: var(--s1) var(--s2); border: 1px solid var(--ink-2); border-radius: var(--r-ctl); background: transparent;
  color: var(--menu-text); font: inherit; text-align: left; cursor: pointer;
}
.o-konum:hover { background: var(--ink-2); color: var(--on-dark); }
.o-konum .o-ikon { flex: none; }
.o-konum-bayrak { flex: none; font-size: 20px; line-height: 1; }
.o-konum-metin { display: flex; flex-direction: column; min-width: 0; }
.o-konum-metin b { color: var(--on-dark); font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-konum-metin span { font-size: var(--t-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.o-ust .o-konum-ust { display: none; width: auto; margin: 0; border-color: var(--rule); color: var(--steel); flex: none; }
.o-ust .o-konum-ust:hover { background: var(--canvas); color: var(--ink); }
.o-ust .o-konum-ust .o-konum-metin b { color: var(--ink); }
.o-konum-onizleme { margin: 0 0 var(--s2); }
.o-konum-ekip { margin-top: var(--s4); border-top: var(--line); padding-top: var(--s3); }
.o-konum-ekip summary { cursor: pointer; font-weight: var(--w-medium); }
.o-konum-ekip ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.o-konum-ekip li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); padding: var(--s1) 0; border-bottom: var(--line); align-items: baseline; }
.o-konum-ekip li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-konum-ekip li b { font-variant-numeric: tabular-nums; }
.o-menu-grup { margin-bottom: var(--s4); }
.o-menu-grup-adi { font-size: var(--t-12); line-height: var(--lh-12); color: var(--menu-text); padding: 0 var(--s2); margin-bottom: var(--s1); }
.o-menu a {
  display: flex; align-items: center; gap: var(--s3); height: 36px; padding: 0 var(--s2);
  border-radius: var(--r-ctl); color: var(--menu-text); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.o-menu a:hover { background: var(--ink-2); color: var(--on-dark); }
.o-menu a[aria-current="page"] { background: var(--ink-2); color: var(--on-dark); font-weight: var(--w-medium); }
.o-menu a .o-sayac { margin-left: auto; }
.o-menu-alt { margin-top: auto; border-top: 1px solid var(--ink-2); padding-top: var(--s3); }
.o-menu :focus-visible { box-shadow: 0 0 0 2px var(--on-dark); }

.o-ana { display: flex; flex-direction: column; min-width: 0; }
.o-ust {
  position: sticky; top: 0; z-index: var(--z-ust); height: var(--ust-h);
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s5);
  background: var(--surface); border-bottom: var(--line);
}
.o-ust .o-ust-menu-btn { display: none; }
.o-arama { position: relative; flex: 1; max-width: 520px; }
.o-arama .o-ikon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--steel); }
.o-arama input { padding-left: 34px; }
.o-arama kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: var(--t-12); color: var(--steel); border: var(--line); border-radius: var(--r-badge); padding: 0 6px;
}
.o-ust-sag { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.o-icerik { padding: var(--s5); max-width: 1440px; width: 100%; }

/* Sayfa başlığı */
.o-iz { display: flex; flex-wrap: wrap; gap: var(--s1); font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); margin-bottom: var(--s2); }
.o-iz a { color: var(--steel); text-decoration: none; }
.o-iz a:hover { color: var(--ink); text-decoration: underline; }
.o-iz span[aria-hidden] { color: var(--field); }
.o-sayfa-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.o-sayfa-bas h1 { font-size: var(--t-24); line-height: var(--lh-24); letter-spacing: -0.01em; }
.o-sayfa-bas .o-alt { color: var(--steel); margin-top: var(--s1); }
.o-sayfa-aksiyon { display: flex; gap: var(--s2); flex-wrap: wrap; }
.o-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.o-filtre .o-girdi, .o-filtre .o-secim { width: auto; min-width: 160px; }
/* Filtre satırında düğme, yanındaki girdiyle aynı yükseklikte */
.o-filtre > .o-btn:not(.o-btn-kucuk), .o-filtre > .o-acilir-kap > .o-btn:not(.o-btn-kucuk), .o-filtre > .o-disa > .o-btn:not(.o-btn-kucuk) { height: var(--girdi-h); }
.o-kayitli { display: flex; gap: var(--s1); flex-wrap: wrap; margin-left: auto; }

/* ---------- Butonlar ---------- */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--ctl-h); padding: 0 var(--s3); border-radius: var(--r-ctl); border: 1px solid transparent;
  font-size: var(--t-14); font-weight: var(--w-medium); line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; background: transparent; color: var(--ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.o-btn-birincil { background: var(--signal); color: var(--on-dark); }
.o-btn-birincil:hover { background: var(--signal-hover); color: var(--on-dark); }
.o-btn-ikincil { border-color: var(--ink); }
.o-btn-ikincil:hover { background: var(--canvas); }
.o-btn-hayalet:hover { background: var(--canvas); }
.o-btn-tehlike { background: var(--bad); color: var(--on-dark); }
.o-btn-tehlike:hover { filter: brightness(0.92); }
.o-btn-kucuk { height: 28px; padding: 0 var(--s2); font-size: var(--t-13); }
.o-btn-ikon { width: var(--ctl-h); padding: 0; }
.o-btn-ikon.o-btn-kucuk { width: 28px; }
.o-btn:disabled, .o-btn[aria-disabled="true"] { background: var(--canvas); color: var(--disabled); border-color: var(--rule); cursor: not-allowed; filter: none; }
.o-btn[aria-busy="true"] { cursor: progress; }
.o-btn[aria-busy="true"] .o-ikon { animation: o-don 0.9s linear infinite; }
@keyframes o-don { to { transform: rotate(360deg); } }
.o-menu-btn-acik { color: var(--on-dark); }

/* ---------- Form ---------- */
.o-alan { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s4); min-width: 0; }
.o-alan label, .o-etiket { font-size: var(--t-14); font-weight: var(--w-medium); color: var(--ink); }
.o-alan .o-zorunlu { color: var(--bad); margin-left: 2px; }
.o-yardim { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-hata-metni { font-size: var(--t-12); line-height: var(--lh-12); color: var(--bad); display: flex; gap: var(--s1); align-items: flex-start; }
.o-girdi, .o-secim, .o-metin {
  width: 100%; height: var(--girdi-h); padding: 0 var(--s3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--field); border-radius: var(--r-ctl);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.o-metin { height: auto; min-height: 80px; padding: var(--s2) var(--s3); resize: vertical; }
.o-secim { appearance: none; padding-right: 32px; }
/* Dosya seçimi: düğme kutunun içinde dikeyde ortalı, diğer girdilerle aynı yükseklik */
.o-girdi[type="file"] { padding: 0 var(--s1); display: flex; align-items: center; line-height: calc(var(--girdi-h) - 2px); color: var(--steel); cursor: pointer; }
.o-girdi[type="file"]::file-selector-button { height: 28px; margin: 0 var(--s3) 0 0; padding: 0 var(--s3); border: 1px solid var(--field); border-radius: var(--r-ctl);
  background: var(--canvas); color: var(--ink); font: inherit; font-size: var(--t-13); font-weight: var(--w-medium); cursor: pointer; vertical-align: middle; }
/* Seçim kutusunun oku: <span class="o-secim-kap"><select class="o-secim">…</select></span> */
.o-secim-kap { position: relative; display: block; min-width: 0; }
.o-filtre .o-secim-kap, .o-sayfalama .o-secim-kap { display: inline-block; }
.o-secim-kap::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; pointer-events: none;
  border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); transform: translateY(-70%) rotate(45deg); }
.o-girdi:hover, .o-secim:hover, .o-metin:hover { border-color: var(--ink); }
.o-girdi:focus, .o-secim:focus, .o-metin:focus { outline: none; border-color: var(--info); box-shadow: var(--focus); }
.o-girdi::placeholder, .o-metin::placeholder { color: var(--disabled); }
.o-girdi:disabled, .o-secim:disabled, .o-metin:disabled { background: var(--canvas); color: var(--disabled); border-color: var(--rule); }
.o-alan[data-hata] .o-girdi, .o-alan[data-hata] .o-secim, .o-alan[data-hata] .o-metin { border-color: var(--bad); }
.o-girdi-ek { display: flex; }
/* Girdi + yanındaki düğme: girdi genişler, düğme aynı yükseklikte */
.o-girdi-satir { display: flex; gap: var(--s2); align-items: stretch; }
.o-girdi-satir > .o-secim-kap, .o-girdi-satir > .o-girdi { flex: 1 1 auto; min-width: 0; }
.o-girdi-satir > .o-btn { height: var(--girdi-h); flex: none; }
.o-girdi-ek > span { display: inline-flex; align-items: center; padding: 0 var(--s3); border: 1px solid var(--field); border-right: 0;
  border-radius: var(--r-ctl) 0 0 var(--r-ctl); background: var(--canvas); color: var(--steel); font-weight: var(--w-medium); }
.o-girdi-ek .o-girdi { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; text-align: right; }
.o-secenek { display: flex; align-items: center; gap: var(--s2); min-height: 24px; cursor: pointer; }
.o-secenek input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.o-form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
.o-zorunlu-not { font-size: var(--t-12); color: var(--steel); margin-bottom: var(--s3); }

/* ---------- Rozet ---------- */
.o-rozet {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-badge);
  font-size: var(--t-12); font-weight: var(--w-medium); line-height: 1; white-space: nowrap;
  background: var(--canvas); color: var(--steel);
}
.o-rozet-ok { background: var(--ok-bg); color: var(--ok); }
.o-rozet-bekliyor { background: var(--wait-bg); color: var(--wait); }
.o-rozet-hata { background: var(--bad-bg); color: var(--bad); }
.o-rozet-bilgi { background: var(--info-bg); color: var(--info); }
.o-etiket-cip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; white-space: nowrap; border: var(--line); border-radius: var(--r-badge);
  font-size: var(--t-12); color: var(--ink); background: var(--surface); }
.o-sayac { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-badge); background: var(--signal); color: var(--on-dark); font-size: var(--t-12); font-weight: var(--w-medium); line-height: 1; }

/* ---------- Panel, etiket–değer, bölüm ---------- */
.o-panel { background: var(--surface); border: var(--line); border-radius: var(--r-panel); }
.o-panel-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: var(--line); min-height: 44px; background: var(--band); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.o-panel-bas h2 { font-size: var(--t-16); line-height: var(--lh-16); }
.o-panel-govde { padding: var(--s4); }
.o-kv { margin: 0; display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); }
.o-kv dt, .o-kv dd { margin: 0; padding: var(--s2) 0; border-bottom: var(--line); }
.o-kv dt { color: var(--steel); padding-right: var(--s3); }
.o-kv dd { color: var(--ink); overflow-wrap: anywhere; }
.o-kv > :nth-last-child(-n+2) { border-bottom: 0; }
.o-iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s4); align-items: start; }
.o-yan-sutun { position: sticky; top: calc(var(--ust-h) + var(--s4)); display: flex; flex-direction: column; gap: var(--s4); }
.o-uyari {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-panel);
  border: 1px solid var(--rule); background: var(--surface);
}
.o-uyari-bekliyor { background: var(--wait-bg); border-color: var(--wait-bg); color: var(--wait); }
.o-uyari-hata { background: var(--bad-bg); border-color: var(--bad-bg); color: var(--bad); }
.o-uyari-bilgi { background: var(--info-bg); border-color: var(--info-bg); color: var(--info); }
.o-uyari-iyi { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok); }
.o-uyari .o-uyari-metin { flex: 1; color: var(--ink); }
.o-uyari-dugmeler { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.o-uyari .o-ikon { margin-top: 2px; }

/* ---------- KPI bandı ---------- */
.o-bant { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: var(--line); border-radius: var(--r-panel); margin-bottom: var(--s4); }
.o-bant > div { padding: var(--s3) var(--s4); border-left: var(--line); min-width: 0; container-type: inline-size; }
.o-bant > div:first-child { border-left: 0; }
.o-bant dt { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-bant dd { margin: var(--s1) 0 0; font-size: var(--t-24); line-height: var(--lh-24); font-weight: var(--w-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tutar kesilmesin: dar kutuda yazı küçülür (kutu genişliğine göre), sığmazsa alt satıra geçer */
@container (max-width: 260px) { .o-bant dd { font-size: clamp(15px, 9cqi, var(--t-24)); line-height: 1.25; white-space: normal; overflow: visible; overflow-wrap: anywhere; } }
.o-bant dd.o-sayi { text-align: left; }
.o-bant .o-not { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); margin-top: 2px; }
.o-bant .o-deger-hata { color: var(--bad); }
/* Panelin içindeki bant ve tablo panelle bütünleşir: çift çerçeve ve iç boşluk kayması olmaz */
.o-panel > .o-bant { border: 0; border-bottom: var(--line); border-radius: 0; margin: 0; }
.o-panel > .o-tablo-kap { border: 0; border-radius: 0 0 var(--r-panel) var(--r-panel); }
.o-belge-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-width: 0; }
.o-belge-ref .o-btn { height: 20px; padding: 0; font-size: var(--t-12); color: var(--info); }
.o-belge-ref .o-btn:hover { background: none; text-decoration: underline; }

/* ---------- Sekmeler ---------- */
/* Sekmeler tek satır: sığmayanlar "Daha fazla" menüsüne geçer (interex-sekme.js); yatay kaydırma ve alt satıra kayma yok */
.o-sekmeler { display: flex; gap: var(--s1); border-bottom: var(--line); margin-bottom: var(--s4); flex-wrap: nowrap; min-width: 0; }
.o-sekme[data-tasan] { display: none; }
.o-sekme-daha { margin-left: auto; }
.o-sekme-daha[hidden] { display: none; }
.o-sekme .o-sayac { background: var(--canvas); color: var(--steel); font-weight: var(--w-medium); }
.o-sekme[aria-selected="true"] .o-sayac { background: var(--ink); color: var(--on-dark); }
.o-sekme-menu { position: fixed; z-index: calc(var(--z-modal) + 2); }
.o-sekme-menu button[aria-current="true"] { font-weight: var(--w-semi); }
.o-sekme-menu .o-sayac { margin-left: auto; }
.o-sekmeler::-webkit-scrollbar { display: none; }
.o-sekme { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s3); border: 0; background: none; cursor: pointer;
  color: var(--steel); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.o-sekme:hover { color: var(--ink); }
.o-sekme[aria-selected="true"] { color: var(--ink); font-weight: var(--w-semi); border-bottom-color: var(--ink); }

/* ---------- Tablo ---------- */
.o-tablo-kap { background: var(--surface); border: var(--line); border-radius: var(--r-panel); overflow: clip; }
.o-tablo { width: 100%; border-collapse: separate; border-spacing: 0; }
.o-tablo th {
  position: sticky; top: var(--ust-h); z-index: 1; height: 36px; padding: 0 var(--s3); text-align: left;
  background: var(--band); border-bottom: 1px solid var(--field);
  font-family: var(--font-cond); font-stretch: var(--dar); font-weight: var(--w-medium); font-size: var(--t-13); color: var(--steel); white-space: nowrap;
}
.o-tablo th button { all: unset; display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer; }
.o-tablo th button:focus-visible { box-shadow: var(--focus); border-radius: var(--r-badge); }
.o-tablo th[aria-sort] { color: var(--ink); }
.o-tablo td { height: var(--satir-h); padding: var(--s2) var(--s3); border-bottom: var(--line); vertical-align: middle; }
.o-tablo tbody tr:last-child td { border-bottom: 0; }
.o-tablo tbody tr { transition: background var(--dur-fast) var(--ease); }
.o-tablo tbody tr:hover { background: var(--canvas); }
.o-tablo tbody tr[aria-selected="true"] { background: var(--info-bg); }
.o-tablo tbody tr[data-tikla] { cursor: pointer; }
.o-tablo .o-sec { width: 40px; padding-right: 0; }
.o-tablo .o-sec input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; vertical-align: middle; }
.o-tablo .o-sag { text-align: right; }
.o-ikincil-satir { overflow-wrap: anywhere; }
/* Tablo düzeninde e-posta/telefon harf harf kırılmasın; sığmıyorsa tablo kart düzenine geçer (interex-tablo.js) */
.o-tablo:not([data-kart]) .o-ikincil-satir, .o-tablo:not([data-kart]) td a { overflow-wrap: normal; }
.o-tablo .o-ikincil-satir { display: block; font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-yogun .o-tablo td { height: var(--satir-h-yogun); }
.o-tablo-ust { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: var(--line); min-height: 48px; }
.o-toplu { background: var(--ink); color: var(--on-dark); }
.o-toplu .o-btn { color: var(--on-dark); }
.o-toplu .o-btn:hover { background: var(--ink-2); }
/* Dışa aktar ▾ (tablo araç çubuğu, toplu işlem çubuğu ve sayfa başlıkları) */
.o-tablo-arac { justify-content: space-between; min-height: 44px; padding-top: var(--s1); padding-bottom: var(--s1); }
.o-toplu { flex-wrap: wrap; }
.o-toplu .o-disa { margin-left: auto; }
.o-toplu .o-disa .o-btn-ikincil { border-color: var(--on-dark); }
.o-disa .o-acilir { color: var(--ink); }
.o-tablo-kap:has(.o-disa [aria-expanded="true"]) { overflow: visible; } /* kısa tablolarda menü kırpılmasın */
@media (max-width: 639px) { .o-sayfa-aksiyon .o-disa .o-acilir { right: auto; left: 0; } } /* dar ekranda başlık düğmeleri sola akar */
.o-disa .o-acilir-bilgi { white-space: normal; max-width: 260px; }
.o-sayfalama { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); border-top: var(--line); color: var(--steel); flex-wrap: wrap; }
.o-sayfalama nav { display: flex; gap: var(--s1); }
.o-sayfalama .o-btn[aria-current="page"] { background: var(--ink); color: var(--on-dark); }
.o-satir-guncel { animation: o-guncel 600ms var(--ease); }
@keyframes o-guncel { from { background: var(--info-bg); } to { background: transparent; } }

/* ---------- Aktivite / zaman çizelgesi ---------- */
.o-akis { list-style: none; margin: 0; padding: 0; }
.o-akis li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-bottom: var(--line); }
.o-akis li:last-child { border-bottom: 0; }
.o-akis time { font-size: var(--t-12); line-height: var(--lh-14); color: var(--steel); }
.o-akis .o-kim { display: block; font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-akis .o-akis-hata { color: var(--bad); }

/* ---------- Boş durum ---------- */
.o-bos { padding: var(--s6) var(--s4); text-align: center; color: var(--steel); }
.o-bos p { margin-bottom: var(--s3); }

/* ---------- Modal ---------- */
.o-perde { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.o-modal { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--r-panel); box-shadow: var(--shadow-pop); }
.o-modal-genis { max-width: 720px; }
.o-modal-bas { display: flex; align-items: center; justify-content: space-between; padding: var(--s4); border-bottom: var(--line); }
.o-modal-bas h2 { font-size: var(--t-16); line-height: var(--lh-16); }
.o-modal-govde { padding: var(--s4); overflow-y: auto; }
/* Pencerede açıklama paragrafı ile ilk alan arasında boşluk */
.o-modal-govde > p:not(:last-child) { margin-bottom: var(--s3); }
.o-modal-govde > .o-alan:last-child, .o-modal-govde > form > .o-alan:last-child { margin-bottom: 0; }
.o-modal-alt { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4); border-top: var(--line); }
.o-perde[data-acik] .o-modal { animation: o-ac var(--dur) var(--ease); }
@keyframes o-ac { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
.o-toastlar { position: fixed; right: var(--s5); bottom: var(--s5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s2); }
.o-toast { display: flex; align-items: center; gap: var(--s3); min-width: 280px; max-width: 420px; padding: var(--s3) var(--s4);
  background: var(--ink); color: var(--on-dark); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); animation: o-ac var(--dur) var(--ease); }
.o-toast-hata { background: var(--bad); }
.o-toast .o-btn { color: var(--on-dark); margin-left: auto; }

/* ---------- Açılır menü ---------- */
.o-acilir { position: absolute; z-index: var(--z-acilir); min-width: 200px; padding: var(--s1); background: var(--surface);
  border: var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); }
.o-acilir button, .o-acilir a { display: flex; align-items: center; gap: var(--s2); width: 100%; height: 32px; padding: 0 var(--s2);
  border: 0; background: none; color: var(--ink); text-decoration: none; text-align: left; border-radius: var(--r-ctl); cursor: pointer; }
.o-acilir button:hover, .o-acilir a:hover { background: var(--canvas); }

/* ---------- Rota şeridi (imza) ----------
   Durum renkleri: tamamlanan yeşil + tik, şu anki aşama sarı (nabız halkası + "Devam ediyor/Bekleniyor" etiketi),
   sıradaki duraklar gri numaralı; gecikme kırmızı. Tamamlanan bölüm düz yeşil çizgi, kalan yol kesikli gri. */
.o-serit { list-style: none; margin: 0; padding: var(--s5) var(--s2) var(--s3); display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.o-durak { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.o-durak::before { /* duraktan bir sonrakine giden rota çizgisi */
  content: ""; position: absolute; top: 15px; left: calc(50% + 20px); width: calc(100% - 40px); height: 0;
  border-top: 2px dashed var(--rule-strong, #C9D1D9);
}
.o-durak:last-child::before { display: none; }
.o-durak[data-durum="tamam"]::before { border-top: 3px solid var(--serit-tamam); top: 14.5px; }
.o-durak[data-durum="tamam"]:has(+ .o-durak[data-durum="aktif"])::before { border-top: 0; height: 3px; background: linear-gradient(90deg, var(--serit-tamam), var(--serit-aktif)); }
.o-durak-nokta { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--rule-strong, #C9D1D9); color: var(--steel);
  font-size: var(--t-12); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; transition: transform .2s ease; }
.o-durak-nokta svg { width: 16px; height: 16px; }
.o-durak[data-durum="tamam"] .o-durak-nokta { background: var(--serit-tamam); border-color: var(--serit-tamam); color: #fff; box-shadow: 0 1px 2px rgba(18, 38, 58, .18); }
.o-durak[data-durum="aktif"] .o-durak-nokta { background: var(--serit-aktif); border-color: var(--serit-aktif); color: var(--ink); transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--serit-aktif-halka); }
.o-durak[data-durum="aktif"] .o-durak-nokta::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--serit-aktif);
  animation: o-serit-nabiz 1.8s ease-out infinite; }
@keyframes o-serit-nabiz { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .o-durak[data-durum="aktif"] .o-durak-nokta::after { animation: none; opacity: 0; } }
.o-durak[data-gecikme] .o-durak-nokta { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 0 0 4px var(--bad-bg); }
.o-durak[data-gecikme] .o-durak-nokta::after { border-color: var(--bad); }
.o-durak-metin { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--s2); }
.o-durak-ad { font-size: var(--t-13); line-height: var(--lh-13); color: var(--steel); }
.o-durak[data-durum="tamam"] .o-durak-ad { color: var(--ink); font-weight: var(--w-medium); }
.o-durak[data-durum="aktif"] .o-durak-ad { color: var(--ink); font-weight: var(--w-semi); }
.o-durak-rozet { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-medium);
  background: var(--serit-aktif-zemin); color: var(--wait); white-space: nowrap; }
.o-durak[data-gecikme] .o-durak-rozet { background: var(--bad-bg); color: var(--bad); }
.o-durak-tarih { font-size: var(--t-12); line-height: var(--lh-12); color: var(--ok); font-weight: var(--w-medium); }
.o-durak-plan { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-durak-fark { font-size: var(--t-12); line-height: var(--lh-12); color: var(--bad); font-weight: var(--w-medium); }
.o-serit[data-iptal] .o-durak-nokta { background: var(--surface) !important; border-color: var(--disabled) !important; color: var(--disabled) !important; box-shadow: none !important; transform: none !important; }
.o-serit[data-iptal] .o-durak-nokta::after { display: none; }
.o-serit[data-iptal] .o-durak::before { border-color: var(--disabled) !important; background: none !important; }
.o-serit[data-iptal] .o-durak-ad { color: var(--disabled) !important; }

/* Liste satırındaki küçük şerit: tamamlanan yeşil, şu anki sarı (büyük şeritle aynı), yanında aşama etiketi */
.o-serit-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); white-space: nowrap; }
.o-serit-mini ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.o-serit-mini li { width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--field); position: relative; }
.o-serit-mini li + li { margin-left: 6px; }
.o-serit-mini li:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 1.5px); top: 50%; width: 7px; margin-top: -0.5px; border-top: 1px solid var(--field); }
.o-serit-mini li[data-durum="tamam"] { background: var(--serit-tamam); border-color: var(--serit-tamam); }
.o-serit-mini li[data-durum="tamam"]::after { border-top: 2px solid var(--serit-tamam); margin-top: -1px; }
.o-serit-mini li[data-durum="aktif"] { width: 11px; height: 11px; background: var(--serit-aktif); border: 2px solid var(--serit-aktif); box-shadow: 0 0 0 2px var(--serit-aktif-halka); }
.o-serit-mini li[data-durum="aktif"]::after { left: calc(100% + 3px); width: 6px; }
.o-serit-mini li[data-gecikme] { background: var(--bad); border-color: var(--bad); }

/* ---------- Rota haritası ----------
   Her rota .o-asama-<aile> taşır: gidilen çizgi ve gemi işareti siparişin aşama renginde (gemide mavi, gümrük pembe…).
   Seçim/vurgu kalınlık ve diğer rotaların soluklaşmasıyla gösterilir; gecikme --bad önceliklidir. */
.o-harita { position: relative; background: var(--sea); border: var(--line); border-radius: var(--r-panel); overflow: hidden; }
.o-harita svg { display: block; width: 100%; height: 100%; }
.o-harita .o-kara { fill: var(--land); stroke: none; }
.o-harita .o-rota-gidilen { fill: none; stroke: var(--asama, var(--ink)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease); }
.o-harita .o-rota-kalan { fill: none; stroke: var(--field); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; transition: stroke var(--dur) var(--ease); }
.o-harita .o-rota-akis { animation: o-akis 7s linear infinite; }
@keyframes o-akis { to { stroke-dashoffset: -64; } }
.o-harita .o-rota-tik { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.o-harita .o-rota[data-secili] .o-rota-gidilen, .o-harita .o-rota[data-vurgu] .o-rota-gidilen { stroke-width: 3.5; }
.o-harita .o-rota[data-secili] .o-rota-kalan, .o-harita .o-rota[data-vurgu] .o-rota-kalan { stroke: var(--asama, var(--ink)); stroke-width: 2; }
.o-harita .o-rota[data-gecikme] .o-rota-kalan { stroke: var(--bad); }
.o-harita[data-secim-var] .o-rota:not([data-secili]):not([data-vurgu]) { opacity: 0.35; }
.o-harita .o-gemi { fill: var(--asama, var(--ink)); stroke: var(--surface); stroke-width: 1.5; }
.o-harita .o-rota[data-gecikme] .o-gemi { fill: var(--bad); }
.o-harita .o-liman { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.o-harita .o-liman-varis { fill: var(--ink); }
.o-harita .o-liman-ad { font-size: 11px; fill: var(--steel); font-weight: var(--w-medium); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; letter-spacing: 0.02em; }
.o-harita-kart { position: absolute; z-index: 2; pointer-events: none; min-width: 200px; padding: var(--s2) var(--s3); background: var(--surface);
  border: var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); font-size: var(--t-13); line-height: var(--lh-13); }
.o-harita-kart b { display: block; }
.o-harita-lejant { position: absolute; left: var(--s3); bottom: var(--s2); display: flex; gap: var(--s4); font-size: var(--t-12); color: var(--steel);
  background: var(--surface); border: var(--line); border-radius: var(--r-badge); padding: 2px var(--s2); }
@media (prefers-reduced-motion: reduce) { .o-harita .o-rota-akis { animation: none; } }

/* ---------- Konteyner takip olayları (Faz 7) ---------- */
.o-takip-akis .o-takip-olay { font-weight: var(--w-medium); color: var(--ink); }
.o-takip-akis li[data-tahmini] time, .o-takip-akis li[data-tahmini] .o-takip-olay { color: var(--steel); font-weight: var(--w-regular); }
.o-secenek .o-ikincil-satir { display: block; font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); margin-top: 2px; }
.o-secenek:has(.o-ikincil-satir) { align-items: flex-start; }
.o-secenek:has(.o-ikincil-satir) input { margin-top: 2px; flex: none; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1199px) {
  .o-iki-sutun { grid-template-columns: minmax(0, 1fr); }
  .o-yan-sutun { position: static; }
}
@media (max-width: 1023px) {
  .o-kabuk { grid-template-columns: minmax(0, 1fr); }
  .o-menu { position: fixed; left: 0; top: 0; width: var(--menu-w); transform: translateX(-100%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-pop); }
  .o-kabuk[data-menu-acik] .o-menu { transform: none; }
  .o-ust .o-ust-menu-btn { display: inline-flex; }
  .o-ust .o-konum-ust { display: flex; }
  .o-bant { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-bant > div { border-left: 0; border-top: var(--line); }
  .o-bant > div:nth-child(-n+2) { border-top: 0; }
  .o-bant > div:nth-child(even) { border-left: var(--line); }
  .o-bant > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .o-icerik { padding: var(--s4); }
  .o-ust { padding: 0 var(--s3); gap: var(--s2); }
  .o-arama kbd { display: none; }
  .o-form-izgara { grid-template-columns: minmax(0, 1fr); }
  .o-sekme { height: 36px; padding: 0 var(--s2); }
  /* Dar ekranda seçenek grubu eşit sütunlu ızgara: son satırda tek düğme yalnız kalmaz */
  .o-kayitli { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .o-kayitli:has(> :nth-child(2):last-child), .o-kayitli:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-kayitli:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-kayitli > * { min-width: 0; }
  .o-kayitli .o-btn { white-space: normal; height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; text-align: center; }
  .o-kayitli .is-cip-sil { display: flex; align-items: stretch; }
  .o-kayitli .is-cip-sil > .o-btn:first-child { flex: 1 1 auto; }
  .o-filtre .o-secim-kap, .o-filtre .o-girdi { flex: 1 1 100%; }
  .o-filtre .o-secim { width: 100%; }
  .o-kod, .o-sayi { white-space: normal; overflow-wrap: anywhere; }
  .o-kv { grid-template-columns: minmax(0, 1fr); }
  .o-kv dt { border-bottom: 0; padding-bottom: 0; }
  .o-bant dd { font-size: var(--t-16); line-height: var(--lh-16); }
  /* Tablolar yatay kaymaz: her satır etiketli bir bloğa dönüşür, hiçbir sütun gizlenmez */
  .o-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .o-tablo, .o-tablo tbody, .o-tablo tr, .o-tablo td { display: block; width: 100%; }
  .o-tablo tr { padding: var(--s2) var(--s3); border-bottom: var(--line); }
  .o-tablo tbody tr:last-child { border-bottom: 0; }
  /* Etiket solda sabit sütunda; değerler (çip, ikinci satır, bağlantı) kendi akışında kalır, etiketle aynı üst hizada */
  .o-tablo td { height: auto; padding: 3px 0 3px 120px; border: 0; display: block; position: relative; text-align: left; min-height: 24px; }
  .o-tablo td::before { content: attr(data-etiket); position: absolute; left: 0; top: 4px; width: 112px; color: var(--steel); font-size: var(--t-12); line-height: var(--lh-12); }
  .o-harita-lejant { left: var(--s2); right: var(--s2); bottom: var(--s1); }
  .o-tablo td.o-sag { text-align: left; }
  .o-tablo td.o-sec { display: none; }
  .o-tablo td:not([data-etiket]), .o-tablo td[data-etiket=""] { padding-left: 0; }
  /* Rota şeridi dikey çizelgeye döner */
  .o-serit { grid-template-columns: minmax(0, 1fr); padding: var(--s2) 0; }
  .o-durak { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--s3); padding-bottom: var(--s3); }
  .o-durak::before { top: 34px; left: 15px; width: 0; height: calc(100% - 36px); border-top: 0; border-left: 2px dashed var(--rule-strong, #C9D1D9); }
  .o-durak[data-durum="tamam"]::before, .o-durak[data-durum="tamam"]:has(+ .o-durak[data-durum="aktif"])::before {
    top: 34px; left: 14.5px; height: calc(100% - 36px); width: 3px; border: 0; background: var(--serit-tamam); }
  .o-durak-metin { align-items: flex-start; margin-top: 6px; }
  .o-toastlar { left: var(--s3); right: var(--s3); bottom: var(--s3); }
  .o-toast { min-width: 0; max-width: none; }
}

/* ---------- Giriş ekranı ---------- */
.o-giris { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.o-giris-panel { width: 100%; max-width: 400px; background: var(--surface); border: var(--line); border-radius: var(--r-panel); padding: var(--s6) var(--s5); }
.o-giris-logo { display: block; height: 56px; width: auto; margin-bottom: var(--s5); }
.o-giris-panel h1 { font-size: var(--t-20); line-height: var(--lh-20); margin-bottom: var(--s4); }
.o-giris-panel .o-uyari { margin-bottom: var(--s4); }
.o-giris-panel p:not(.o-uyari-metin) { color: var(--steel); margin-bottom: var(--s4); }
.o-giris-dil { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: var(--t-14); }
.o-giris-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }

/* ---------- Üst çubuk: arama sonuçları ve kullanıcı menüsü ---------- */
.o-acilir-kap { position: relative; }
.o-sag-hizali { right: 0; top: calc(100% + 4px); }
.o-arama-sonuc { left: 0; right: 0; top: calc(100% + 4px); max-height: 420px; overflow-y: auto; }
.o-arama-sonuc a { height: auto; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--s2); }
.o-arama-sonuc a[aria-selected] { background: var(--canvas); }
.o-acilir-grup { font-size: var(--t-12); color: var(--steel); padding: var(--s2) var(--s2) var(--s1); }
.o-acilir-bilgi { display: flex; flex-direction: column; padding: var(--s2); border-bottom: var(--line); margin-bottom: var(--s1); }
.o-arama-sonuc .o-acilir-bilgi { border-bottom: 0; color: var(--steel); }
.o-sayfalama-sag { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
@media (max-width: 639px) { .o-kullanici-ad { display: none; } }

/* ---------- Detay sayfası yardımcıları ---------- */
.o-yigin > * + * { margin-top: var(--s4); }
.o-serit-panel { margin-bottom: var(--s4); padding: 0 var(--s2); }
.o-ana-sutun { min-width: 0; }
.o-panel-aksiyon { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
.o-alan-grubu { border: 0; padding: 0; margin: 0 0 var(--s4); }
.o-alan-grubu legend { padding: 0; margin-bottom: var(--s1); font-size: var(--t-14); font-weight: var(--w-medium); color: var(--ink); }
.o-metin-tehlike, .o-acilir .o-metin-tehlike { color: var(--bad); }
.o-ok-metin { color: var(--ok); }
.o-satir-aksiyon { display: inline-flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
/* Tabloda işlem düğmeleri yan yana, tarih tek satırda kalır (sütun dar diye alt alta kırılmaz) */
.o-tablo:not([data-kart]) .o-satir-aksiyon { flex-wrap: nowrap; }
.o-tablo:not([data-kart]) td:is([data-etiket="Tarih"], [data-etiket="Vade"], [data-etiket="Zaman"], [data-etiket="Son hareket"], [data-etiket="ETD"], [data-etiket="ETA"], [data-etiket="Plan tarihi"], [data-etiket="Yanıt"]) { white-space: nowrap; }
.o-tablo:not([data-kart]) td .o-ikincil-satir { white-space: normal; }
.o-link-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.o-link-liste a { display: inline-flex; align-items: center; gap: var(--s2); }
.o-mesajlar { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.o-mesaj { max-width: 80%; padding: var(--s3); border: var(--line); border-radius: var(--r-panel); background: var(--surface); }
.o-mesaj-ekip { align-self: flex-end; background: var(--canvas); }
.o-mesaj-bas { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); margin-bottom: var(--s1); }
.o-mesaj p { white-space: pre-wrap; overflow-wrap: anywhere; }
.o-onizleme { display: block; width: 100%; max-height: 70vh; border: 0; object-fit: contain; }
iframe.o-onizleme { height: 70vh; }
.o-iki-sutun .o-tablo th { top: var(--ust-h); }
.o-panel > .o-tablo { border-top: 0; }
@media (max-width: 639px) { .o-mesaj { max-width: 100%; } .o-panel-aksiyon .o-btn { flex: 1; } }

/* İçerik alanı yönlendirmede programatik odak alır (ekran okuyucu için); görünür halka gerekmez */
.o-icerik:focus, .o-icerik:focus-visible { outline: none; box-shadow: none; }

/* "Sonraki adım" geniş ekranda yan sütunda, dar ekranda sekmelerin üstünde */
.o-dar-goster { display: none; }
@media (max-width: 1199px) { .o-dar-goster { display: flex; margin-bottom: var(--s4); } .o-genis-goster { display: none; } }

/* ---------- Belge başlığı: konşimento/beyanname kutucukları ---------- */
.o-belge { display: grid; grid-template-columns: repeat(var(--belge-n, 4), minmax(0, 1fr)); background: var(--surface); border: var(--line); border-radius: var(--r-panel); margin-bottom: var(--s4); overflow: hidden; }
.o-belge > div { padding: var(--s2) var(--s3); border-right: var(--line); border-bottom: var(--line); margin: 0 -1px -1px 0; min-width: 0; }
/* Künye hücre sayısına göre sütun: satırlar dolu kalır, sonda boş hücre olmaz (10 → 5+5, 9 → 3×3, 8 → 4+4) */
.o-belge:has(> :nth-child(5):last-child), .o-belge:has(> :nth-child(10):last-child) { --belge-n: 5; }
.o-belge:has(> :nth-child(3):last-child), .o-belge:has(> :nth-child(6):last-child), .o-belge:has(> :nth-child(9):last-child) { --belge-n: 3; }
.o-belge:has(> :nth-child(2):last-child) { --belge-n: 2; }
@media (max-width: 1099px) {
  .o-belge:has(> :nth-child(5):last-child), .o-belge:has(> :nth-child(10):last-child), .o-belge:has(> :nth-child(8):last-child) { --belge-n: 2; }
  .o-belge > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .o-belge, .o-belge:is(:has(> :nth-child(3):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) { --belge-n: 2; }
}
.o-belge dt { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); font-stretch: var(--dar); }
.o-belge dd { margin: 2px 0 0; font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-belge dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--field); }
.o-belge dd .o-soluk { font-weight: var(--w-regular); }
.o-belge dd.o-sayi { text-align: left; }

/* ---------- Menü kullanıcı bloğu ---------- */
.o-menu-kullanici { display: flex; flex-direction: column; padding: var(--s2); color: var(--on-dark); font-size: var(--t-13); line-height: var(--lh-13); overflow: hidden; }
.o-menu-kullanici span { color: var(--menu-text); font-size: var(--t-12); }
.o-menu-kullanici b { font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.o-izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o-harita-tek { margin-bottom: var(--s4); }
@media (max-width: 639px) { .o-izgara-3 { grid-template-columns: minmax(0, 1fr); } }

.o-blok { margin-bottom: var(--s4); }
.o-kv-uc { margin-top: var(--s2); grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
.o-kv-uc dt, .o-kv-uc dd { border-bottom-color: var(--wait-bg); }
.o-uyari .o-kv dt { color: var(--ink); }
.o-filtre .o-girdi.o-tarih { min-width: 0; width: auto; }
.o-uyari > .o-uyari-metin > .o-panel-aksiyon { justify-content: flex-start; }

/* ---------- Takvim ---------- */
.o-takvim { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border: var(--line); border-radius: var(--r-panel); overflow: hidden; margin-bottom: var(--s4); }
.o-takvim-baslik { padding: var(--s2); font-family: var(--font-cond); font-stretch: var(--dar); font-weight: var(--w-medium); font-size: var(--t-13); color: var(--steel); background: var(--band); border-bottom: 1px solid var(--field); }
.o-takvim-gun { min-height: 104px; padding: var(--s1) var(--s2); border-right: var(--line); border-bottom: var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-takvim-gun:nth-child(7n) { border-right: 0; }
.o-takvim-bos { background: var(--band); }
.o-takvim-no { font-size: var(--t-12); color: var(--steel); }
.o-takvim-bugun .o-takvim-no { color: var(--on-dark); background: var(--ink); border-radius: var(--r-badge); padding: 0 4px; align-self: flex-start; }
.o-takvim-olay { display: block; font-size: var(--t-12); line-height: var(--lh-12); padding: 2px 4px; border-radius: var(--r-badge); background: var(--info-bg); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-takvim-olay:hover { background: var(--canvas); }
.o-takvim-hata { background: var(--bad-bg); color: var(--bad); }
.o-takvim-ay { align-self: center; min-width: 140px; text-align: center; font-weight: var(--w-medium); }
.o-tek-satir { display: block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-kalin { font-weight: var(--w-semi); }
@media (max-width: 639px) { .o-takvim { display: none; } .o-tek-satir { max-width: none; white-space: normal; } }
@media (min-width: 640px) { .o-takvim-liste { display: none; } }

/* Sıralı liste (ülkeler vb.) */
.o-sirali { list-style: none; margin: 0; padding: 0; }
.o-sirali li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s2); padding: var(--s2) 0; border-bottom: var(--line); }
.o-sirali li:last-child { border-bottom: 0; }
.o-sirali .o-oran { grid-column: 1 / -1; width: 100%; height: 4px; background: var(--canvas); border-radius: 2px; }
.o-sirali .o-oran rect { fill: var(--asama, var(--ink)); } /* aşamaya göre listelerde öğe .o-asama-<aile> taşır */
.o-alt-baslik { font-size: var(--t-14); line-height: var(--lh-14); margin: var(--s4) 0 var(--s2); }

/* ---------- Grafikler (tek seri, Ink) ---------- */
.o-grafik-izgarasi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.o-grafik-kap { position: relative; }
.o-grafik-kap svg { display: block; width: 100%; height: auto; overflow: visible; }
.o-grafik-izgara { stroke: var(--rule); stroke-width: 1; }
.o-grafik-taban { stroke: var(--field); stroke-width: 1; }
.o-grafik-eksen { font-size: 11px; fill: var(--steel); }
.o-grafik-cubuk { fill: var(--ink); }
.o-grafik-hedef { fill: transparent; }
.o-grafik-oge { outline: none; cursor: default; }
.o-grafik-oge[data-aktif] .o-grafik-hedef, .o-grafik-oge:focus-visible .o-grafik-hedef { fill: var(--canvas); }
.o-grafik-ipucu { position: absolute; transform: translateY(-100%); pointer-events: none; white-space: nowrap; padding: var(--s1) var(--s2);
  background: var(--ink); color: var(--on-dark); border-radius: var(--r-badge); font-size: var(--t-12); box-shadow: var(--shadow-pop); }
.o-tablo-gorunum { margin-top: var(--s3); }
.o-tablo-gorunum summary { cursor: pointer; color: var(--info); font-size: var(--t-13); }
.o-tablo-gorunum .o-tablo { margin-top: var(--s2); }
.o-pay { display: inline-flex; align-items: center; gap: var(--s2); min-width: 120px; }
.o-pay .o-oran { width: 72px; height: 4px; background: var(--canvas); border-radius: 2px; }
.o-pay .o-oran rect { fill: var(--ink); }
@media (max-width: 1023px) { .o-grafik-izgarasi { grid-template-columns: minmax(0, 1fr); } }
/* Gömülü sayfa (maliyet hesaplama) */
.o-gomulu { display: block; width: 100%; min-height: calc(100vh - var(--ust-h) - 160px); border: var(--line); border-radius: var(--r-panel); background: var(--surface); }

.o-sag-aksiyon { justify-content: flex-end; margin-bottom: var(--s3); }
.o-yedek-kodlar { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1) var(--s3); }
.o-adimlar { margin: 0 0 var(--s3); padding-left: var(--s5); }
.o-adimlar li { margin-bottom: var(--s3); }
.o-qr { display: inline-block; margin: var(--s2) 0; padding: var(--s2); background: var(--on-dark); border: var(--line); border-radius: var(--r-ctl); }
.o-yigin-metni { white-space: pre-wrap; font: inherit; font-size: var(--t-12); color: var(--steel); background: var(--band); padding: var(--s2); border-radius: var(--r-ctl); margin: var(--s1) 0 0; overflow-wrap: anywhere; }
.o-secenek > span { display: flex; flex-direction: column; }
a.o-sekme { text-decoration: none; }
@media (max-width: 639px) { .o-yedek-kodlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bildirimler (Faz 3): e-posta önizlemesi (iframe srcdoc), WhatsApp metni, şablon düzenleyici */
.o-eposta-onizleme { display: block; width: 100%; height: 560px; border: var(--line); border-radius: var(--r-panel); background: var(--canvas); }
.o-modal .o-eposta-onizleme { height: 420px; }
.o-wa-onizleme { margin: 0; padding: var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink); background: var(--band); border: var(--line); border-radius: var(--r-panel); }
.o-degisken-liste { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0; padding: 0; list-style: none; }
.o-degisken-liste li { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-degisken-liste code { font: inherit; font-weight: var(--w-medium); color: var(--ink); }
.o-kural-gun { display: flex; align-items: center; gap: var(--s2); }
.o-kural-gun .o-girdi { width: 72px; text-align: right; }
@media (max-width: 639px) { .o-eposta-onizleme, .o-modal .o-eposta-onizleme { height: 480px; } }
.o-alan[hidden] { display: none; }
.o-sablon-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 1199px) { .o-sablon-izgara { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Kalite kontrol (Faz 4) ---------- */
/* Kusur sayaçları: sınıf başına bulunan sayı, kabul sınırı ve +/- (telefonda 44 px dokunma alanı) */
.o-sayaclar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--line); border-radius: var(--r-panel); background: var(--surface); }
.o-sayac-kutu { padding: var(--s3); border-left: var(--line); min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.o-sayac-kutu:first-child { border-left: 0; }
.o-sayac-kutu dt, .o-sayac-ad { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-sayac-deger { font-size: var(--t-24); line-height: var(--lh-24); font-weight: var(--w-semi); }
.o-sayac-kutu[data-durum="kaldi"] .o-sayac-deger { color: var(--bad); }
.o-sayac-sinir { font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }
.o-sayac-dugmeler { display: flex; gap: var(--s1); margin-top: var(--s1); }
.o-sayac-dugmeler .o-btn { flex: 1; height: 44px; padding: 0; }
.o-sayac-dugmeler .o-girdi { width: 64px; flex: none; height: 44px; text-align: center; padding: 0 var(--s1); }

/* Kontrol listesi maddesi: metin + üçlü seçim (Uygun / Uygun değil / Yok) */
.o-maddeler { list-style: none; margin: 0; padding: 0; }
.o-madde { padding: var(--s3) 0; border-bottom: var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: start; }
.o-madde:first-child { padding-top: 0; }
.o-madde:last-child { border-bottom: 0; padding-bottom: 0; }
.o-madde-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.o-madde-not { grid-column: 1 / -1; }
.o-madde[data-sonuc="uygun_degil"] .o-madde-metin > b { color: var(--bad); }
.o-secim-grup { display: inline-flex; border: 1px solid var(--field); border-radius: var(--r-ctl); overflow: hidden; }
.o-secim-grup label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--s3);
  cursor: pointer; font-size: var(--t-13); font-weight: var(--w-medium); color: var(--ink); border-left: 1px solid var(--field); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease); }
.o-secim-grup label:first-child { border-left: 0; }
.o-secim-grup input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-secim-grup label:hover { background: var(--canvas); }
.o-secim-grup label:has(input:focus-visible) { box-shadow: inset var(--focus); }
.o-secim-grup label:has(input[value="uygun"]:checked) { background: var(--ok-bg); color: var(--ok); }
.o-secim-grup label:has(input[value="uygun_degil"]:checked) { background: var(--bad-bg); color: var(--bad); }
.o-secim-grup label:has(input[value="na"]:checked) { background: var(--canvas); color: var(--steel); }
.o-secim-grup:has(input:disabled) label { cursor: default; }

/* Foto/video galerisi: küçük ızgara, kare küçük resimler */
.o-galeri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); }
.o-galeri li { position: relative; min-width: 0; }
.o-galeri button.o-galeri-oge { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: var(--r-ctl); }
.o-galeri button.o-galeri-oge:focus-visible { box-shadow: var(--focus); }
.o-galeri img, .o-galeri-video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); border-radius: var(--r-ctl); background: var(--canvas); }
.o-galeri-video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); color: var(--steel); font-size: var(--t-12); padding: var(--s2); text-align: center; overflow-wrap: anywhere; }
.o-galeri-alt { display: block; margin-top: 2px; font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); overflow-wrap: anywhere; }
.o-galeri .o-galeri-sil { position: absolute; top: var(--s1); right: var(--s1); background: var(--surface); }

/* Dosya seçme alanı (telefon kamerası): gizli input + buton görünümlü etiket */
.o-dosya-sec { position: relative; display: inline-flex; }
.o-dosya-sec input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.o-dosya-sec:has(input:focus-visible) .o-btn { box-shadow: var(--focus); }
.o-dosya-sec .o-btn { pointer-events: none; }

/* QC sonuç başlığı: sonuç + kısa özet (rozet ve metin; renk yalnız durum anlamında) */
.o-sonuc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.o-sonuc-metin { font-size: var(--t-20); line-height: var(--lh-20); font-weight: var(--w-semi); }
.o-sonuc[data-sonuc="kaldi"] .o-sonuc-metin { color: var(--bad); }
.o-sonuc[data-sonuc="gecti"] .o-sonuc-metin { color: var(--ok); }
.o-sonuc[data-sonuc="kosullu"] .o-sonuc-metin { color: var(--wait); }

/* Denetçi ekranı (web/denetci.html): mobil öncelikli tek sütun, sade üst çubuk */
.o-denetci-ust { position: sticky; top: 0; z-index: var(--z-ust); height: var(--ust-h); background: var(--surface); border-bottom: var(--line);
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); }
.o-denetci-ust img { height: 32px; width: auto; }
.o-denetci-ust .o-ust-sag { min-width: 0; }
.o-denetci-ust .o-kullanici-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.o-denetci-icerik { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s8); }
.o-denetci-icerik:focus, .o-denetci-icerik:focus-visible { outline: none; box-shadow: none; }
.o-kart-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.o-kart-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4);
  background: var(--surface); border: var(--line); border-radius: var(--r-panel); color: var(--ink); text-decoration: none; }
.o-kart-liste a:hover { border-color: var(--field); }
.o-kart-liste .o-kart-alt { grid-column: 1 / -1; color: var(--steel); font-size: var(--t-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.o-sabit-alt { position: sticky; bottom: 0; z-index: var(--z-ust); margin: var(--s4) calc(-1 * var(--s4)) 0; padding: var(--s3) var(--s4);
  background: var(--surface); border-top: var(--line); display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 639px) {
  .o-sayaclar { grid-template-columns: minmax(0, 1fr); }
  .o-sayac-kutu { border-left: 0; border-top: var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .o-sayac-kutu:first-child { border-top: 0; }
  .o-sayac-kutu .o-sayac-dugmeler { grid-column: 1 / -1; }
  .o-madde { grid-template-columns: minmax(0, 1fr); }
  .o-secim-grup { display: flex; width: 100%; }
  .o-secim-grup label { flex: 1; min-height: 44px; padding: 0 var(--s2); white-space: normal; text-align: center; }
  .o-galeri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-sabit-alt .o-btn { flex: 1; }
  .o-denetci-ust .o-kullanici-ad { display: none; }
}

/* Mesaj çevirisi (Faz 8, web/ortak/ceviri.js): mesajın altında "Çevir" düğmesi ve çeviri metni */
.o-ceviri { margin-top: var(--s1); }
.o-ceviri .o-btn { padding-left: 0; padding-right: 0; }
.o-ceviri-metin { margin-top: var(--s1); padding-left: var(--s2); border-left: 2px solid var(--rule); white-space: pre-wrap; overflow-wrap: anywhere; }
.o-ceviri-not { display: block; margin-top: 2px; font-size: var(--t-12); line-height: var(--lh-12); color: var(--steel); }

/* Tek satırlık filtre (Faz 8, Analiz tarih aralığı): dar ekranda da alt satıra kaymaz */
.o-filtre.o-filtre-tek { flex-wrap: nowrap; }
.o-filtre.o-filtre-tek .o-girdi { flex: 0 1 180px; min-width: 0; width: auto; }
.o-filtre.o-filtre-tek .o-btn { flex: none; }
@media (max-width: 639px) { .o-filtre.o-filtre-tek .o-girdi { flex: 1 1 0; min-width: 0; } }
.o-sirali .o-grafik-oge { outline: none; }
.o-sirali .o-grafik-oge[data-aktif], .o-sirali .o-grafik-oge:focus-visible { background: var(--canvas); }

/* Herkese açık istatistik sayfası (Faz 8, web/istatistik.html) */
.o-acik-sayfa { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.o-acik-ust { margin-bottom: var(--s6); }
.o-acik-ust img { display: block; }
.o-acik-sayfa h1 { font-size: var(--t-28); line-height: var(--lh-28); }
.o-acik-giris { margin: var(--s2) 0 var(--s5); max-width: 68ch; color: var(--steel); font-size: var(--t-16); line-height: var(--lh-16); }
.o-acik-bant dd.o-soluk { font-size: var(--t-16); line-height: var(--lh-24); font-weight: var(--w-medium); white-space: normal; }
.o-acik-not { margin-top: var(--s6); padding-top: var(--s4); border-top: var(--line); max-width: 72ch; }
.o-acik-not h2 { font-size: var(--t-16); line-height: var(--lh-16); margin-bottom: var(--s2); }
.o-acik-not ul { margin: 0 0 var(--s3); padding-left: var(--s5); }
.o-acik-not li { margin-bottom: var(--s1); }
@media (max-width: 1023px) {
  .o-acik-bant { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-acik-bant > div { border-left: 0; border-top: var(--line); }
  .o-acik-bant > div:nth-child(-n+3) { border-top: 0; }
  .o-acik-bant > div:not(:nth-child(3n+1)) { border-left: var(--line); }
}
@media (max-width: 639px) {
  .o-acik-sayfa { padding: var(--s5) var(--s4) var(--s7); }
  .o-acik-bant { grid-template-columns: minmax(0, 1fr); }
  .o-acik-bant > div, .o-acik-bant > div:not(:nth-child(3n+1)), .o-acik-bant > div:nth-child(even) { border-left: 0; border-top: var(--line); }
  .o-acik-bant > div:first-child { border-top: 0; }
}

/* OCR öneri kümesi (Faz 8, web/admin/ocr.js) */
.o-oneri-kume { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.o-oneri-kume legend { padding: 0; }
.o-oneri-kume .o-secenek { padding: var(--s2) 0; border-bottom: var(--line); }
.o-oneri-kume .o-secenek:last-child { border-bottom: 0; }

/* Kendiliğinden satır kıran bant (Faz 8, Analiz): dar ekranda tutarlar kesilmez, hücreler alt satıra geçer */
/* Saran bant: kutu sayısına göre sütun seçilir ki son satırda tek kutu kalmasın (6 → 3+3, 8 → 4+4) */
.o-bant.o-bant-sar { grid-auto-flow: row; grid-template-columns: repeat(var(--bant-n, 4), minmax(0, 1fr)); overflow: hidden; }
.o-bant-sar:has(> :nth-child(2):last-child) { --bant-n: 2; }
.o-bant-sar:has(> :nth-child(3):last-child) { --bant-n: 3; }
.o-bant-sar:has(> :nth-child(5):last-child) { --bant-n: 5; }
.o-bant-sar:has(> :nth-child(6):last-child), .o-bant-sar:has(> :nth-child(9):last-child) { --bant-n: 3; }
@media (max-width: 1279px) {
  .o-bant-sar:has(> :nth-child(5):last-child) { --bant-n: 3; }
}
@media (max-width: 1023px) {
  .o-bant.o-bant-sar { --bant-n: 2; }
  .o-bant-sar:has(> :nth-child(3):last-child), .o-bant-sar:has(> :nth-child(6):last-child), .o-bant-sar:has(> :nth-child(9):last-child) { --bant-n: 3; }
}
@media (max-width: 639px) {
  .o-bant.o-bant-sar, .o-bant-sar:has(> :nth-child(3):last-child), .o-bant-sar:has(> :nth-child(5):last-child), .o-bant-sar:has(> :nth-child(6):last-child), .o-bant-sar:has(> :nth-child(9):last-child) { --bant-n: 2; }
  .o-bant.o-bant-sar > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.o-bant.o-bant-sar > div, .o-bant.o-bant-sar > div:first-child, .o-bant.o-bant-sar > div:nth-child(-n+2), .o-bant.o-bant-sar > div:nth-child(even) {
  border-left: var(--line); border-top: var(--line); margin: -1px 0 0 -1px; }

/* ---------- Aşama renkleri: .o-asama-<aile> --asama ve --asama-bg değişkenlerini kurar ---------- */
.o-asama-hazirlik { --asama: var(--a-hazirlik); --asama-bg: var(--a-hazirlik-bg); }
.o-asama-uretim { --asama: var(--a-uretim); --asama-bg: var(--a-uretim-bg); }
.o-asama-qc { --asama: var(--a-qc); --asama-bg: var(--a-qc-bg); }
.o-asama-yukleme { --asama: var(--a-yukleme); --asama-bg: var(--a-yukleme-bg); }
.o-asama-gemide { --asama: var(--a-gemide); --asama-bg: var(--a-gemide-bg); }
.o-asama-gumruk { --asama: var(--a-gumruk); --asama-bg: var(--a-gumruk-bg); }
.o-asama-teslim { --asama: var(--a-teslim); --asama-bg: var(--a-teslim-bg); }
/* Aşama etiketi: renkli nokta + koyu yazı (renk tek başına anlam taşımaz) */
.o-asama-etiket { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); border-radius: var(--r-badge);
  background: var(--asama-bg, var(--band)); color: var(--ink); font-size: var(--t-12); line-height: 20px; white-space: nowrap; }
.o-asama-etiket::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--asama, var(--steel)); flex: none; }

/* ---------- Analiz (renkli grafikler): seri, sıralı rampa ve aşama renkleri; yazı her zaman metin token'ında ---------- */
.o-g-seri { --g: var(--g-seri); }
.o-g-seri-2 { --g: var(--g-seri-2); }
.o-g-sira-1 { --g: var(--g-sira-1); } .o-g-sira-2 { --g: var(--g-sira-2); } .o-g-sira-3 { --g: var(--g-sira-3); }
.o-g-sira-4 { --g: var(--g-sira-4); } .o-g-sira-5 { --g: var(--g-sira-5); }
.o-g-diger { --g: var(--g-diger); }
[class*="o-asama-"] { --g: var(--asama); }
.o-an .o-grafik-cubuk, .o-an-dolgu { fill: var(--g, var(--g-seri)); }
.o-an-cizgi { fill: none; stroke: var(--g, var(--g-seri)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.o-an-nokta { fill: var(--g, var(--g-seri)); stroke: var(--surface); stroke-width: 2; }
.o-an-deger { font-size: 11px; fill: var(--ink); font-weight: var(--w-medium); }
.o-an-sifir { stroke: var(--field); stroke-width: 1; }
.o-an-p90 { stroke: var(--ink); stroke-width: 2; }
/* Yatay çubuk satırları: etiket | iz | değer (dar ekranda etiket üstte) */
.o-an-satirlar { list-style: none; margin: 0; padding: 0; }
.o-an-satir { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) auto; align-items: center; gap: var(--s1) var(--s3); padding: 6px var(--s1); border-radius: var(--r-ctl); }
.o-an-satir[data-aktif], .o-an-satir:focus-visible { background: var(--canvas); outline: none; }
.o-an-etiket { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-13); line-height: var(--lh-13); }
.o-an-etiket small { display: block; color: var(--steel); font-size: var(--t-12); }
.o-an-iz { position: relative; height: 12px; }
.o-an-iz svg { position: absolute; left: 0; top: 0; height: 12px; display: block; border-radius: 0 4px 4px 0; }
.o-an-iz svg rect { fill: var(--g, var(--g-seri)); }
.o-an-iz .o-an-p90-isaret { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ink); margin-left: -1px; }
.o-an-deger-m { font-size: var(--t-13); line-height: var(--lh-13); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-an-deger-m small { display: block; color: var(--steel); font-size: var(--t-12); }
@media (max-width: 639px) {
  .o-an-satir { grid-template-columns: minmax(0, 1fr) auto; }
  .o-an-satir .o-an-etiket { grid-column: 1 / -1; }
}
/* Yığılı tek çubuk (aşama dağılımı) */
.o-an-yigin { display: flex; gap: 2px; height: 32px; margin-bottom: var(--s3); }
.o-an-parca { position: relative; min-width: 4px; border-radius: 2px; overflow: hidden; outline: none; }
.o-an-parca:first-child { border-radius: 4px 2px 2px 4px; } .o-an-parca:last-child { border-radius: 2px 4px 4px 2px; }
.o-an-parca svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.o-an-parca svg rect { fill: var(--g); }
.o-an-parca[data-aktif], .o-an-parca:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.o-an-parca span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--t-12); font-weight: var(--w-semi); color: var(--on-dark); }
.o-an-parca.o-asama-uretim span, .o-an-parca.o-asama-qc span { color: var(--ink); }
.o-an-lejant { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); list-style: none; margin: 0; padding: 0; font-size: var(--t-13); line-height: var(--lh-13); }
.o-an-lejant li { display: inline-flex; align-items: center; gap: 6px; }
.o-an-lejant i { width: 10px; height: 10px; border-radius: 2px; background: var(--g); flex: none; }
.o-an-lejant b { font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.o-an-lejant .o-an-cizgi-anahtar { height: 2px; width: 14px; border-radius: 1px; }
.o-an-ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
/* Huni: adım arası dönüşüm */
.o-an-donusum { padding: 0 var(--s1) 0 calc(34% + var(--s3)); font-size: var(--t-12); color: var(--steel); line-height: 16px; }
@media (max-width: 639px) { .o-an-donusum { padding-left: var(--s1); } }
.o-an-bekleyen { margin: var(--s5) 0 var(--s2); font-size: var(--t-13); color: var(--steel); }
.o-an-bekleyen b { color: var(--ink); font-weight: var(--w-medium); }
.o-an-izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
@media (max-width: 1199px) { .o-an-izgara-3 { grid-template-columns: minmax(0, 1fr); } }
.o-an .o-panel { min-width: 0; }
.o-an .o-grafik-izgarasi > .o-panel, .o-an .o-an-izgara-3 > .o-panel { display: flex; flex-direction: column; }
.o-an-bolum { font-size: var(--t-20); line-height: var(--lh-20); margin: var(--s6) 0 var(--s3); padding-top: var(--s4); border-top: var(--line); }
.o-an-bolum.o-an-ilk { margin-top: 0; padding-top: 0; border-top: 0; }
.o-an-bolum .o-kucuk { font-weight: var(--w-regular); margin-left: var(--s2); }
.o-an h3.o-alt-baslik { font-size: var(--t-16); line-height: var(--lh-16); margin-top: var(--s5); }
.o-an .o-pay .o-oran rect { fill: var(--g-seri); }
.o-an .o-panel-bas { flex-wrap: wrap; padding-top: var(--s2); padding-bottom: var(--s2); }
.o-an .o-panel-bas h2 { flex: 1 0 auto; max-width: 100%; }
.o-an .o-panel-bas > .o-kucuk { flex: 0 1 auto; margin-left: auto; text-align: right; }
/* Kullanıcı menüsünde dil seçimi (yönetici paneli) */
.o-acilir-dil { display: flex; gap: var(--s1); padding: var(--s1) var(--s2); border-bottom: var(--line); margin-bottom: var(--s1); }
.o-acilir .o-acilir-dil button { flex: 1; justify-content: center; padding: var(--s1); border-radius: var(--r-sm, 4px); font-size: var(--t-12); }
.o-acilir .o-acilir-dil button[aria-checked="true"] { background: var(--canvas); font-weight: 600; }

/* Sığmayan tablo kart düzeninde (interex-tablo.js): telefondaki gibi her satır etiketli blok, hiçbir sütun kesilmez */
.o-tablo[data-kart] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.o-tablo[data-kart], .o-tablo[data-kart] tbody, .o-tablo[data-kart] tr, .o-tablo[data-kart] td { display: block; width: 100%; }
.o-tablo[data-kart] tr { padding: var(--s2) var(--s4); border-bottom: var(--line); }
.o-tablo[data-kart] tbody tr:last-child { border-bottom: 0; }
.o-tablo[data-kart] td { height: auto; padding: 3px 0 3px 156px; border: 0; display: block; position: relative; text-align: left; min-height: 26px; }
.o-tablo[data-kart] td::before { content: attr(data-etiket); position: absolute; left: 0; top: 5px; width: 140px; color: var(--steel); font-size: var(--t-12); line-height: var(--lh-12); }
.o-tablo[data-kart] td.o-sag { text-align: left; }
.o-tablo[data-kart] td.o-sec { display: none; }
.o-tablo[data-kart] td:not([data-etiket]), .o-tablo[data-kart] td[data-etiket=""] { padding-left: 0; }
.o-tablo[data-kart] .o-etiket-cip, .o-tablo[data-kart] .o-rozet { margin: 1px 2px 1px 0; }

/* ---------- Tarih kutusu (interex-tarih.js): panelin dilinde gösterim + kendi takvimi ---------- */
input[type="date"][data-tarih], input[type="time"][data-tarih], input[type="number"][data-sayi] { display: none !important; }
.o-saat-gorunen { font-variant-numeric: tabular-nums; }
.o-tarih-gorunen { padding-right: 36px; font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235B6B7C' stroke-width='1.4'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E") no-repeat right 11px center; }
.o-tarih-gorunen:disabled { background-color: var(--canvas); cursor: default; }
.o-tarih-gorunen[readonly] { cursor: default; }
.o-filtre .o-tarih-gorunen { width: 148px; min-width: 0; }
.o-takvim-sec { position: fixed; z-index: calc(var(--z-modal) + 2); width: 272px; padding: var(--s3); background: var(--surface); color: var(--ink);
  border: var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); animation: o-ac var(--dur-fast) var(--ease); }
.o-ts-bas { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: var(--s2); }
.o-ts-bas strong { text-align: center; font-size: var(--t-14); font-weight: var(--w-semi); }
.o-ts-bas strong::first-letter { text-transform: uppercase; }
.o-ts-ok { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); border-radius: var(--r-ctl); cursor: pointer; }
.o-ts-ok:hover { background: var(--canvas); }
.o-ts-ok:disabled { color: var(--disabled); background: none; cursor: default; }
.o-ts-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.o-ts-gunad { height: 28px; display: grid; place-items: center; font-size: var(--t-12); color: var(--steel); }
.o-ts-izgara button { height: 34px; border: 0; background: none; color: var(--ink); border-radius: var(--r-ctl); font: inherit; font-size: var(--t-13);
  font-variant-numeric: tabular-nums; cursor: pointer; }
.o-ts-izgara button:hover { background: var(--canvas); }
.o-ts-izgara button:focus-visible { outline: none; box-shadow: var(--focus); }
.o-ts-izgara button[aria-current="date"] { font-weight: var(--w-semi); box-shadow: inset 0 0 0 1px var(--field); }
.o-ts-izgara button[aria-selected="true"] { background: var(--ink); color: var(--on-dark); font-weight: var(--w-semi); }
.o-ts-izgara button:disabled { color: var(--disabled); background: none; cursor: not-allowed; text-decoration: line-through; }
.o-ts-alt { display: flex; justify-content: space-between; margin-top: var(--s2); padding-top: var(--s2); border-top: var(--line); }

/* ---------- Dosya kutusu (interex-dosya.js): yazılar panelin dilinde ---------- */
.o-girdi.o-dosya-kutu.o-dosya-kutu { height: var(--girdi-h); min-height: 0; padding: 0 var(--s3) 0 var(--s1); }
.o-dosya-kutu { position: relative; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3) 0 var(--s1); min-width: 0; cursor: pointer; }
.o-dosya-kutu:focus-within { border-color: var(--info); box-shadow: var(--focus); }
.o-dosya-kutu[data-kapali] { background: var(--canvas); color: var(--disabled); border-color: var(--rule); cursor: not-allowed; }
.o-dosya-asil { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: inherit; }
.o-dosya-dugme { flex: none; height: 28px; display: inline-flex; align-items: center; padding: 0 var(--s3); border: 1px solid var(--field); border-radius: var(--r-ctl);
  background: var(--canvas); color: var(--ink); font-size: var(--t-13); font-weight: var(--w-medium); white-space: nowrap; }
.o-dosya-kutu:hover .o-dosya-dugme { border-color: var(--ink); }
.o-dosya-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.o-dosya-ad.o-dosya-bos { color: var(--steel); }

/* Belgenin kimlere açık olduğu (sipariş → Belgeler) */
.o-gorunurluk { display: flex; flex-wrap: wrap; gap: var(--s1); }
.o-gorunurluk .o-btn .o-ikon, .o-gorunurluk .o-rozet .o-ikon { width: 12px; height: 12px; }

/* Ürün kimlik kartı (admin/urunler.js) */
.uk-duzen { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
.uk-izgara .uk-genis { grid-column: 1 / -1; }
.uk-izgara .uk-onay { justify-content: flex-end; min-height: var(--girdi-h); }
/* Kaydet düğmesi ekranın altında sabit durur; arka planı yok, altındaki alanı örtmez */
.uk-kaydet { position: sticky; bottom: var(--s4); z-index: 2; display: flex; justify-content: flex-end; pointer-events: none; }
.uk-kaydet .o-btn { pointer-events: auto; box-shadow: var(--shadow-pop); }
.uk-izgara .o-girdi-ek > span { flex: 0 0 64px; justify-content: center; }
.uk-tablo { margin-bottom: var(--s3); }
.uk-tablo tr.uk-oneri td { background: var(--ok-bg); }
.uk-siparisler li { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s4); border-bottom: var(--line); }
.uk-bant { border: 0; border-radius: 0; }
@media (max-width: 1099px) { .uk-duzen { grid-template-columns: minmax(0, 1fr); } .uk-yan { position: static; } }
.uk-yan dd .o-ikincil-satir, .uk-tablo .o-ikincil-satir, [data-sekme-icerik] dd .o-ikincil-satir, .uk-bant .o-ikincil-satir { display: block; }
@media (min-width: 640px) { .o-tablo.uk-tablo:not([data-kart]) th.o-sayi, .o-tablo.uk-tablo:not([data-kart]) td.o-sayi { text-align: right; } }
.uk-ozet dd .o-ikincil-satir { display: block; }

/* Katalog arşivi (admin/kataloglar.js) */
.kt-firma-baslik { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); font-size: var(--t-14); font-weight: var(--w-semi); }
.kt-firma-baslik .o-ikincil { font-size: var(--t-12); font-weight: 400; }
.kt-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); }
.kt-kart { display: flex; flex-direction: column; height: 100%; border: var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden;
  color: var(--ink); text-decoration: none; transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.kt-kart:hover { box-shadow: var(--shadow-pop); }
.kt-kart:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kt-kapak { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; background: var(--canvas); border-bottom: var(--line); overflow: hidden; }
.kt-kapak img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kt-kapak-bos { display: flex; flex-direction: column; align-items: center; gap: var(--s1); color: var(--steel); font-size: var(--t-12); }
.kt-kapak-bos .o-ikon { width: 28px; height: 28px; }
.kt-bilgi { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3) var(--s3); font-size: var(--t-13); min-width: 0; }
.kt-bilgi b { font-weight: var(--w-medium); overflow-wrap: anywhere; }
.kt-bilgi .o-ikincil-satir { display: block; }
.kt-ilerleme { display: block; width: 100%; max-width: 360px; margin-top: var(--s1); }
.kt-hatalar { margin: var(--s1) 0 0; padding-left: var(--s4); }
.kt-ozet dd .o-ikincil-satir { display: block; }
.kt-not { white-space: pre-line; }
.kt-gorunum { display: block; width: 100%; height: 88vh; min-height: 560px; border: var(--line); border-radius: var(--r-panel); background: var(--canvas); }
.kt-gorsel { display: block; max-width: 100%; height: auto; border: var(--line); border-radius: var(--r-panel); }
@media (max-width: 639px) { .kt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } .kt-gorunum { height: 75vh; min-height: 420px; } }
#ktFirma::-webkit-calendar-picker-indicator, #ktKategori::-webkit-calendar-picker-indicator { display: none !important; }

/* Bölüm yetkileri (Ayarlar → Kullanıcılar): kategori başlığı ve ekran satırları; Görür / Düzenler sütunları hizalı */
.iz-kap[hidden] { display: none; }
.iz-agac { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.iz-agac[hidden] { display: none; }
.iz-grup { border: var(--line); border-radius: var(--r-panel); margin: 0; padding: 0; min-width: 0; }
.iz-satir { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; align-items: center; gap: var(--s2); padding: 6px var(--s3); border-top: var(--line); min-height: 36px; }
.iz-satir:first-of-type { border-top: 0; }
.iz-bas { background: var(--band); border-radius: var(--r-panel) var(--r-panel) 0 0; font-weight: var(--w-semi); }
.iz-ad { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.iz-ad > span { overflow-wrap: anywhere; }
.iz-satir:not(.iz-bas) .iz-ad { padding-left: var(--s3); }
.iz-kutu { display: flex; align-items: center; justify-content: flex-start; gap: 6px; cursor: pointer; font-size: var(--t-12); color: var(--steel); }
.iz-kutu input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.iz-kutu input:disabled { cursor: not-allowed; }
.iz-yok { cursor: default; }
@media (max-width: 479px) { .iz-satir { grid-template-columns: minmax(0, 1fr) 72px 80px; padding: 6px var(--s2); } .iz-satir:not(.iz-bas) .iz-ad { padding-left: 0; } }

/* Ayarlar → Hata kayıtları / Veri izi (web/admin/ayarlar.js) */
.hk-filtre { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin-bottom: var(--s4); }
.hk-filtre .o-alan { margin: 0; min-width: 160px; flex: 0 1 200px; }
.hk-filtre .hk-ara { flex: 1 1 280px; max-width: 520px; }
.hk-filtre .hk-dugme { flex: 0 0 auto; min-width: 0; }
.hk-satir { min-width: 0; overflow-wrap: anywhere; }
.hk-mesaj { display: inline; }
@media (max-width: 639px) { .hk-filtre .o-alan, .hk-filtre .hk-ara { flex: 1 1 100%; max-width: none; } }