/* ══════════════════════════════════════════════════════════
   EMTİ FASON v3.0 — Ortak Arayüz Teması
   Sade, koyu, turuncu vurgulu. Tüm paneller bu dosyayı kullanır.
   ══════════════════════════════════════════════════════════ */

:root {
  --turuncu: #ea580c;
  --turuncu-ac: #fb923c;
  --turuncu-soft: rgba(234, 88, 12, .12);
  --turuncu-cizgi: rgba(234, 88, 12, .3);

  --yesil: #34d399;
  --mavi: #60a5fa;
  --sari: #fbbf24;
  --kirmizi: #f87171;
  --mor: #a78bfa;

  --zemin: #0f1115;
  --yuzey: #161a21;
  --kabarik: #1d222b;
  --hover: rgba(255, 255, 255, .04);
  --cizgi: rgba(255, 255, 255, .08);
  --cizgi-koyu: rgba(255, 255, 255, .14);

  --yazi: #e8eaf0;
  --yazi-2: #9aa1b1;
  --yazi-3: #6b7280;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;

  --ust: 52px;
  --yan: 210px;
  --alt: 26px;
}

/* ── Açık (beyaz) tema ──
   Müşteri paneli bu temayla açılır: <html data-tema="acik">.
   Yalnız değişkenler değişir, bütün bileşenler aynı kalır. */
[data-tema="acik"] {
  --zemin: #f5f6f8;
  --yuzey: #ffffff;
  --kabarik: #eff1f5;
  --hover: rgba(15, 17, 21, .04);
  --cizgi: rgba(15, 17, 21, .11);
  --cizgi-koyu: rgba(15, 17, 21, .2);

  --yazi: #1a1d24;
  --yazi-2: #515868;
  --yazi-3: #7c8393;

  --turuncu-soft: rgba(234, 88, 12, .09);
  --turuncu-cizgi: rgba(234, 88, 12, .28);
  --turuncu-ac: #c2410c;          /* beyaz üzerinde açık turuncu okunmuyor */

  --yesil: #0f9d6b;
  --mavi: #2563eb;
  --sari: #b45309;
  --kirmizi: #dc2626;
  --mor: #7c3aed;
}
[data-tema="acik"] body { background: var(--zemin); }
[data-tema="acik"] .kart,
[data-tema="acik"] .tablo-kutu,
[data-tema="acik"] .modal,
[data-tema="acik"] .siparis-kart { box-shadow: 0 1px 2px rgba(15, 17, 21, .06); }
[data-tema="acik"] .modal-arka { background: rgba(15, 17, 21, .45); }
[data-tema="acik"] .adim.tamam .yuvarlak { color: #fff; }
[data-tema="acik"] ::-webkit-scrollbar-thumb { background: rgba(15, 17, 21, .18); }
[data-tema="acik"] .giris-kart { box-shadow: 0 18px 44px rgba(15, 17, 21, .14); }
[data-tema="acik"] .toast { box-shadow: 0 10px 30px rgba(15, 17, 21, .18); }
[data-tema="acik"] .tik.tamam .kutu { color: #fff; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--zemin);
  color: var(--yazi);
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cizgi-koyu); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--yazi-3); }

/* ══════════ UYGULAMA KABUĞU ══════════ */

.kabuk {
  display: grid;
  grid-template-rows: var(--ust) 1fr var(--alt);
  grid-template-columns: var(--yan) 1fr;
  grid-template-areas: "ust ust" "yan icerik" "alt alt";
  height: 100vh;
  overflow: hidden;
}
.kabuk.yansiz { grid-template-columns: 1fr; grid-template-areas: "ust" "icerik" "alt"; }

.ust-bar {
  grid-area: ust;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 12px;
  padding-left: 14px;
  -webkit-app-region: drag;
}
.ust-bar .sag { margin-left: auto; display: flex; align-items: center; gap: 8px; -webkit-app-region: no-drag; }

.logo-kutu {
  width: 30px; height: 30px; flex: 0 0 30px;
  background: var(--turuncu); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #fff; letter-spacing: -.5px;
}
.marka { font-weight: 700; font-size: 14px; letter-spacing: -.2px; }
.marka span { color: var(--yazi-3); font-weight: 500; margin-left: 6px; font-size: 12px; }

.yan-menu {
  grid-area: yan;
  background: var(--yuzey);
  border-right: 1px solid var(--cizgi);
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.menu-baslik {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--yazi-3); font-weight: 700; padding: 14px 10px 6px;
}
.menu-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-s);
  color: var(--yazi-2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .12s, color .12s;
  user-select: none;
}
.menu-oge:hover { background: var(--hover); color: var(--yazi); }
.menu-oge.aktif { background: var(--turuncu-soft); color: var(--turuncu-ac); font-weight: 600; }
.menu-oge svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-oge .sayac {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--kabarik); color: var(--yazi-2);
  padding: 1px 7px; border-radius: 10px;
}

.icerik { grid-area: icerik; overflow-y: auto; padding: 22px 24px 40px; }
.alt-bar {
  grid-area: alt; background: var(--yuzey); border-top: 1px solid var(--cizgi);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 11px; color: var(--yazi-3);
}
.nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--yesil); display: inline-block; margin-right: 6px; }
.nokta.kirmizi { background: var(--kirmizi); }

.sayfa { display: none; flex-direction: column; gap: 18px; }
.sayfa.aktif { display: flex; }

.sayfa-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sayfa-bas h1 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.sayfa-bas p { font-size: 12px; color: var(--yazi-3); margin-top: 3px; }
.bas-aksiyon { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════ PENCERE DÜĞMELERİ ══════════ */

.pencere-btn { display: flex; -webkit-app-region: no-drag; }
.pencere-btn button {
  width: 44px; height: var(--ust); border: 0; background: transparent;
  color: var(--yazi-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pencere-btn button:hover { background: var(--hover); color: var(--yazi); }
.pencere-btn button.kapat:hover { background: #c42b1c; color: #fff; }

/* ══════════ DÜĞMELER ══════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-s);
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik);
  color: var(--yazi-2); font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.btn:hover { background: var(--hover); color: var(--yazi); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-ana { background: var(--turuncu); border-color: var(--turuncu); color: #fff; font-weight: 600; }
.btn-ana:hover { background: #f97316; color: #fff; }
.btn-yesil { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: var(--yesil); }
.btn-yesil:hover { background: rgba(52,211,153,.2); color: var(--yesil); }
.btn-kirmizi { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.28); color: var(--kirmizi); }
.btn-kirmizi:hover { background: rgba(248,113,113,.18); color: var(--kirmizi); }
.btn-kucuk { padding: 5px 10px; font-size: 12px; }
.btn-blok { width: 100%; }

.ikon-btn {
  width: 28px; height: 28px; border-radius: var(--r-s);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--yazi-3); cursor: pointer;
  transition: all .12s;
}
.ikon-btn:hover { background: var(--kabarik); color: var(--yazi); border-color: var(--cizgi); }
.ikon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ikon-btn.sil:hover { color: var(--kirmizi); border-color: rgba(248,113,113,.25); background: rgba(248,113,113,.08); }
.ikon-grup { display: inline-flex; gap: 2px; align-items: center; }

/* ══════════ FORM ══════════ */

.alan { display: flex; flex-direction: column; gap: 5px; }
.etiket { font-size: 11px; color: var(--yazi-3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.girdi, select.girdi, textarea.girdi {
  background: var(--kabarik); border: 1px solid var(--cizgi);
  border-radius: var(--r-s); padding: 9px 11px;
  color: var(--yazi); font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .12s; width: 100%;
}
.girdi:focus { border-color: var(--turuncu); }
.girdi::placeholder { color: var(--yazi-3); }
.girdi:disabled { opacity: .5; }
select.girdi { cursor: pointer; }
textarea.girdi { resize: vertical; min-height: 62px; }
.form-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.arama { max-width: 260px; }

.secim { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--yazi-2); cursor: pointer; }
.secim input { width: 15px; height: 15px; accent-color: var(--turuncu); cursor: pointer; }

/* ══════════ KART & KPI ══════════ */

.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-l); padding: 16px 18px;
}
.kart-bas {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--cizgi);
}
.kart-bas h3 { font-size: 14px; font-weight: 600; }
.kart-bas p { font-size: 11px; color: var(--yazi-3); margin-top: 2px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); padding: 14px 16px;
}
.kpi-baslik { font-size: 11px; color: var(--yazi-3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.kpi-deger { font-size: 24px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.5px; }
.kpi-alt { font-size: 11px; color: var(--yazi-3); }

/* ══════════ TABLO ══════════ */

.tablo-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); overflow: hidden; }
.tablo-bas {
  padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--cizgi);
}
.tablo-bas h3 { font-size: 13px; font-weight: 600; }
.tablo-kaydir { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  padding: 10px 14px; text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--yazi-3); border-bottom: 1px solid var(--cizgi); background: var(--yuzey);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--cizgi); color: var(--yazi-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
td strong, td b { color: var(--yazi); font-weight: 600; }
.sag-hizala { text-align: right; }
.orta-hizala { text-align: center; }
.no-hucre { font-weight: 600; color: var(--turuncu-ac); white-space: nowrap; }
.tutar-hucre { font-weight: 600; color: var(--yesil); white-space: nowrap; }
.tutar-hucre.eksi { color: var(--kirmizi); }

.bos-hucre { text-align: center; padding: 42px 20px !important; }
.bos-baslik { font-size: 13px; font-weight: 600; color: var(--yazi-2); }
.bos-alt { font-size: 12px; color: var(--yazi-3); margin-top: 4px; }

/* ══════════ ROZET & DURUM ══════════ */

.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.rozet-gri { background: var(--kabarik); color: var(--yazi-2); border-color: var(--cizgi); }

/* Rota adımları: uzun rozet dizisi yerine kısa kutucuklar.
   Aynı hücrede ilerleme çubuğuyla birlikte durur, iki sütun yerine bir sütun tutar. */
.rota-noktalar { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 5px; }
.rota-nokta {
  font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--cizgi);
  background: var(--kabarik); color: var(--yazi-3);
}
.rota-nokta.tamam { color: var(--yesil); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .12); }
.rota-nokta.sirada { color: var(--turuncu); border-color: var(--turuncu-cizgi); background: rgba(249, 115, 22, .12); }
.durum-hucre { min-width: 132px; }

/* İkinci derece işlemler (sıra değiştirme, askıya alma): normalde soluk,
   satır üstüne gelince belirginleşir — göz önce asıl düğmeleri görsün. */
.ikinci-grup { display: inline-flex; gap: 2px; opacity: .3; transition: opacity .15s; }
tr:hover .ikinci-grup, .ikinci-grup:focus-within { opacity: 1; }

.ilerleme { width: 84px; height: 5px; background: var(--kabarik); border-radius: 3px; overflow: hidden; }
.ilerleme > div { height: 100%; background: var(--turuncu); border-radius: 3px; transition: width .3s; }
.ilerleme.tam > div { background: var(--yesil); }

/* ══════════ SEKME ══════════ */

.sekmeler {
  display: inline-flex; background: var(--kabarik);
  border: 1px solid var(--cizgi); border-radius: 8px; padding: 3px; gap: 2px;
}
.sekme {
  padding: 6px 13px; border: 0; border-radius: var(--r-s); cursor: pointer;
  background: transparent; color: var(--yazi-2); font-size: 12px; font-weight: 600;
  font-family: inherit; transition: all .12s;
}
.sekme:hover { color: var(--yazi); }
.sekme.aktif { background: var(--turuncu); color: #fff; }

/* ══════════ MODAL ══════════ */

.modal-arka {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 10, 14, .72); backdrop-filter: blur(5px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-arka.acik { display: flex; }
.modal {
  background: var(--yuzey); border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-l); width: 520px; max-width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.modal.genis { width: 900px; }
.modal.dar { width: 400px; }
.modal-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-bas h2 { font-size: 16px; font-weight: 700; }
.modal-bas p { font-size: 12px; color: var(--yazi-3); margin-top: 3px; }
.modal-kapat { background: none; border: 0; color: var(--yazi-3); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 2px; }
.modal-kapat:hover { color: var(--yazi); }
.modal-alt { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ══════════ TOAST ══════════ */

.toast-kap { position: fixed; right: 18px; bottom: 18px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--kabarik); border: 1px solid var(--cizgi-koyu); border-left: 3px solid var(--turuncu);
  color: var(--yazi); padding: 11px 16px; border-radius: var(--r-s); font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: toastGir .2s ease; max-width: 340px;
}
.toast-basarili { border-left-color: var(--yesil); }
.toast-hata { border-left-color: var(--kirmizi); }
.toast-uyari { border-left-color: var(--sari); }
.toast.cikis { opacity: 0; transform: translateX(12px); transition: all .25s; }
@keyframes toastGir { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* ══════════ TİK KUTUSU (Atölye) ══════════ */

.tik {
  width: 100%; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--kabarik); color: var(--yazi-3);
  cursor: pointer; font-family: inherit; transition: all .12s; padding: 6px 4px;
}
.tik:hover:not(:disabled) { border-color: var(--turuncu); color: var(--turuncu-ac); background: var(--turuncu-soft); }
.tik .kutu {
  width: 22px; height: 22px; border-radius: 5px;
  border: 2px solid currentColor; display: flex; align-items: center; justify-content: center;
}
.tik .kutu svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tik .alt-yazi { font-size: 10px; font-weight: 600; letter-spacing: .2px; }

.tik.tamam { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); color: var(--yesil); }
.tik.tamam .kutu { background: var(--yesil); border-color: var(--yesil); color: #0f1115; }
.tik.tamam .kutu svg { opacity: 1; }
.tik.sirada { border-color: var(--turuncu); color: var(--turuncu-ac); background: var(--turuncu-soft); box-shadow: 0 0 0 1px var(--turuncu-cizgi) inset; }
.tik.kilit { opacity: .35; cursor: not-allowed; }
.tik.yok { opacity: .18; cursor: default; background: transparent; border-style: dashed; }
.tik:disabled { pointer-events: none; }

/* ══════════ TAKVİM ══════════ */

.takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.takvim-bas {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--yazi-3);
  text-transform: uppercase; letter-spacing: .5px; padding: 6px 0;
}
.gun {
  min-height: 86px; border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--yuzey); padding: 7px 8px; display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; cursor: pointer; transition: border-color .12s;
}
.gun:hover { border-color: var(--cizgi-koyu); }
.gun.bos { background: transparent; border-style: dashed; opacity: .35; cursor: default; }
.gun.bugun { border-color: var(--turuncu); }
.gun.asim { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.05); }
.gun-no { font-weight: 700; color: var(--yazi-2); font-size: 12px; }
.gun.bugun .gun-no { color: var(--turuncu-ac); }
.gun-yuk { font-size: 10px; color: var(--yazi-3); }
.gun-bar { height: 4px; background: var(--kabarik); border-radius: 2px; overflow: hidden; margin-top: auto; }
.gun-bar > div { height: 100%; background: var(--turuncu); }
.gun.asim .gun-bar > div { background: var(--kirmizi); }
.gun-etiket {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: var(--turuncu-soft); color: var(--turuncu-ac); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════ GİRİŞ EKRANI ══════════ */

.giris-arka {
  position: fixed; inset: 0; z-index: 400;
  background: var(--zemin);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.giris-kart {
  width: 380px; max-width: 100%; background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu); border-radius: 16px; padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.giris-kart .logo-kutu { width: 46px; height: 46px; font-size: 16px; margin: 0 auto 4px; }
.giris-kart h2 { font-size: 18px; font-weight: 700; text-align: center; }
.giris-kart .alt { font-size: 12px; color: var(--yazi-3); text-align: center; margin-top: -8px; }
.giris-hata {
  display: none; font-size: 12px; color: var(--kirmizi);
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25);
  padding: 8px 12px; border-radius: var(--r-s);
}
.giris-hata.acik { display: block; }

/* ══════════ YAZDIRMA ══════════ */

.yazdir-alan { background: #fff; color: #111; padding: 26px; border-radius: 8px; }
.yazdir-alan table { font-size: 12px; }
.yazdir-alan th { background: #ea580c; color: #fff; border: 1px solid #c2410c; padding: 6px; text-transform: none; font-size: 11px; }
.yazdir-alan td { border: 1px solid #d4d4d8; padding: 5px 7px; color: #111; }
.yazdir-alan tbody tr:hover td { background: transparent; }

@media print {
  body * { visibility: hidden !important; }
  .yazdir-alan, .yazdir-alan * { visibility: visible !important; }
  .yazdir-alan { position: absolute; inset: 0; width: 100%; box-shadow: none; border-radius: 0; }
  .yazdirma-gizle { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBİL & TABLET DÜZENİ
   Yan menü çekmeceye döner, tablolar kaydırılır, modallar
   alt sayfa (bottom sheet) olur, dokunma hedefleri büyür.
   ══════════════════════════════════════════════════════════ */

/* Hamburger düğmesi — sadece küçük ekranda görünür */
.menu-ac {
  display: none;
  width: 38px; height: 38px; flex: 0 0 38px;
  align-items: center; justify-content: center;
  background: var(--kabarik); border: 1px solid var(--cizgi);
  border-radius: var(--r-s); color: var(--yazi); cursor: pointer;
  -webkit-app-region: no-drag;
}
.menu-ac svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-perde {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(6, 8, 12, .6); display: none;
}

@media (max-width: 900px) {
  .menu-ac { display: flex; }

  /* ── Kabuk: tek kolon, menü çekmece ── */
  .kabuk {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr var(--alt);
    grid-template-areas: "ust" "icerik" "alt";
  }
  .yan-menu {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 254px; max-width: 82vw; z-index: 120;
    padding-top: 12px;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 0 46px rgba(0, 0, 0, .6);
  }
  /* Açık durum "none" değil açık bir değerle yazılır:
     translateX(-102%) ↔ none geçişi tarayıcılarda güvenilir çalışmıyor. */
  .yan-menu.acik { transform: translateX(0); }
  .menu-perde.acik { display: block; }
  .menu-oge { padding: 12px 12px; font-size: 14px; }

  /* ── Üst bar: sarmalı, pencere düğmeleri gizli ── */
  .ust-bar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px 12px; gap: 8px; }
  .ust-bar .sag { gap: 6px; }
  .pencere-btn { display: none; }
  .marka { font-size: 13px; }
  .marka span { display: none; }

  /* ── İçerik ── */
  .icerik { padding: 14px 12px 34px; }
  .sayfa { gap: 14px; }
  .sayfa-bas { align-items: stretch; gap: 12px; }
  .sayfa-bas h1 { font-size: 17px; }
  .bas-aksiyon { width: 100%; }
  .bas-aksiyon .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .bas-aksiyon input.girdi { flex: 1 1 140px; width: auto; }

  /* ── Form: iOS'ta odaklanınca yakınlaşmasın diye 16px ── */
  .girdi, select.girdi, textarea.girdi { font-size: 16px; padding: 11px 12px; }
  .arama { max-width: none; width: 100%; }
  .form-satir { grid-template-columns: 1fr; gap: 10px; }

  /* ── Dokunma hedefleri ── */
  .btn { padding: 10px 14px; min-height: 40px; }
  .btn-kucuk { padding: 8px 11px; min-height: 36px; }
  .ikon-btn { width: 38px; height: 38px; }
  .ikon-btn svg { width: 17px; height: 17px; }
  .ikon-grup { gap: 4px; flex-wrap: wrap; justify-content: center; }
  .secim input { width: 19px; height: 19px; }

  /* ── Tablolar: yatay kaydırma ── */
  .tablo-kaydir { -webkit-overflow-scrolling: touch; }
  .tablo-bas { padding: 11px 12px; }
  th { padding: 9px 10px; }
  td { padding: 10px 10px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 13px; }
  .kpi-deger { font-size: 20px; }
  .kart { padding: 14px; }

  /* ── Sekmeler taşarsa kaydırılsın ── */
  .sekmeler { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sekme { white-space: nowrap; }

  /* ── Modal: alt sayfa ── */
  .modal-arka { padding: 0; align-items: flex-end; }
  .modal, .modal.genis, .modal.dar {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: var(--r-l) var(--r-l) 0 0; padding: 18px 14px 22px;
  }
  .modal-alt { flex-wrap: wrap; }
  .modal-alt .btn { flex: 1 1 auto; justify-content: center; }

  /* ── İki kolonlu düzenler ── */
  .iki-kolon { grid-template-columns: 1fr; }
  .liste-sec { max-height: 320px; }

  /* ── Takvim ── */
  .takvim { gap: 3px; }
  .gun { min-height: 58px; padding: 4px 5px; }
  .gun-no { font-size: 11px; }
  .gun-yuk { font-size: 9px; }
  .gun-etiket { font-size: 9px; padding: 1px 4px; }
  .takvim-bas { font-size: 9px; padding: 3px 0; }

  /* ── Giriş ekranı ── */
  .giris-arka { padding: 14px; align-items: flex-start; padding-top: 8vh; }
  .giris-kart { padding: 22px 18px; }

  /* ── Toast ── */
  .toast-kap { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
}

@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .bas-aksiyon .btn { flex: 1 1 100%; }
}

/* ══════════ YARDIMCI ══════════ */

.satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.satir-ara { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.dikey { display: flex; flex-direction: column; gap: 12px; }
.kucuk { font-size: 11px; color: var(--yazi-3); }
.solgun { color: var(--yazi-3); }
.vurgu { color: var(--turuncu-ac); }
.yesil-yazi { color: var(--yesil); }
.kirmizi-yazi { color: var(--kirmizi); }
.esnek { flex: 1; }
.gizli { display: none !important; }

/* ══════════════════════════════════════════════════════════
   ÖLÇÜ IZGARASI (atölye Excel düzeni) + ODAK MODU
   ══════════════════════════════════════════════════════════ */

.oi { width: 100%; border-collapse: collapse; font-size: 13px; }
.oi th {
  padding: 7px 6px; font-size: 10px; letter-spacing: .5px; text-align: center;
  color: var(--yazi-2); font-weight: 700;
  background: var(--kabarik); border-bottom: 1px solid var(--cizgi-koyu);
  position: sticky; top: 0; z-index: 2;
}
.oi th.oi-no-bas { width: 34px; }
.oi th.oi-bant-bas { color: var(--turuncu-ac); }
.oi td { padding: 0; border-bottom: 1px solid var(--cizgi); }
.oi tbody tr:hover td { background: transparent; }
.oi .oi-no {
  text-align: center; color: var(--yazi-3); font-size: 11px; width: 46px;
  white-space: nowrap; padding-right: 2px;
}
/* Ölçü çevir: satır numarasının yanında, hücrelerin dışında durur */
.oi .oi-cevir {
  margin-left: 2px; width: 16px; height: 16px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: var(--yazi-3); font-size: 12px; line-height: 1; opacity: .45; transition: all .12s;
}
.oi tr:hover .oi-cevir { opacity: 1; }
.oi .oi-cevir:hover { background: rgba(234, 88, 12, .15); color: var(--turuncu-ac); }

.oi .oi-g {
  width: 100%; height: 32px; padding: 0 8px;
  background: transparent; border: 1px solid transparent; border-radius: 0;
  color: var(--yazi); font-size: 13px; font-family: inherit; outline: none;
}
.oi .oi-g:focus {
  background: var(--kabarik); border-color: var(--turuncu);
  box-shadow: inset 0 0 0 1px var(--turuncu-cizgi);
}
.oi .oi-sayi { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.oi .oi-bant {
  text-align: center; cursor: pointer; color: var(--yazi-3);
  font-weight: 700; user-select: none;
}
.oi .oi-bant.acik { color: var(--yesil); background: rgba(52, 211, 153, .1); }
/* bant hücresi renk adı tutar: KAYIN / 0 */
/* Bant hücresi: hücrenin kendisi aç / kapa düğmesidir.
   Çift tıklama (ya da F2) rengi elle yazmak için yazma modunu açar. */
.oi .oi-bant-hucre { position: relative; }
.oi .oi-bant-hucre .oi-g { cursor: pointer; user-select: none; }
.oi .oi-bant-hucre .oi-g:hover { background: var(--hover); }
.oi .oi-bant-hucre .oi-g.acik:hover { background: rgba(52, 211, 153, .18); }
.oi .oi-bant-hucre .oi-g.yaziliyor {
  cursor: text; user-select: text;
  box-shadow: inset 0 0 0 2px var(--turuncu);
}

/* Desen: tek tiklik onay kutusu görünümü */
.oi .oi-tik { text-align: center; font-size: 14px; cursor: pointer; }
.oi .oi-tik.acik { color: var(--turuncu-ac); background: rgba(234, 88, 12, .1); }

/* Bant şeması: yalnız gösterim, tıklanmaz */
.oi .oi-sema-hucre { text-align: center; pointer-events: none; padding: 2px 4px; }
.oi .oi-sema { width: 36px; height: 24px; display: inline-block; vertical-align: middle; }
.oi .oi-sema-govde { fill: var(--kabarik); stroke: none; }
.oi .oi-sema-bos { stroke: var(--cizgi); stroke-width: 1; }
.oi .oi-sema-bant { stroke: var(--yesil); stroke-width: 3; stroke-linecap: round; }

.oi .oi-renkli { text-transform: uppercase; font-size: 12px; font-weight: 600; }
.oi .oi-kanal { font-size: 11px; letter-spacing: .3px; }
.oi .oi-buyuk { text-transform: uppercase; }
.oi .oi-kanal.acik { color: var(--turuncu-ac); background: rgba(234, 88, 12, .1); }
.oi input::placeholder { color: var(--yazi-3); opacity: .55; font-weight: 400; text-transform: none; }
.oi .oi-sil {
  width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--yazi-3); cursor: pointer; border-radius: var(--r-s); font-size: 13px;
}
.oi .oi-sil:hover { background: rgba(248, 113, 113, .12); color: var(--kirmizi); }

/* Müşteri modu: daha iri, daha okunaklı */
.oi-basit th { font-size: 11px; padding: 9px 6px; }
.oi-basit .oi-g { height: 44px; font-size: 16px; }
.oi-basit .oi-renkli { font-size: 14px; }
.oi-basit .oi-kanal { font-size: 12px; }
.oi-basit .oi-no { font-size: 13px; }

.oi-kap {
  border: 0; border-radius: 0 0 var(--r-l) var(--r-l);
  overflow: auto; max-height: 46vh;
}

/* ══════════════════════════════════════════════════════════════
   FASON KESİM FORMU — atölyenin bastırdığı kağıt formun birebiri
   Müşteriler ölçüyü bu düzende veriyor; yazdırılan sayfa da aynı olsun.
   ══════════════════════════════════════════════════════════════ */
.ef {
  --ef-turuncu: #F07C22;
  --ef-koyu: #3f3f46;
  background: #fff; color: #000;
  font-family: Arial, "Segoe UI", system-ui, sans-serif;
  width: 210mm; max-width: 100%; margin: 0 auto; padding: 6mm;
  box-sizing: border-box;
}
.ef + .ef { margin-top: 8mm; }
.ef * { box-sizing: border-box; }

/* ── Başlık ── */
.ef-bas { display: flex; align-items: center; gap: 4mm; margin-bottom: 3mm; }
.ef-logo { width: 42mm; height: 26mm; flex: none; }
.ef-logo img, .ef-logo svg { width: 100%; height: 100%; object-fit: contain; }
.ef-baslik { flex: 1; text-align: center; }
.ef-baslik div {
  font-size: 23pt; font-weight: 900; color: var(--ef-turuncu);
  line-height: 1.02; letter-spacing: .4mm;
  -webkit-text-stroke: .35mm var(--ef-koyu); paint-order: stroke fill;
}
.ef-iletisim { font-size: 8.5pt; line-height: 1.35; flex: none; }
.ef-iletisim div { display: flex; align-items: flex-start; gap: 1.6mm; margin-bottom: 1.2mm; }
.ef-iletisim svg { width: 4mm; height: 4mm; flex: none; fill: var(--ef-turuncu); margin-top: .4mm; }

/* ── Üst bilgi kutuları ── */
.ef-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-bottom: 2.5mm; }
.ef-kutu { border: .5mm solid #000; }
.ef-sat { display: flex; border-bottom: .3mm solid #000; }
.ef-sat:last-child { border-bottom: 0; }
.ef-et {
  font-size: 8pt; font-weight: 700; padding: 1.4mm 2mm;
  border-right: .3mm solid #000; white-space: nowrap; flex: none;
}
.ef-deg { font-size: 9pt; padding: 1.4mm 2mm; flex: 1; min-width: 0; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.ef-et.dar { width: 26mm; } .ef-et.orta { width: 24mm; }

/* ── Ölçü tabloları (iki sütun) ── */
.ef-tablolar { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.ef-tablo { width: 100%; border-collapse: collapse; border: .5mm solid #000; table-layout: fixed; }
.ef-tablo th {
  background: var(--ef-turuncu); color: #fff; font-size: 8.5pt; font-weight: 700;
  padding: 1.2mm 0; text-align: center; border: .3mm solid #000;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ef-tablo td {
  border: .3mm solid #000; height: 7.2mm; font-size: 9pt; text-align: center;
  padding: 0 1mm; overflow: hidden; white-space: nowrap;
}
.ef-tablo td.no { font-weight: 700; background: #fff; }
.ef-tablo col.k-no { width: 9%; } .ef-tablo col.k-olcu { width: 20%; }
.ef-tablo col.k-adet { width: 13%; } .ef-tablo col.k-pvc { width: 19%; }
.ef-tablo col.k-kanal { width: 19%; }
/* Kağıttaki küçük kutucuklar */
.ef-kt {
  display: inline-block; min-width: 13mm; border: .3mm solid #000;
  font-size: 8pt; line-height: 4.6mm; height: 5mm; padding: 0 .8mm;
}
.ef-kt.bos { color: transparent; }
.ef-yan { font-size: 6.5pt; color: #333; margin-right: .8mm; }

/* ── Alt bölüm ── */
.ef-alt { display: grid; grid-template-columns: 1fr auto auto; gap: 4mm; margin-top: 3mm; align-items: start; }
.ef-sart { font-size: 8pt; color: var(--ef-turuncu); font-weight: 700; line-height: 1.5; }
.ef-sart span { display: block; }
.ef-dusum { font-size: 8.5pt; font-weight: 700; padding-top: 1mm; }
.ef-dusum div { display: flex; align-items: center; gap: 2mm; margin-bottom: 2mm; }
.ef-dusum .ef-kt { min-width: 9mm; }
.ef-fiyat { border: .5mm solid #000; min-width: 52mm; }
.ef-fiyat-bas { display: flex; border-bottom: .3mm solid #000; }
.ef-fiyat-bas b { font-size: 8.5pt; padding: 1.6mm 2mm; border-right: .3mm solid #000; width: 22mm; }
.ef-fiyat-bas span { flex: 1; padding: 1.6mm 2mm; font-size: 9.5pt; text-align: right; }
.ef-imza { font-size: 8.5pt; font-weight: 700; padding: 2mm; line-height: 2.2; }
.ef-sayfa-no { text-align: right; font-size: 7.5pt; color: #666; margin-top: 1.5mm; }

@media print {
  .ef { width: auto; padding: 0; page-break-after: always; }
  .ef:last-child { page-break-after: auto; }
  .ef + .ef { margin-top: 0; }
}

/* Kontrol panelindeki masaüstü uygulaması indirme kartı */
.indirme-ic { display: flex; align-items: center; gap: 16px; padding: 4px 2px; flex-wrap: wrap; }
.indirme-simge {
  width: 34px; height: 34px; flex: none; stroke: var(--turuncu); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.indirme-yazi { flex: 1 1 240px; }
.indirme-yazi h3 { margin: 0 0 2px; font-size: 15px; }
.indirme-yazi p { margin: 0; font-size: 12.5px; color: var(--yazi-3); line-height: 1.45; }
.indirme-kart .btn svg { width: 16px; height: 16px; }

/* Makineye dosya çıkmadan önceki güvenlik denetiminin sonucu */
.dn-blok {
  border: 1px solid var(--cizgi); border-left-width: 4px; border-radius: var(--r-m);
  padding: 10px 14px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.5;
}
.dn-blok b { display: block; margin-bottom: 2px; }
.dn-blok ul { margin: 6px 0 0; padding-left: 18px; }
.dn-blok li { margin: 2px 0; }
.dn-tamam { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.dn-hata  { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.dn-uyari { border-left-color: #d97706; background: #fffbeb; color: #78350f; }

/* ── İş emri düzenleme: tam ekran sayfa ── */
.duzen-bas {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0 12px; margin-bottom: 14px;
  background: var(--zemin); border-bottom: 1px solid var(--cizgi);
}
.duzen-bas h1 { font-size: 19px; margin: 0; white-space: nowrap; }
.duzen-bas .btn svg { width: 14px; height: 14px; }
.duzen-aksiyon { margin-left: auto; display: flex; gap: 8px; }
/* Özet üst şeritte: parça, m², plaka, tutar — aşağıda yer kaplamasın */
.duzen-ozet { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--yazi-3); }
.duzen-ozet > div { display: flex; align-items: baseline; gap: 5px; }
.duzen-ozet b { font-size: 14px; color: var(--yazi); }

/* Ölçü uyarıları ve fiyat dökümü (üst şerit sade kalsın diye tabloların altında) */
.ie-uyari {
  font-size: 11.5px; line-height: 1.7; margin-top: 8px; padding: 8px 12px;
  border: 1px solid var(--cizgi); border-left: 3px solid var(--turuncu);
  border-radius: var(--r-m); background: var(--kabarik);
}
.ie-dokum {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 11.5px; color: var(--yazi-3); margin-top: 8px;
}
.ie-dokum b { color: var(--yazi); }

/* Katlanır araç kutusu: parametreler + toplu uygulama + kısayollar */
.arac-kutu {
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--kabarik); margin: 10px 0 0; padding: 0 12px;
}
.arac-kutu > summary {
  cursor: pointer; padding: 9px 0; font-size: 12.5px; font-weight: 600;
  color: var(--yazi-2); list-style: none;
}
.arac-kutu > summary::-webkit-details-marker { display: none; }
.arac-kutu > summary::before { content: "▸ "; color: var(--turuncu); }
.arac-kutu[open] > summary::before { content: "▾ "; }
.arac-kutu[open] > summary { border-bottom: 1px solid var(--cizgi); margin-bottom: 10px; }
.arac-kutu .oi-param, .arac-kutu .oi-toplu { margin-left: 0; margin-right: 0; border: 0; background: none; padding: 0; }
.arac-kutu .oi-param { border-bottom: 1px solid var(--cizgi); border-radius: 0; padding-bottom: 8px; }
.arac-kutu .op-bas { background: none; border: 0; padding: 0 0 6px; }
.arac-kutu .op-satirlar { padding: 0 0 8px; }
.arac-kutu .oi-yardim { padding-bottom: 10px; }

/* Sade sütun görünümü: ölçü, bant ve malzeme kalır; ürün/kod/kanal/bant mm
   ve serbest not gizlenir. Sıra numarası 1. sütun olduğu için sayılar bir kaydırılır:
   11=ÜRÜN, 12=MALZEME, 13=KOD, 14-15=KANAL, 16=BANT mm, 17=AÇIKLAMA */
table.oi-sade th:nth-child(12), table.oi-sade td:nth-child(12),
table.oi-sade th:nth-child(n+14):nth-child(-n+18),
table.oi-sade td:nth-child(n+14):nth-child(-n+18) { display: none; }

/* Ölçü ızgarasının üstündeki parametre şeridi (GibLab'daki operasyon tablosu gibi) */
.oi-param {
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--kabarik); margin: 0 0 10px; overflow: hidden;
}
.op-bas {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey);
}
.op-bas b { font-size: 12.5px; }
.op-bas span { font-size: 11px; color: var(--yazi-3); }
.op-bas kbd {
  font-family: inherit; font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--cizgi); background: var(--kabarik); color: var(--yazi-2);
}
.op-satirlar { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.op-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-kod {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--turuncu);
  background: var(--turuncu-zemin, rgba(234,88,12,.12));
  border: 1px solid var(--turuncu-cizgi, rgba(234,88,12,.35));
  border-radius: 4px; padding: 2px 7px; min-width: 48px; text-align: center;
}
.op-satir .girdi { height: 30px; padding: 3px 8px; font-size: 12.5px; width: 170px; }
.op-satir .girdi.op-mm { width: 74px; }
.op-sec button { font-size: 11.5px; padding: 3px 10px; }
.op-cipler { display: flex; gap: 6px; flex-wrap: wrap; }
.op-cip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--yazi-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.op-cip.aktif { border-color: var(--turuncu); color: var(--turuncu); font-weight: 600; }
.op-cip .sil { opacity: .5; font-size: 13px; line-height: 1; }
.op-cip .sil:hover { opacity: 1; }

/* Ölçüler girildikten sonra bant/kanalı topluca işleme şeridi */
.oi-toplu {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px;
  margin: 10px 0 8px; padding: 10px 12px;
  background: var(--kabarik); border: 1px solid var(--cizgi); border-radius: var(--r-m);
  font-size: 12px;
}
.oi-toplu > b { align-self: center; color: var(--yazi-2); }
.oi-toplu label { display: flex; flex-direction: column; gap: 4px; color: var(--yazi-3); font-size: 11.5px; }
.oi-toplu .girdi { height: 32px; padding: 4px 8px; font-size: 12.5px; }

/* Hızlı girişte TAB/ENTER'ın dolaşmadığı sütunlar geri plana çekilir */
table.oi-hizli .oi-g:not([data-a="boy"]):not([data-a="en"]):not([data-a="adet"]) { opacity: .55; }
table.oi-hizli .oi-g:focus { opacity: 1; }

/* Eski kısayol şeridi kaldırıldı (artık Ölçüler başlığındaki "?" içinde).
   Kural, dışarıda kalmış bir kullanım olursa bozulmasın diye duruyor. */
.oi-yardim {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  font-size: 11.5px; color: var(--yazi-2); padding: 2px 2px 0;
}
.oi-yardim b {
  color: var(--yazi); background: var(--kabarik); border: 1px solid var(--cizgi);
  border-radius: 4px; padding: 1px 6px; font-family: inherit; font-weight: 600;
}

/* ── Odak modu: ölçü ekranı açıkken her yer kararır ── */
.modal-arka.odak { background: rgba(2, 3, 5, .96); backdrop-filter: none; }
.modal-arka.odak .modal {
  border-color: var(--turuncu-cizgi);
  box-shadow: 0 0 0 1px rgba(234, 88, 12, .25), 0 30px 90px rgba(0, 0, 0, .85);
}

@media (max-width: 900px) {
  .oi .oi-g { height: 42px; font-size: 16px; }
  .oi-basit .oi-g { height: 46px; }
  .oi-kap { max-height: 52vh; }
  .oi th { font-size: 9px; padding: 6px 3px; }
}

/* ══════════════════════════════════════════════════════════
   ÖLÇÜ GİRİŞİ — BASİT GÖRÜNÜM (adım adım + ölçekli çizim)
   ══════════════════════════════════════════════════════════ */

/* Görünüm seçici: Basit | Gelişmiş */
.gorunum-sec {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--zemin); border: 1px solid var(--cizgi-koyu); border-radius: 999px;
}
.gorunum-sec button {
  border: 0; background: transparent; color: var(--yazi-2); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; padding: 7px 15px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.gorunum-sec button:hover { color: var(--yazi); }
.gorunum-sec button.secili {
  background: linear-gradient(180deg, #f97316, var(--turuncu)); color: #fff;
  box-shadow: 0 2px 10px rgba(234, 88, 12, .35);
}
.gorunum-sec button:focus-visible { outline: 2px solid var(--turuncu-ac); outline-offset: 1px; }

.mod-basit .sadece-gelismis, .mod-gelismis .sadece-basit { display: none !important; }

.ob { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

/* ── Düzenleme şeridi ── */
.ob-duzen {
  align-self: center; display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 8px 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--turuncu-ac); background: var(--turuncu-soft); border: 1px solid var(--turuncu-cizgi);
}
.ob-duzen[hidden] { display: none; }

/* ── Sahne: ortada ölçekli önizleme ── */
.ob-sahne {
  width: 100%; max-width: 560px; align-self: center; border-radius: 18px; padding: 8px 14px 10px;
  background:
    radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.2px) 0 0 / 14px 14px,
    radial-gradient(ellipse at 50% 35%, rgba(234, 88, 12, .07), transparent 65%),
    linear-gradient(180deg, #151920, #10131a);
  border: 1px solid var(--cizgi);
}
.ob-cizim .ob-svg { width: 100%; height: auto; display: block; }
.ob-cizim-alt {
  min-height: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0;
  font-size: 12.5px; color: var(--yazi-2); text-align: center;
}
.ob-cizim-alt b { color: var(--yazi); font-weight: 700; letter-spacing: .3px; }
.ob-nokta { margin: 0 8px; color: var(--yazi-3); }

/* ── Soru kartı ── */
.ob-soru-alan {
  width: 100%; max-width: 560px; align-self: center;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: center;
}
.ob-ok-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-family: inherit;
  font-size: 26px; line-height: 1; padding-bottom: 3px; display: grid; place-items: center;
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); color: var(--yazi-2);
  transition: background .15s, color .15s, border-color .15s, transform .1s, opacity .15s;
}
.ob-ok-btn:hover:not(:disabled) { color: var(--turuncu-ac); border-color: var(--turuncu-cizgi); background: var(--turuncu-soft); }
.ob-ok-btn:active:not(:disabled) { transform: scale(.94); }
.ob-ok-btn:disabled { opacity: .25; cursor: default; }
.ob-ok-btn.ekle { font-size: 20px; padding: 0; color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #f97316, var(--turuncu)); box-shadow: 0 4px 14px rgba(234, 88, 12, .35); }
.ob-ok-btn.ekle:hover { color: #fff; filter: brightness(1.08); }

.ob-kartlar { position: relative; min-width: 0; }
.ob-adim {
  display: none; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 16px 18px 14px; border-radius: 16px;
  background: var(--yuzey); border: 1px solid var(--cizgi-koyu);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.ob-adim.aktif { display: flex; }
.ob-adim.gir-ileri { animation: ob-gir-ileri .26s cubic-bezier(.2, .8, .2, 1); }
.ob-adim.gir-geri  { animation: ob-gir-geri .26s cubic-bezier(.2, .8, .2, 1); }
.ob-adim.salla     { animation: ob-salla .32s; border-color: rgba(248, 113, 113, .5); }
@keyframes ob-gir-ileri { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes ob-gir-geri  { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes ob-salla { 0%, 100% { transform: none; } 25%, 75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .ob-adim.gir-ileri, .ob-adim.gir-geri, .ob-adim.salla { animation: none; } }

.ob-soru { font-size: 17px; font-weight: 700; color: var(--yazi); display: flex; align-items: center; gap: 10px; }
.ob-soru-no { font-size: 11px; font-weight: 700; color: var(--turuncu-ac); background: var(--turuncu-soft);
  padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ob-ipucu { font-size: 11.5px; color: var(--yazi-3); min-height: 16px; }

.ob-girdi-kap { position: relative; width: 100%; max-width: 300px; display: flex; align-items: center; }
.ob-girdi-kap .girdi {
  height: 54px; font-size: 22px; font-weight: 700; text-align: center; padding: 0 52px;
  background: var(--zemin); border-radius: 12px; border-width: 1.5px;
  transition: border-color .15s, box-shadow .15s;
}
.ob-girdi-kap .girdi:focus { border-color: var(--turuncu); box-shadow: 0 0 0 4px var(--turuncu-soft); }
.ob-girdi-kap .ob-sayi { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.ob-girdi-kap [data-f="renk"], .ob-girdi-kap [data-f="aciklama"] { text-transform: uppercase; font-size: 18px; }
.ob-girdi-kap input::placeholder { text-transform: none; font-weight: 500; color: var(--yazi-3); opacity: .45; }
.ob-birim { position: absolute; right: 16px; font-size: 12px; color: var(--yazi-3); pointer-events: none; }

/* Kenar bandı */
.ob-bantlar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; border-radius: 12px;
  background: var(--zemin); border: 1.5px solid var(--cizgi-koyu); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ob-bantlar:focus { border-color: var(--turuncu); box-shadow: 0 0 0 4px var(--turuncu-soft); }
.ob-kenar-btn, .ob-hazir {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); color: var(--yazi-2);
  border-radius: 999px; padding: 7px 12px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.ob-kenar-btn:active, .ob-hazir:active { transform: scale(.95); }
.ob-kenar-btn b { font-size: 13px; opacity: .8; }
.ob-kenar-btn.acik { background: var(--turuncu); border-color: var(--turuncu); color: #fff; box-shadow: 0 2px 8px rgba(234, 88, 12, .35); }
.ob-hazir { background: transparent; font-weight: 500; color: var(--yazi-3); border-style: dashed; }
.ob-hazir:hover, .ob-kenar-btn:hover { border-color: var(--turuncu-cizgi); color: var(--yazi); }
.ob-ayrac { width: 1px; align-self: stretch; background: var(--cizgi-koyu); margin: 3px 2px; }

/* Kanal + ekle */
.ob-son-sira { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ob-anahtar {
  display: inline-flex; align-items: center; gap: 10px; height: 46px;
  border: 1.5px solid var(--cizgi-koyu); background: var(--zemin); color: var(--yazi-2);
  border-radius: 999px; padding: 4px 18px 4px 6px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700;
}
.ob-anahtar-top { width: 44px; height: 26px; border-radius: 999px; background: var(--cizgi-koyu); position: relative; transition: background .15s; }
.ob-anahtar-top::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .18s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.ob-anahtar.acik { color: var(--yazi); border-color: rgba(96, 165, 250, .5); }
.ob-anahtar.acik .ob-anahtar-top { background: var(--mavi); }
.ob-anahtar.acik .ob-anahtar-top::after { left: 21px; }
.ob-anahtar:focus { outline: none; box-shadow: 0 0 0 4px rgba(96, 165, 250, .22); }
.ob-ekle { height: 46px; padding: 0 20px; font-size: 14.5px; border-radius: 12px;
  background: linear-gradient(180deg, #f97316, var(--turuncu)); box-shadow: 0 4px 14px rgba(234, 88, 12, .3); }
.ob-ekle:hover { filter: brightness(1.07); }

.ob-ek { font-size: 12px; color: var(--yazi-3); width: 100%; }
.ob-ek summary { cursor: pointer; list-style: none; display: inline-block; }
.ob-ek summary::-webkit-details-marker { display: none; }
.ob-ek summary::before { content: "＋ "; }
.ob-ek[open] summary::before { content: "－ "; }
.ob-ek summary:hover { color: var(--yazi-2); }
.ob-ek-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

.ob kbd {
  font-family: inherit; font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .16); margin: 0 1px;
}

/* İlerleme noktaları */
.ob-noktalar { display: flex; justify-content: center; gap: 6px; margin-top: -2px; }
.ob-noktalar button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .14); transition: width .2s, background .2s;
}
.ob-noktalar button.gecti { background: rgba(251, 146, 60, .5); }
.ob-noktalar button.aktif { width: 22px; background: var(--turuncu-ac); }

.ob-hata { display: none; align-self: center; max-width: 560px; padding: 8px 14px; border-radius: 10px; text-align: center;
  background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); color: var(--kirmizi); font-size: 13px; }
.ob-hata.acik { display: block; }

/* ── SVG ── */
.ob-parca.bos { fill: rgba(255, 255, 255, .02); stroke: var(--cizgi-koyu); stroke-dasharray: 7 6; stroke-width: 1.5; }
.ob-golge { fill: rgba(0, 0, 0, .45); }
.ob-kenar { stroke: #8b7355; stroke-linecap: round; }
.ob-kenar.acik { stroke: #fb923c; filter: drop-shadow(0 0 2px rgba(251, 146, 60, .45)); }
.vurgu-bant .ob-kenar:not(.acik) { stroke: rgba(251, 146, 60, .55); stroke-dasharray: 5 5; animation: ob-kenar-akis 1.2s linear infinite; }
@keyframes ob-kenar-akis { to { stroke-dashoffset: -20; } }
.ob-kanal { stroke: #60a5fa; stroke-width: 2.2; stroke-dasharray: 6 4; filter: drop-shadow(0 0 2px rgba(96, 165, 250, .6)); }
.ob-kanal.hayalet { opacity: .3; filter: none; }
.ob-hit { stroke: transparent; stroke-width: 24; stroke-linecap: round; cursor: pointer; }
.ob-hit:hover { stroke: rgba(251, 146, 60, .25); }
.ob-uzanti { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.ob-olcu { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }
.ob-ok { fill: rgba(255, 255, 255, .7); }
.ob-etiket-zemin { fill: #1d222b; stroke: rgba(255, 255, 255, .16); stroke-width: 1; transition: fill .2s; }
.ob-etiket-zemin.adet { fill: rgba(234, 88, 12, .18); stroke: var(--turuncu-cizgi); }
.ob-etiket-zemin.kanal { fill: rgba(17, 24, 39, .85); stroke: rgba(96, 165, 250, .5); }
.ob-etiket-zemin.vurgu { fill: var(--turuncu); stroke: #fdba74; animation: ob-parla 1.6s ease-in-out infinite; }
.ob-yazi.vurgu { fill: #fff; }
@keyframes ob-parla { 50% { stroke-width: 3; stroke: rgba(253, 186, 116, .5); } }
.ob-yazi { fill: var(--yazi); font: 600 11.5px system-ui, -apple-system, "Segoe UI", sans-serif; }
.ob-yazi.soluk { fill: var(--yazi-3); font-weight: 500; font-size: 12.5px; }
.ob-yazi.bant { fill: #fb923c; font-size: 10.5px; letter-spacing: .4px; }
.ob-yazi.adet { fill: #fdba74; font-size: 12px; }
.ob-yazi.adet.vurgu { fill: #fff; }
.ob-yazi.kanal { fill: #93c5fd; font-size: 10px; }

/* ── Eklenen parçalar ── */
.ob-liste-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--cizgi); }
.ob-liste-bas h4 { font-size: 13px; display: flex; align-items: baseline; gap: 8px; color: var(--yazi-2); }
.ob-liste-sayi { font-weight: 600; color: var(--turuncu-ac); font-size: 12px; background: var(--turuncu-soft); padding: 2px 8px; border-radius: 999px; }
.ob-liste-sayi:empty { display: none; }
.ob-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 30vh; overflow: auto; padding: 2px; }
.ob-kart {
  position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 6px 8px 8px; outline: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ob-kart.yeni { animation: ob-kart-gel .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes ob-kart-gel { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
.ob-kart:hover, .ob-kart:focus { border-color: var(--turuncu-cizgi); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.ob-kart.duzenleniyor { border-color: var(--turuncu); box-shadow: 0 0 0 3px var(--turuncu-soft); }
.ob-kart.eksik { border-color: rgba(251, 191, 36, .55); }
.ob-kart-no {
  position: absolute; top: 6px; left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--kabarik); color: var(--yazi-2); border: 1px solid var(--cizgi-koyu);
}
.ob-kart-sekil { border-radius: 8px; background: var(--zemin); }
.ob-kart-sekil .ob-svg { width: 100%; height: 60px; display: block; }
.ob-kart-yazi { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; line-height: 1.35; }
.ob-kart-yazi b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-kart-olcu { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.ob-kart-olcu em { font-style: normal; margin-left: auto; color: var(--turuncu-ac); font-size: 11.5px; }
.ob-uyari { color: var(--sari); font-weight: 600; }
.ob-kart-sil {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: var(--yazi-3); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.ob-kart:hover .ob-kart-sil, .ob-kart:focus .ob-kart-sil, .ob-kart.duzenleniyor .ob-kart-sil { opacity: 1; }
.ob-kart-sil:hover { background: rgba(248, 113, 113, .2); color: var(--kirmizi); }
.ob-liste-bos { grid-column: 1 / -1; padding: 14px; text-align: center; color: var(--yazi-3); font-size: 12.5px;
  border: 1.5px dashed var(--cizgi); border-radius: 12px; }

@media (max-width: 600px) {
  .ob-soru-alan { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; }
  .ob-ok-btn { width: 36px; height: 36px; font-size: 22px; }
  .ob-adim { padding: 14px 10px 12px; }
  .ob-soru { font-size: 15px; }
  .ob-ek-alanlar { grid-template-columns: 1fr; }
  .ob-liste { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: none; }
  .ob-kart-sil { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   RENK KATALOĞU — yazarak arama listesi + yönetim
   ══════════════════════════════════════════════════════════ */
.rk-liste {
  position: fixed; z-index: 10050; display: none; max-height: 260px; overflow: auto;
  background: #1a1e26; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-m);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55); padding: 4px;
}
.rk-liste.acik { display: block; }
.rk-oge {
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 6px 8px; border-radius: var(--r-s); cursor: pointer;
}
.rk-oge:hover { background: var(--hover); }
.rk-oge.secili { background: var(--turuncu-soft); box-shadow: inset 0 0 0 1px var(--turuncu-cizgi); }
.rk-kutu {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.rk-ad { font-size: 13px; font-weight: 700; color: var(--yazi); line-height: 1.2; }
.rk-ad small { font-weight: 600; color: var(--turuncu-ac); font-size: 11px; margin-left: 4px; }
.rk-alt { font-size: 11px; color: var(--yazi-3); line-height: 1.3; }
.rk-bos { padding: 12px; font-size: 12.5px; color: var(--sari); line-height: 1.5; }
.rk-bos span { color: var(--yazi-3); font-size: 11.5px; }

/* Katalogda olmayan renk yazılmış kutu */
.girdi.rk-yabanci, .oi .oi-g.rk-yabanci { box-shadow: inset 0 -2px 0 var(--sari); }

/* Ayarlar → Renk Kataloğu */
.rk-markalar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rk-marka {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); color: var(--yazi-3); font-size: 12.5px; font-weight: 600;
  font-family: inherit;
}
.rk-marka.acik { border-color: var(--turuncu-cizgi); background: var(--turuncu-soft); color: var(--yazi); }
.rk-marka b { font-weight: 700; color: var(--turuncu-ac); }
.rk-tablo-kap { max-height: 320px; overflow: auto; border: 1px solid var(--cizgi); border-radius: var(--r-m); }
.rk-tablo-kap td .rk-kutu { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.rk-ekle-satir { display: grid; grid-template-columns: 110px 1fr 160px 140px 44px auto; gap: 8px; align-items: end; margin-top: 10px; }
.rk-ekle-satir input[type="color"] { height: 38px; padding: 2px; background: var(--kabarik); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-s); }
.rk-durum { font-size: 12px; color: var(--sari); }
@media (max-width: 900px) {
  .rk-ekle-satir { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════
   TERMİN SEÇİCİ — ‹ tarih › + "X günlük termin" + hızlı günler
   ══════════════════════════════════════════════════════════ */
.termin { display: flex; flex-direction: column; gap: 6px; }
.termin-sira { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; }
.termin-kutu { min-width: 0; }
.termin-kutu .girdi { text-align: center; font-weight: 600; color-scheme: dark; }
.termin-ok {
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); color: var(--yazi);
  border-radius: var(--r-s); font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.termin-ok:hover { border-color: var(--turuncu-cizgi); background: var(--turuncu-soft); color: var(--turuncu-ac); }
.termin-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.termin-yazi { font-size: 12px; font-weight: 700; color: var(--turuncu-ac); }
.termin-yazi.bugun { color: var(--yesil); }
.termin-yazi.gecmis { color: var(--kirmizi); }
.termin-yazi.bos { color: var(--yazi-3); font-weight: 600; }
.termin-hizli { display: inline-flex; gap: 4px; }
.termin-hizli button {
  border: 1px solid var(--cizgi); background: transparent; color: var(--yazi-2); cursor: pointer;
  border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; font-family: inherit;
}
.termin-hizli button:hover { color: var(--yazi); border-color: var(--cizgi-koyu); }
.termin-hizli button.secili { color: var(--yazi); border-color: var(--turuncu-cizgi); background: var(--turuncu-soft); }

/* Basit görünüm: seçilen dekorun adı ve örneği */
.ob-dekor { display: inline-flex; align-items: center; gap: 6px; }
.ob-dekor i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); display: inline-block; }

/* ══════════════════════════════════════════════════════════
   OPERATÖR PIN'İ — atölye onay penceresi + personel formu
   ══════════════════════════════════════════════════════════ */
.onay-kim { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: end; }
.onay-kim .alan { margin: 0; }
.pin-girdi { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 8px; font-variant-numeric: tabular-nums; }
.pin-girdi::placeholder { letter-spacing: 4px; font-size: 16px; }
.pin-girdi:disabled { opacity: .45; font-size: 12px; letter-spacing: 0; }
.pin-mesaj { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; min-height: 0; }
.pin-mesaj:empty { display: none; }
.pin-mesaj.hata { color: var(--kirmizi); }
.pin-mesaj.uyari { color: var(--sari); }
.pin-kutu { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--r-m); }
.pin-kutu .alan { margin: 0; }
.pin-kutu p { margin: 0; line-height: 1.5; }
@keyframes pin-titre { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.titre { animation: pin-titre .35s; border-color: var(--kirmizi) !important; }
@media (max-width: 600px) { .pin-kutu { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   İŞ ROTASI — ölçülere göre otomatik seçim
   ══════════════════════════════════════════════════════════ */
.rota-bilgi { font-size: 11.5px; color: var(--yazi-3); margin-top: 6px; }
.rota-oto, .rota-elle { font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.rota-oto { color: var(--yesil); background: rgba(52, 211, 153, .12); }
.rota-elle { color: var(--sari); background: rgba(251, 191, 36, .12); }
.baglanti-btn { background: none; border: 0; padding: 0; color: var(--turuncu-ac); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.rota-oto-liste { display: flex; gap: 8px; flex-wrap: wrap; }
.rota-cip { padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--cizgi); background: var(--kabarik);
  font-size: 13px; color: var(--yazi-3); }
.rota-cip.var { color: var(--yazi); border-color: var(--turuncu-cizgi); background: var(--turuncu-soft); }
.rota-oto-liste.secilebilir .rota-cip { font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s; }
.rota-oto-liste.secilebilir .rota-cip:hover { border-color: var(--turuncu); }
.sh-toplu { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════
   DİJİTAL KARTELA + ODANDA GÖR
   ══════════════════════════════════════════════════════════ */
body.kt-acik { overflow: hidden; }
.kt-arka {
  position: fixed; inset: 0; z-index: 10040; display: none; padding: 18px;
  background: rgba(5, 7, 10, .72); backdrop-filter: blur(4px);
}
.kt-arka.acik { display: flex; animation: kt-gel .18s ease-out; }
@keyframes kt-gel { from { opacity: 0; } to { opacity: 1; } }
.kt-pencere {
  margin: auto; width: min(1280px, 100%); height: min(860px, 100%); display: flex; flex-direction: column;
  background: var(--zemin); border: 1px solid var(--cizgi-koyu); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.kt-bas { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey); }
.kt-baslik { font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.kt-sekmeler { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--zemin); border: 1px solid var(--cizgi-koyu); }
.kt-sekmeler button { border: 0; background: transparent; color: var(--yazi-3); font: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.kt-sekmeler button.secili { background: var(--turuncu); color: #fff; }
.kt-kapat { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cizgi-koyu);
  background: var(--kabarik); color: var(--yazi-2); cursor: pointer; font-size: 15px; }
.kt-kapat:hover { color: var(--yazi); border-color: var(--turuncu-cizgi); }

.kt-govde { display: none; flex: 1; min-height: 0; flex-direction: column; }
.kt-govde.acik { display: flex; }

/* Kartela */
.kt-g-kartela { padding: 12px 16px 0; gap: 8px; }
.kt-arac { display: flex; gap: 8px; }
.kt-arac .girdi { width: auto; }
.kt-ara { flex: 1 1 auto; min-width: 0; height: 42px; font-size: 14px; }
.kt-seri { flex: 0 0 200px; height: 42px; }
.kt-filtre { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-filtre button {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cizgi-koyu); background: var(--kabarik);
  color: var(--yazi-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.kt-filtre button:hover { color: var(--yazi); }
.kt-filtre button.secili { background: var(--turuncu-soft); border-color: var(--turuncu-cizgi); color: var(--yazi); }
.kt-filtre i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.25); }
.kt-aile-ahsap i { background: linear-gradient(135deg, #c79a64, #7a5230); }
.kt-aile-beyaz i { background: #f4f2ec; }
.kt-aile-bej i { background: #dcc9a8; }
.kt-aile-gri i { background: linear-gradient(135deg, #9a9ca0, #2b2d31); }
.kt-aile-tas i { background: linear-gradient(135deg, #e8e4dc, #9d968c 60%, #d6d0c6); }
.kt-aile-renkli i { background: conic-gradient(#e11d48, #f59e0b, #22c55e, #3b82f6, #a855f7, #e11d48); }

.kt-icerik { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.kt-izgara-kap { min-height: 0; overflow: auto; padding-bottom: 16px; }
.kt-sayi { font-size: 12px; color: var(--yazi-3); margin: 2px 0 8px; }
.kt-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; outline: none; }
.kt-oge {
  display: flex; flex-direction: column; gap: 3px; padding: 0 0 8px; text-align: left; cursor: pointer; overflow: hidden;
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 12px; color: var(--yazi); font: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.kt-oge:hover { transform: translateY(-2px); border-color: var(--turuncu-cizgi); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.kt-oge:focus-visible { outline: 2px solid var(--turuncu-ac); outline-offset: 2px; }
.kt-oge.secili { border-color: var(--turuncu); box-shadow: 0 0 0 3px var(--turuncu-soft); }
.kt-oge-gorsel { display: block; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 4px; }
.kt-oge-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-oge-ad { font-size: 12px; font-weight: 700; padding: 0 8px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-oge-kod { font-size: 10.5px; color: var(--yazi-3); padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-bos { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--yazi-3); font-size: 13px; }

.kt-detay { position: relative; overflow: auto; padding: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.kt-detay-bos { margin-top: 40px; padding: 24px; text-align: center; color: var(--yazi-3); font-size: 13px; border: 1.5px dashed var(--cizgi); border-radius: 14px; }
.kt-detay-gorsel { aspect-ratio: 1 / 1; flex: 0 0 auto; border-radius: 14px; border: 1px solid var(--cizgi-koyu); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); background-size: cover !important; }
.kt-detay-ad { font-size: 20px; font-weight: 800; margin-top: 4px; }
.kt-detay-alt { font-size: 12.5px; color: var(--yazi-2); }
.kt-detay-not { font-size: 11.5px; color: var(--yazi-3); line-height: 1.5; }
.kt-detay-dugme { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.kt-detay-dugme .btn { justify-content: center; height: 42px; font-size: 14px; }
.kt-detay-kapat { display: none; }

/* Odanda gör */
.kt-oda { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.kt-sahne { position: relative; min-height: 0; display: grid; place-items: center; padding: 14px; overflow: hidden;
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px) 0 0 / 16px 16px, #0b0d11; }
.kt-tuval { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); display: none; touch-action: none; cursor: default; }
.kt-oda.dolu .kt-tuval { display: block; }
.kt-sahne.ekleniyor .kt-tuval { cursor: crosshair; }
.kt-sahne-bos { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 460px; color: var(--yazi-2); font-size: 13.5px; line-height: 1.55; }
.kt-sahne-bos b { font-size: 20px; color: var(--yazi); }
.kt-sahne-bos small { color: var(--yazi-3); font-size: 11.5px; }
.kt-bos-dugme { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.kt-bos-dugme label.btn { cursor: pointer; }
.kt-oda.dolu .kt-sahne-bos { display: none; }
.kt-ipucu-serit { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); display: none;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; color: var(--yazi); white-space: nowrap;
  background: rgba(17, 20, 26, .92); border: 1px solid var(--turuncu-cizgi); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.kt-ipucu-serit.acik { display: block; animation: kt-gel .2s; }
.kt-ipucu-serit b { color: var(--turuncu-ac); }

.kt-oda-yan { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-left: 1px solid var(--cizgi); background: var(--yuzey); }
.kt-oda-dugme { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-oda-dugme label.btn { cursor: pointer; }
.kt-bolum-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--yazi-3); }
.kt-bolum-bas .kucuk { text-transform: none; letter-spacing: 0; }
.kt-yuzeyler { display: flex; flex-direction: column; gap: 6px; }
.kt-yuzey { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 8px; align-items: center; padding: 6px;
  border-radius: 10px; border: 1px solid var(--cizgi); background: var(--zemin); cursor: pointer; }
.kt-yuzey.aktif { border-color: var(--turuncu); box-shadow: 0 0 0 3px var(--turuncu-soft); }
.kt-yuzey-kutu { width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--cizgi-koyu); background-size: cover !important; }
.kt-yuzey-yazi { display: flex; flex-direction: column; min-width: 0; }
.kt-yuzey-yazi input { background: transparent; border: 0; color: var(--yazi); font: inherit; font-size: 13px; font-weight: 700; padding: 0; outline: none; min-width: 0; }
.kt-yuzey-yazi small { font-size: 11px; color: var(--yazi-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-yuzey-sil { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--yazi-3); cursor: pointer; }
.kt-yuzey-sil:hover { background: rgba(248, 113, 113, .15); color: var(--kirmizi); }
.kt-yuzey-bos { font-size: 12px; color: var(--yazi-3); line-height: 1.5; padding: 10px; border: 1.5px dashed var(--cizgi); border-radius: 10px; }
.kt-mini-ara { height: 36px; }
.kt-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kt-mini-oge { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--yazi-2); font: inherit; min-width: 0; }
.kt-mini-oge span { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; display: block; }
.kt-mini-oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-mini-oge small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-mini-oge:hover span { border-color: var(--turuncu-cizgi); }
.kt-mini-oge.secili span { border-color: var(--turuncu); }

@media (max-width: 860px) {
  .kt-arka { padding: 0; }
  .kt-pencere { border-radius: 0; height: 100%; }
  .kt-bas { gap: 10px; padding: 10px 12px; }
  .kt-baslik { display: none; }
  .kt-icerik { grid-template-columns: 1fr; }
  .kt-seri { flex-basis: 120px; }
  .kt-izgara { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .kt-detay { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70%; z-index: 2; padding: 16px; display: none;
    background: var(--yuzey); border-top: 1px solid var(--cizgi-koyu); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
  .kt-detay.acik { display: flex; }
  .kt-detay-gorsel { aspect-ratio: auto; height: 26vh; }
  .kt-detay-kapat { display: block; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
    border: 0; background: rgba(0, 0, 0, .4); color: #fff; cursor: pointer; }
  .kt-oda { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .kt-oda-yan { border-left: 0; border-top: 1px solid var(--cizgi); max-height: 44vh; }
  .kt-mini { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kt-ipucu-serit { white-space: normal; width: 90%; text-align: center; border-radius: 12px; }
}

/* Üretim raporu: istasyon başına tezgah kırılımı */
.tezgah-hucre { display: flex; flex-direction: column; gap: 3px; }
.tezgah-satir { display: flex; gap: 8px; justify-content: space-between; font-size: 12px; color: var(--yazi-3); }
.tezgah-satir b { color: var(--yazi); font-weight: 600; }
.tezgah-satir.solgun b { color: var(--yazi-3); font-weight: 400; }

/* Basit görünüm: bant kalınlığı ve kanal kenarı seçimi */
.ob-kalinlik { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--yazi-3); }
.ob-kalinlik[hidden] { display: none; }
.ob-kalinlik button {
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); color: var(--yazi-2); cursor: pointer;
  border-radius: 999px; padding: 5px 11px; font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.ob-kalinlik button:hover { color: var(--yazi); border-color: var(--turuncu-cizgi); }
.ob-kalinlik button.secili { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.ob-kanal-kenar button.secili { background: var(--mavi); border-color: var(--mavi); color: #0f1115; }

/* Izgara: kanal kenarı hücresi */
.oi .oi-kenar { text-align: center; letter-spacing: .5px; }
.oi .oi-kenar.acik { color: var(--mavi); background: rgba(96, 165, 250, .12); }

/* ══════════════ KESİM PLANI ══════════════ */
.kp-alan { display: flex; flex-direction: column; gap: 14px; margin: 12px 0; }
.kp-grup { border: 1px solid var(--cizgi); border-radius: var(--r-m); padding: 10px 12px; background: var(--yuzey); }
.kp-bas { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.kp-bas > b { font-size: 14px; }
.kp-rakam { font-size: 11.5px; color: var(--yazi-3); }
.kp-rakam b { font-size: 14px; color: var(--yazi); font-variant-numeric: tabular-nums; margin-right: 3px; }
.kp-rakam.verim b { color: var(--yesil); }
.kp-rakam.fire b { color: var(--sari); }
.kp-rakam.artik b { color: var(--mavi); }
.kp-plaka-bas { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--yazi-3); }
.kp-plaka-bas b { color: var(--yesil); }
.kp-artik-yazi { font-size: 10.5px; color: var(--mavi); }
.kp-yazi { font: 600 7px system-ui, sans-serif; fill: rgba(255,255,255,.92); text-anchor: middle; pointer-events: none; }
.kp-yazi.ad { font-size: 7.5px; }
.kp-yazi.artik { fill: #93c5fd; font-style: italic; }
.kp-p:hover rect { fill-opacity: .6 !important; }
.kp-plakalar { display: flex; flex-wrap: wrap; gap: 10px; }
.kp-plaka-kutu { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--yazi-3); }
.kp-svg { display: block; border-radius: 4px; background: var(--zemin); }
.kp-plaka { fill: rgba(255,255,255,.04); stroke: var(--cizgi-koyu); stroke-width: 1; }
.kp-parca { fill: rgba(251,146,60,.35); stroke: #fb923c; stroke-width: .6; }
.kp-artik { fill: rgba(96,165,250,.14); stroke: rgba(96,165,250,.5); stroke-width: .6; stroke-dasharray: 4 3; }
.kp-uyari { margin-top: 6px; font-size: 12px; color: var(--sari); }

/* Dokunmatik ekranda hover yok: ikincil dugmeler hep gorunur kalsin */
@media (hover: none) {
  .ikinci-grup { opacity: 1; }
}

/* Küçük açılır menü: seyrek kullanılan düğmeleri sayfa başından toplar */
.mini-menu { position: relative; }
.mini-menu > summary { list-style: none; cursor: pointer; }
.mini-menu > summary::-webkit-details-marker { display: none; }
.mini-menu-liste {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 190px;
  display: flex; flex-direction: column; padding: 5px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-m); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.mini-menu-liste button {
  text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-k);
  background: none; color: var(--yazi-2); font-size: 12.5px; cursor: pointer;
}
.mini-menu-liste button:hover { background: var(--kabarik); color: var(--yazi); }

/* Telefonda düzenleme şeridi: özet tek satırda kaysın, şerit ekranı yemesin */
@media (max-width: 640px) {
  .duzen-bas { gap: 8px; padding: 10px 0; }
  .duzen-bas h1 { font-size: 16px; }
  .duzen-ozet { gap: 12px; font-size: 11px; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .duzen-ozet b { font-size: 12.5px; }
  .duzen-aksiyon { margin-left: 0; width: 100%; }
  .duzen-aksiyon .btn { flex: 1; }
}

/* Çipteki harf kısayolu: hücrede bu harfe basınca değer yazılır */
.op-harf {
  display: inline-block; min-width: 14px; margin-right: 5px; padding: 0 3px;
  border-radius: 3px; background: var(--turuncu); color: #fff;
  font-size: 10px; font-weight: 700; text-align: center; line-height: 14px;
}
.op-cip.aktif .op-harf { background: #fff; color: var(--turuncu); }

/* Makine parametre paneli (optimizasyon ekrani) */
.op-profil-sec { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.opp-satir.opp-ortak { box-shadow: inset 3px 0 0 var(--turuncu); padding-left: 8px; }
.op-param-baslik { font-size: 12px; font-weight: 700; color: var(--yazi); margin-bottom: 8px; }
.op-profil-sec button {
  padding: 6px 12px; border: 1px solid var(--cizgi); border-radius: var(--r-s);
  background: var(--kabarik); color: var(--yazi-2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.op-profil-sec button.aktif { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.op-param-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 14px;
}
.op-param-alan { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--yazi-2); }
.op-param-alan > span { flex: 1; }
.op-param-alan .girdi { width: 82px; text-align: right; }
.op-param-alan em { font-style: normal; font-size: 11px; color: var(--yazi-3); min-width: 34px; }
.op-param-tik { font-size: 12px; }
.op-param-alt {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 0 12px; border-top: 1px solid var(--cizgi);
}
/* Paket kesim rozeti */
.kp-rakam.paket b { color: var(--mavi); }

/* ── Üç adımlı iş emri akışı (müşteri paneli) ── */
.sh-serit { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-nokta {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px;
  border: 1px solid var(--cizgi); background: var(--kabarik); color: var(--yazi-3);
}
.sh-nokta.aktif { border-color: var(--turuncu); background: var(--turuncu-soft); color: var(--turuncu-ac); }
.sh-nokta.tamam { border-color: var(--yesil); color: var(--yesil); }
.sh-adim { display: none; flex-direction: column; gap: 22px; }
.sh-adim.aktif { display: flex; }

/* Malzeme adımı: çoklu seçim rozetleri */
.mz-blok { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--cizgi); }
.mz-blok:first-of-type { border-top: 0; }
.mz-secim { display: flex; gap: 6px; flex-wrap: wrap; }
.mz-secim button {
  padding: 7px 13px; border: 1px solid var(--cizgi); border-radius: var(--r-s);
  background: var(--kabarik); color: var(--yazi-2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.mz-secim button.aktif { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }

/* Ölçü ekranının üstündeki malzeme hatırlatması */
.op-ozet-serit { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.op-ozet-blok { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-cip.kucuk-cip { padding: 3px 8px; font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   v3.1.12 — tema düğmesi, malzeme adımı, operasyon tablosu
   ══════════════════════════════════════════════════════════ */

/* Tema düğmesi (☾ / ☀) */
.tema-btn { width: 32px; justify-content: center; padding: 5px 0; font-size: 14px; line-height: 1; }

/* Katalog öneri listesi her iki temada okunur olsun (eskiden sabit koyu zemin) */
.rk-liste { background: var(--yuzey); }
[data-tema="acik"] .rk-liste { box-shadow: 0 14px 40px rgba(15, 17, 21, .18); }
[data-tema="acik"] .rk-kutu { border-color: rgba(15, 17, 21, .15); }

/* ── Malzeme adımı ── */
.zorunlu { color: var(--turuncu-ac); font-weight: 700; }
.mz-ekle-satir { gap: 8px; flex-wrap: wrap; align-items: center; }
.mz-ekle-satir > .girdi { width: 320px; max-width: 100%; }
.mz-mm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--yazi-3); }
.mz-mm .girdi { width: 58px; text-align: right; padding: 6px 8px; }
.mz-kalinlik { gap: 5px; }
.mz-kalinlik button { min-width: 40px; padding: 6px 0; text-align: center; font-variant-numeric: tabular-nums; }
.mz-kalinlik button.yaygin:not(.aktif) { border-color: var(--turuncu-cizgi); color: var(--yazi); }
.mz-plaka { gap: 8px; }
.mz-plaka button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 14px; min-width: 128px; }
.mz-plaka button b { font-size: 14px; }
.mz-plaka button small { font-size: 11px; font-weight: 500; opacity: .75; }
.mz-ozel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--yazi-2); }
.mz-ozel label { display: inline-flex; align-items: center; gap: 6px; }
.mz-ozel .girdi { width: 90px; text-align: right; }
.mz-ozel[hidden] { display: none; }
.mz-hata { display: none; margin-top: 4px; padding: 9px 12px; border-radius: var(--r-s); font-size: 12.5px; font-weight: 600;
  color: var(--kirmizi); background: rgba(248, 113, 113, .09); border: 1px solid rgba(248, 113, 113, .3); }
.mz-hata.acik { display: block; }
.kart-bas kbd, .mz-blok kbd { font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); }

/* Onay bekleyen talep: düzenle / sil */
.talep-bekliyor { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.talep-islem { display: inline-flex; gap: 6px; }

/* ── Anahtar (switch) + soru işareti ── */
.anahtar-kutu { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font-size: 12.5px; font-weight: 600; color: var(--yazi-2); padding: 4px 4px 4px 2px; }
.anahtar-kutu input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.anahtar-ray { position: relative; width: 36px; height: 20px; border-radius: 20px; background: var(--cizgi-koyu);
  transition: background .2s; flex: 0 0 auto; }
.anahtar-top { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.anahtar-kutu input:checked + .anahtar-ray { background: var(--turuncu); }
.anahtar-kutu input:checked + .anahtar-ray .anahtar-top { transform: translateX(16px); }
.anahtar-kutu input:focus-visible + .anahtar-ray { outline: 2px solid var(--turuncu-ac); outline-offset: 2px; }
.anahtar-kutu input:checked ~ .anahtar-ad { color: var(--yazi); }
.soru-isaret { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; border: 1px solid var(--cizgi-koyu); font-size: 11px; font-weight: 700; color: var(--yazi-3); cursor: help; }
.soru-isaret:hover, .soru-isaret:focus { color: var(--turuncu-ac); border-color: var(--turuncu-cizgi); outline: none; }
.soru-balon { position: absolute; top: calc(100% + 8px); right: -10px; z-index: 60; width: 300px; padding: 11px 13px;
  border-radius: var(--r-m); background: var(--yuzey); border: 1px solid var(--cizgi-koyu); color: var(--yazi-2);
  font-size: 12px; font-weight: 500; line-height: 1.55; text-align: left; white-space: normal;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.soru-balon b { color: var(--yazi); }
.soru-balon kbd { font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 0 4px; border-radius: 3px;
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); }
.soru-isaret:hover .soru-balon, .soru-isaret:focus .soru-balon { opacity: 1; visibility: visible; transform: none; }
/* Kısayol listesi için geniş balon: satırlar alt alta, tuşlar hizalı */
.soru-balon.genis { width: 390px; }
.sb-liste { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--cizgi); }
.sb-liste > span { display: block; font-size: 11.5px; color: var(--yazi-2); }

/* ── Basit görünüm: solda seçilenler listesi ── */
.sh-basit-duzen { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.sh-secim-liste { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); }
.sl-ust { font-size: 13px; font-weight: 700; }
.sl-blok { display: flex; flex-direction: column; gap: 4px; }
.sl-baslik { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--yazi-3); }
.sl-bilgi { font-size: 12.5px; font-weight: 600; }
.sl-oge { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--r-s);
  border: 1px solid transparent; background: none; color: var(--yazi-2); font-size: 12.5px; font-weight: 600;
  font-family: inherit; text-align: left; cursor: pointer; }
.sl-oge span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-oge:hover { background: var(--hover); color: var(--yazi); }
.sl-oge.aktif { border-color: var(--turuncu-cizgi); background: var(--turuncu-soft); color: var(--yazi); }
.sl-oge kbd { font-family: inherit; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--turuncu); color: #fff; }
.sl-kutu { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; border: 1px solid var(--cizgi-koyu); }
.sl-ipucu { font-size: 11px; color: var(--yazi-3); line-height: 1.5; }
@media (max-width: 900px) {
  .sh-basit-duzen { grid-template-columns: 1fr; }
  .sh-secim-liste { position: static; flex-direction: row; flex-wrap: wrap; }
  .sl-blok { min-width: 140px; }
}

/* Basit görünümde renk / ürün sorusunun altındaki seçenekler */
.ob-secenekler { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.ob-secenekler[hidden] { display: none; }
.ob-secenek { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 20px;
  border: 1px solid var(--cizgi-koyu); background: var(--kabarik); color: var(--yazi-2);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.ob-secenek:hover { color: var(--yazi); border-color: var(--turuncu-cizgi); }
.ob-secenek.secili { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.ob .ob-secenek kbd { background: rgba(0, 0, 0, .18); border-color: transparent; color: inherit; }
.ob-ek-alanlar .ob-secenekler { grid-column: 1 / -1; justify-content: flex-start; margin-top: 0; }

/* Basit çizim: daha ince, derli toplu kenar ve kanal çizgileri */
.ob-kenar.acik { filter: none; }
.ob-kanal { stroke-width: 1.4; stroke-dasharray: 5 3; filter: none; }

/* Basit çizim açık temada (beyaz zemin) okunsun */
[data-tema="acik"] .ob-parca.bos { fill: rgba(15, 17, 21, .02); }
[data-tema="acik"] .ob-golge { fill: rgba(15, 17, 21, .14); }
[data-tema="acik"] .ob-uzanti { stroke: rgba(15, 17, 21, .25); }
[data-tema="acik"] .ob-olcu { stroke: rgba(15, 17, 21, .55); }
[data-tema="acik"] .ob-ok { fill: rgba(15, 17, 21, .65); }
[data-tema="acik"] .ob-etiket-zemin { fill: #ffffff; stroke: rgba(15, 17, 21, .16); }
[data-tema="acik"] .ob-etiket-zemin.kanal { fill: #eff6ff; stroke: rgba(37, 99, 235, .4); }
[data-tema="acik"] .ob-etiket-zemin.adet { fill: #fff7ed; }
[data-tema="acik"] .ob-yazi.bant { fill: #c2410c; }
[data-tema="acik"] .ob-yazi.adet { fill: #c2410c; }
[data-tema="acik"] .ob-yazi.kanal { fill: #1d4ed8; }
[data-tema="acik"] .ob-kanal { stroke: #2563eb; }
[data-tema="acik"] .ob-kenar.acik { stroke: #ea580c; }
[data-tema="acik"] .ob kbd { background: rgba(15, 17, 21, .06); border-color: rgba(15, 17, 21, .16); }

/* ══════════ OPERASYON / ÜRÜN TABLOSU (GibLab üst bölümü) ══════════ */
.opn { background: var(--yuzey); border-radius: 0 0 var(--r-l) var(--r-l); overflow: hidden; }
.opn-ust { display: flex; align-items: center; gap: 12px; padding: 6px 10px 0; border-bottom: 1px solid var(--cizgi);
  background: var(--kabarik); flex-wrap: wrap; }
.opn-bosluk { flex: 1; min-width: 20px; }
.opn-sekmeler { display: flex; gap: 2px; }
.opn-sekmeler button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid transparent;
  border-bottom: 0; border-radius: var(--r-s) var(--r-s) 0 0; background: none; color: var(--yazi-3);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; margin-bottom: -1px; }
.opn-sekmeler button span { font-size: 10.5px; padding: 0 6px; border-radius: 10px; background: var(--hover); }
.opn-sekmeler button.secili { background: var(--yuzey); border-color: var(--cizgi); color: var(--yazi); }
.opn-ipucu { flex: 1; font-size: 11px; color: var(--yazi-3); min-width: 200px; }
.opn-ipucu kbd, .opn-tablo kbd, .opn-bos kbd { font-family: inherit; font-size: 10px; font-weight: 700; padding: 1px 5px;
  border-radius: 4px; border: 1px solid var(--cizgi-koyu); background: var(--yuzey); }
.opn-ekle-kap { position: relative; padding-bottom: 6px; }
.opn-menu { position: absolute; right: 0; top: calc(100% - 2px); z-index: 70; width: 330px; max-height: 420px; overflow: auto;
  padding: 6px; border-radius: var(--r-m); background: var(--yuzey); border: 1px solid var(--cizgi-koyu);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28); }
.opn-menu[hidden] { display: none; }
.opn-menu-oge { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--r-s); background: none; color: var(--yazi); text-align: left;
  font-family: inherit; cursor: pointer; }
.opn-menu-oge:hover { background: var(--hover); }
.opn-menu-oge b { display: block; font-size: 12.5px; }
.opn-menu-oge small { display: block; font-size: 11px; color: var(--yazi-3); line-height: 1.35; }
.opn-menu-oge em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--yazi-3); }
.opn-menu-oge.ana b { color: var(--turuncu-ac); }
.opn-menu-ayrac { margin: 6px 9px 2px; padding-top: 6px; border-top: 1px solid var(--cizgi); font-size: 10.5px;
  font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--yazi-3); }
.opn-simge { display: inline-flex; width: 18px; height: 18px; color: var(--turuncu-ac); flex: 0 0 auto; }
.opn-simge svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.opn-simge svg .kalin { stroke-width: 3; }
.opn-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--cizgi);
  background: var(--turuncu-soft); }
.opn-form-tip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.opn-form > .girdi { width: 300px; max-width: 100%; height: 32px; padding: 4px 9px; font-size: 13px; }
.opn-mm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--yazi-3); }
.opn-mm .girdi { width: 54px; height: 32px; padding: 4px 6px; text-align: right; }
.opn-tablo-kap { max-height: 190px; overflow: auto; border-radius: 0 0 var(--r-m) var(--r-m); }
.opn-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.opn-tablo th { position: sticky; top: 0; z-index: 1; background: var(--yuzey); text-align: left; padding: 6px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--yazi-2);
  border-bottom: 1px solid var(--cizgi-koyu); }
.opn-tablo td { padding: 5px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.opn-tablo tbody tr { cursor: pointer; }
.opn-tablo tbody tr:hover td { background: var(--hover); }
.opn-tablo tbody tr.aktif td { background: rgba(96, 165, 250, .14); }
[data-tema="acik"] .opn-tablo tbody tr.aktif td { background: #dbeafe; }
.opn-tablo tbody tr:last-child td { border-bottom: 0; }
.opn-no { width: 34px; color: var(--yazi-3); font-variant-numeric: tabular-nums; }
.opn-tip { white-space: nowrap; font-weight: 600; width: 1%; }
.opn-tip .opn-simge { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.opn-tip em { font-style: normal; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--yazi-3); }
.opn-harf { width: 1%; white-space: nowrap; }
.opn-harf kbd { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.opn-ad { font-weight: 700; }
.opn-ayrinti { color: var(--yazi-2); font-size: 12px; }
.opn-kullanim { text-align: right; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.opn-islem { width: 1%; white-space: nowrap; text-align: right; }
.opn-btn { width: 24px; height: 24px; border-radius: 5px; border: 0; background: none; color: var(--yazi-3); cursor: pointer; font-size: 13px; }
.opn-btn:hover { background: var(--hover); color: var(--yazi); }
.opn-btn.sil:hover { background: rgba(248, 113, 113, .12); color: var(--kirmizi); }
.opn-bos { padding: 14px 12px !important; text-align: center; color: var(--yazi-3); font-size: 12.5px; cursor: default; line-height: 1.6; }

/* GibLab parametre penceresi (CS / EL) */
.modal.opp { width: 980px; }
.opp-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; max-height: 64vh; overflow: auto; padding-right: 4px; }
.opp-bolum { margin: 10px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--cizgi); font-size: 12px; font-weight: 700; color: var(--yazi); }
.opp-izgara > div > .opp-bolum:first-child { margin-top: 0; }
.opp-satir { display: grid; grid-template-columns: 1fr 130px 52px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--yazi-2); }
.opp-satir .girdi { height: 30px; padding: 3px 8px; font-size: 12.5px; text-align: right; }
.opp-satir select.girdi { text-align: left; }
.opp-satir em { font-style: normal; font-size: 11px; color: var(--yazi-3); }
.opp-satir.salt .girdi { background: var(--kabarik); color: var(--yazi-3); }
.opp-satir.opp-tik { display: flex; gap: 8px; }
@media (max-width: 900px) { .opp-izgara { grid-template-columns: 1fr; } }

/* Kartela: "Bunu ekle" sonrası liste */
.kt-eklenen { font-size: 12px; color: var(--yesil); line-height: 1.5; }

/* Basit çizim sahnesi açık temada: noktalı açık gri zemin */
[data-tema="acik"] .ob-sahne {
  background:
    radial-gradient(rgba(15, 17, 21, .07) 1px, transparent 1.2px) 0 0 / 14px 14px,
    radial-gradient(ellipse at 50% 35%, rgba(234, 88, 12, .06), transparent 65%),
    linear-gradient(180deg, #f8f9fb, #eef0f4);
}
[data-tema="acik"] .ob-kenar { stroke: #a08a6a; }

/* ══════════ ORTAK YENİ İŞ EMRİ EKRANI (müşteri + yönetim) ══════════ */
.sh-ekran { position: fixed; inset: 0; z-index: 150; overflow-y: auto; background: var(--zemin); }
.sh-ekran[hidden] { display: none; }
/* Yönetimde masaüstü uygulamanın pencere çubuğu (küçült / kapat) açık kalsın */
.sh-ekran.yonetim { top: var(--ust); }
body.sh-acik { overflow: hidden; }
.sh-ust { height: 60px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); display: flex; align-items: center;
  gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 50; }
.sh-ust-sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sh-govde { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; display: flex; flex-direction: column; gap: 18px; }
.sh-ekran .ozet-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
  background: var(--turuncu-soft); border: 1px solid var(--turuncu-cizgi); border-radius: var(--r-m); padding: 11px 14px; font-size: 12px; }
.sh-ekran .ozet-serit b { display: block; font-size: 16px; color: var(--yazi); margin-top: 2px; }
@media (max-width: 900px) {
  .sh-ust { height: auto; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .sh-ust-sag { width: 100%; justify-content: flex-end; }
  .sh-govde { padding: 14px 12px 40px; gap: 14px; }
}

/* ══════════ MÜŞTERİ TALEBİ UYARISI (yönetim) ══════════ */
.talep-bildirim-kap { position: fixed; right: 18px; bottom: 18px; z-index: 520; display: flex; flex-direction: column;
  gap: 10px; width: 340px; max-width: calc(100vw - 36px); }
.talep-bildirim { position: relative; display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-l);
  background: var(--yuzey); border: 1px solid var(--turuncu-cizgi); border-left: 4px solid var(--turuncu);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3); animation: tb-gir .3s ease-out; }
.talep-bildirim.yeni { animation: tb-gir .3s ease-out, tb-nabiz 1.4s ease-in-out .3s 4; }
.talep-bildirim.kapaniyor { opacity: 0; transform: translateX(30px); transition: opacity .2s, transform .2s; }
.tb-ikon { font-size: 22px; line-height: 1; }
.tb-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tb-baslik { font-size: 14px; font-weight: 700; color: var(--turuncu-ac); padding-right: 16px; }
.tb-satir { font-size: 12.5px; line-height: 1.45; }
.tb-dugmeler { display: flex; gap: 6px; margin-top: 8px; }
.tb-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 5px; background: none;
  color: var(--yazi-3); font-size: 17px; cursor: pointer; }
.tb-x:hover { background: var(--hover); color: var(--yazi); }
@keyframes tb-gir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tb-nabiz { 50% { box-shadow: 0 0 0 6px var(--turuncu-soft), 0 16px 40px rgba(0, 0, 0, .3); } }
/* Bildirim kartı varken kısa toast'lar sağ üste çıkar, üst üste binmesin */
.talep-uyari-var .toast-kap { bottom: auto; top: 64px; }

/* Onay bekleyen talep varken sekme ve menü yanıp söner */
@keyframes talep-yanip { 0%, 100% { background: transparent; color: inherit; } 50% { background: var(--turuncu); color: #fff; } }
.sekme.yanip-son { animation: talep-yanip 1.1s ease-in-out infinite; }
.talep-rozet { margin-left: auto; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: var(--turuncu); color: #fff; animation: talep-rozet 1.1s ease-in-out infinite; white-space: nowrap; }
.menu-oge .talep-rozet + .sayac, .menu-oge .sayac + .talep-rozet { margin-left: 6px; }
@keyframes talep-rozet { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .sekme.yanip-son { animation: none; background: var(--turuncu); color: #fff; }
  .talep-rozet, .talep-bildirim.yeni { animation: none; }
}

/* ── Excel / CSV sütun eşleme ekranı ── */
.ia-ust {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 0 12px; border-bottom: 1px solid var(--cizgi);
}
.ia-tablo-kap {
  overflow: auto; max-height: 48vh; margin-top: 12px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
}
.ia-tablo { border-collapse: collapse; width: 100%; font-size: 12px; }
.ia-tablo th {
  position: sticky; top: 0; z-index: 2; padding: 6px;
  background: var(--kabarik); border-bottom: 1px solid var(--cizgi-koyu);
}
.ia-tablo th .girdi { width: 100%; min-width: 128px; font-size: 11.5px; padding: 5px 6px; }
.ia-tablo td {
  padding: 5px 8px; border-bottom: 1px solid var(--cizgi);
  white-space: nowrap; color: var(--yazi-2);
}
/* Dosyanın kendi başlık satırı: veriden ayrılsın diye soluk ve italik */
.ia-tablo .ia-baslik-satiri td {
  background: var(--hover); color: var(--yazi-3); font-style: italic;
}
.ia-tablo tbody tr:last-child td { border-bottom: 0; }

/* ── Aktarım biçimi düzenleyici ── */
.ab-secenek {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 14px; padding: 10px 0 12px; border-bottom: 1px solid var(--cizgi);
}
.ab-sutunlar { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 10px; }
.ab-sutun { display: flex; align-items: center; gap: 6px; }
.ab-sutun .ab-no {
  width: 22px; text-align: center; font-size: 11px; color: var(--yazi-3);
  font-variant-numeric: tabular-nums;
}
.ab-sutun select { flex: 1 1 200px; min-width: 150px; }
.ab-sutun input[type="text"] { flex: 0 1 140px; }
.ab-sutun .ikon-btn { width: 26px; height: 26px; font-size: 13px; }
.ab-ornek { margin: 12px 0 0; font-size: 12px; color: var(--yazi-2); }
.ab-ornek pre {
  margin-top: 6px; padding: 10px 12px; overflow-x: auto;
  background: var(--kabarik); border: 1px solid var(--cizgi); border-radius: var(--r-m);
  font-family: Consolas, "Courier New", monospace; font-size: 11.5px; line-height: 1.7;
  color: var(--yazi); white-space: pre;
}

/* ══════════ İŞ EMRİ 3. ADIM: İKİ AYRI BÖLÜM ══════════
   Üstte ne kesileceğinin tanımı (malzeme / işlem / ürün), altta ölçüler.
   Sol kenardaki renk şeridi ve aradaki boşluk, hangi tabloya bakıldığını ayırır. */
.sh-bolum {
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-left: 3px solid var(--cizgi-koyu);
  border-radius: var(--r-l);
}
.sh-bolum-op { border-left-color: var(--turuncu); }
.sh-bolum-olcu { border-left-color: var(--mavi); }

.sh-bolum-bas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--cizgi-koyu);
}
.sh-bolum-bas h4 {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap;
}
.sh-bolum-op .sh-bolum-bas h4 { color: var(--turuncu-ac); }
.sh-bolum-olcu .sh-bolum-bas h4 { color: var(--mavi); }
.sh-bolum-alt { font-size: 12px; color: var(--yazi-2); }
.sh-bolum-arac { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Basit görünümün kendi yerleşimi bölümün içinde nefes alsın */
.sh-bolum .sh-basit-duzen { padding: 14px; }
.sh-bolum .oi-toplu, .sh-bolum .sh-toplu { margin: 0 14px 14px; }

@media (max-width: 760px) {
  .sh-bolum-bas { padding: 10px 12px; }
  .sh-bolum-arac { margin-left: 0; width: 100%; }
  .soru-balon.genis { width: min(390px, 78vw); }
}

/* Üçüncü bölüm: işlemler ve tutar */
.sh-bolum-ozet { border-left-color: var(--yesil); }
.sh-bolum-ozet .sh-bolum-bas h4 { color: var(--yesil); }
.sh-ozet-govde { display: flex; flex-direction: column; gap: 14px; padding: 14px; }

/* Bölümün içindeyken özet şeridi kendi çerçevesini bırakır: kutu içinde kutu olmasın */
.sh-ozet-govde .ozet-serit {
  background: none; border: 0; border-top: 1px solid var(--cizgi);
  border-radius: 0; padding: 14px 0 0; margin: 0;
}
.sh-ozet-govde .ie-uyari { margin-top: 0; }
.sh-ozet-govde .ie-dokum { color: var(--yazi-2); margin-top: 0; }

/* Sihirbazdan çıkış düğmesi: iki temada da seçilir dursun — kullanıcı
   buradan panele döner, yanlışlıkla başka yere gitmesin diye belirgin. */
.sh-geri {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px;
  background: var(--turuncu-soft);
  border: 1px solid var(--turuncu);
  color: var(--turuncu-ac);
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
}
.sh-geri svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.sh-geri:hover { background: var(--turuncu); color: #fff; border-color: var(--turuncu); }
/* Açık temada turuncu zemin soluk kaldığı için çerçeve ve yazı koyulaşır */
[data-tema="acik"] .sh-geri { background: #fff; color: #c2410c; border-color: #ea580c; }
[data-tema="acik"] .sh-geri:hover { background: #ea580c; color: #fff; }

/* Yönetimde adım çipleri tıklanabilir (müşteride düz etiket) */
.sh-nokta.secilebilir { cursor: pointer; font-family: inherit; }
.sh-nokta.secilebilir:hover { border-color: var(--turuncu); color: var(--turuncu-ac); }

/* 1. adımdaki Excel kutusu: ölçüler dosyadaysa en baştan yüklensin */
.sh-excel {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px;
  border: 1px dashed var(--cizgi-koyu); border-radius: var(--r-m);
  background: var(--kabarik);
}
.sh-excel > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; }
.sh-excel b { font-size: 13px; }
.sh-excel .btn { margin-left: auto; }

/* Atölye: işin künyesi — operatör ne yapacağını tek bakışta görsün */
.is-kunye {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--kabarik); border: 1px solid var(--cizgi-koyu);
  border-left: 3px solid var(--turuncu); border-radius: var(--r-m);
}
.is-kunye-oge { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-kunye-oge.genis { grid-column: 1 / -1; }
.is-kunye-oge span {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--yazi-3);
}
.is-kunye-oge b { font-size: 13px; color: var(--yazi); word-break: break-word; }

/* Geniş pencere: kesim planı, plaka çizimleri ve parametre panelleri sığsın */
.modal.tam {
  width: min(1400px, 96vw);
  max-height: 94vh;
}