:root {
  --ana: #1f4e8c; --ana-koyu: #163a69; --ana-acik: #e8eff9;
  --zemin: #eef1f5; --kart: #fff; --yazi: #1d2433; --soluk: #5b6577; --cizgi: #d5dbe5;
  --yesil: #1e7a46; --yesil-acik: #e4f4ea; --kirmizi: #b42318; --kirmizi-acik: #fdecea;
  --sari: #8a5a00; --sari-acik: #fff4d6;
  --golge: 0 1px 3px #0000001a, 0 4px 14px #0000000d;
  --yaricap: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Firma temaları: 300 fornax (fornax.com.tr), 305 İTO KİLİT (itokilit.com.tr). Seçili firma body[data-firma]'da. */
body[data-firma="300"] { --kapi-renk: #1b5aa6; --onizleme-zemin: #cfe2f5; --ana: #013b75; --ana-koyu: #012a55; --ana-acik: #e8f0f8; --vurgu: #1e73be; --bant: #f1f2f3; }
body[data-firma="305"] { --kapi-renk: #1f7a4d; --onizleme-zemin: #d2eadf; --ana: #004433; --ana-koyu: #002e22; --ana-acik: #e6f1ed; --vurgu: #e50020; --bant: #f2f4f3; }
body { margin: 0; font: 16px/1.45 Urbanist, "Work Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: var(--yazi); background: var(--zemin);
  --vurgu: #1e73be; --bant: #f1f2f3; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* üst çubuk: firmanın web sitesindeki gibi ince gri bant + beyaz ana çubuk */
#ust { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 1px 0 #e6e8ec, 0 4px 14px #0000000d; }
#ust .ic { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.ust-bant { background: var(--bant); font-size: 13px; color: #555; }
.ust-bant .ic { min-height: 40px; }
.bant-ad { font-weight: 700; letter-spacing: .3px; color: var(--ana); }
.firma-sec { display: flex; align-items: center; gap: 6px; }
.firma-sec select { font-size: 14px; background: #fff; color: var(--yazi); border: 1px solid #dcdfe4; border-radius: 35px; padding: 4px 30px 4px 12px; font-weight: 700; min-height: 32px; width: auto; }
#yonetim { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
#yonetim a { color: #444; text-decoration: none; padding: 5px 10px; border-radius: 35px; font-weight: 600; white-space: nowrap; }
#yonetim a:hover { background: #0000000d; color: var(--ana); }
#yonetim a.secili { background: var(--ana-acik); color: var(--ana); }
#yonetim:not(:empty) + #kullanici-dugme { margin-left: 4px; border-left: 1px solid #0000001f; border-radius: 0 35px 35px 0; }
#kullanici-dugme { margin-left: auto; background: transparent; color: #444; border: 0; min-height: 32px; padding: 4px 8px; font-size: 13px; font-weight: 600; border-radius: 35px; }
#kullanici-dugme:hover { background: #0000000d; }
.ust-ana .ic { min-height: 68px; flex-wrap: wrap; }
.firma-logo { display: flex; align-items: center; height: 68px; flex: none; }
.firma-logo img { max-height: 52px; max-width: 170px; }
#menu { display: flex; gap: 2px; flex: 1; justify-content: flex-end; align-items: center; overflow-x: auto; scrollbar-width: none; }
#menu a { color: #222; text-decoration: none; padding: 10px 14px; border-radius: 35px; white-space: nowrap; font-weight: 600; font-size: 15px; }
#menu a:hover { color: var(--ana); }
#menu a.secili { color: var(--ana); background: var(--ana-acik); }
#menu a.menu-dugme { background: var(--ana); color: #fff; margin-left: 6px; padding: 10px 20px; }
#menu a.menu-dugme:hover, #menu a.menu-dugme.secili { background: var(--ana-koyu); color: #fff; }
@media (max-width: 1000px) { #menu { flex-basis: 100%; justify-content: flex-start; padding-bottom: 8px; } .ust-ana .ic { min-height: 0; } }

main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 120px; }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.kart { background: var(--kart); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 16px; margin-bottom: 14px; }
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir.arala { justify-content: space-between; }
.izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.soluk { color: var(--soluk); font-size: 14px; }
.kucuk { font-size: 13px; }
.sag { text-align: right; }
.bos { text-align: center; color: var(--soluk); padding: 28px 10px; }

/* form */
label.alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); font-weight: 600; }
input, select, textarea { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; background: #fff; min-height: 44px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ana); outline-offset: -1px; border-color: var(--ana); }
input:disabled, select:disabled { background: #f3f5f8; color: var(--soluk); }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ana); }
.onay { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.onay span { padding-top: 1px; }

button { min-height: 44px; padding: 10px 20px; border-radius: 35px; border: 1px solid var(--ana); background: var(--ana); color: #fff;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--ana-koyu); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ikincil { background: #fff; color: var(--ana); }
button.ikincil:hover { background: var(--ana-acik); }
button.hayalet { background: transparent; border-color: transparent; color: var(--ana); }
button.tehlike { background: #fff; color: var(--kirmizi); border-color: var(--kirmizi); }
button.yesil { background: var(--yesil); border-color: var(--yesil); }
button.kucuk { min-height: 36px; padding: 6px 10px; font-size: 14px; }

/* rozetler */
.cari-tablo tbody tr { cursor: pointer; }
.cari-tablo tbody tr:hover { background: var(--ana-acik); }
.cari-tablo td.kod { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rozet.taslak { background: var(--sari-acik); color: var(--sari); }
.rozet.logoda { background: var(--yesil-acik); color: var(--yesil); }
.rozet.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.gri { background: #eceff3; color: var(--soluk); }
.uyari { background: var(--sari-acik); color: var(--sari); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.hata-kutu { background: var(--kirmizi-acik); color: var(--kirmizi); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; white-space: pre-wrap; }

/* liste */
.liste { display: flex; flex-direction: column; }
.liste-oge { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.liste-oge:last-child { border-bottom: 0; }
.liste-oge:hover { background: #f7f9fc; }
.liste-oge .ana { flex: 1; min-width: 0; }
.liste-oge .baslik { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
table.tablo { width: 100%; border-collapse: collapse; }
table.tablo th { text-align: left; font-size: 12px; color: var(--soluk); text-transform: uppercase; padding: 8px 6px; border-bottom: 2px solid var(--cizgi); }
table.tablo th.sag { text-align: right; }
table.tablo td { padding: 8px 6px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.kaydir { overflow-x: auto; }

/* teklif ekranı */
.musteri-kutu { border: 2px dashed var(--cizgi); border-radius: var(--yaricap); padding: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.musteri-kutu.secili { border-style: solid; border-color: var(--ana); background: var(--ana-acik); }
.sekme { display: inline-flex; border: 1px solid var(--ana); border-radius: 35px; overflow: hidden; }
.sekme button { border: 0; border-radius: 0; background: #fff; color: var(--ana); }
.sekme button.secili { background: var(--ana); color: #fff; }

.kalem { display: grid; grid-template-columns: 1fr 110px 130px 120px 130px 44px; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.kalem.baslik-satir { font-size: 12px; color: var(--soluk); text-transform: uppercase; font-weight: 700; padding-top: 0; }
.kalem .urun b { display: block; }
.kalem .varyant { display: inline-block; margin-top: 3px; background: var(--ana-acik); color: var(--ana); border-radius: 6px; padding: 1px 8px; font-size: 13px; font-weight: 600; }
.kalem input { text-align: right; }
.kalem .sil { background: transparent; border: 0; color: var(--kirmizi); font-size: 22px; padding: 0; min-height: 44px; }
.etiket-mobil { display: none; }

.toplamlar { margin-left: auto; min-width: 280px; }
.toplamlar div { display: flex; justify-content: space-between; padding: 4px 0; }
.toplamlar .genel { border-top: 2px solid var(--ana); margin-top: 6px; padding-top: 8px; font-size: 20px; font-weight: 800; color: var(--ana); }

.alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff; box-shadow: 0 -2px 12px #0000001f;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.alt-cubuk .ic { max-width: 1200px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.alt-cubuk .tutar { font-size: 20px; font-weight: 800; color: var(--ana); margin-right: auto; }

/* ürün seçici */
.urun-sonuc { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; max-height: 60vh; overflow-y: auto; }
.urun-kart { border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px; cursor: pointer; background: #fff; text-align: left; color: var(--yazi); font-weight: 400; white-space: normal; }
.urun-kart:hover { border-color: var(--ana); background: var(--ana-acik); }
.urun-kart .fiyat { font-weight: 700; color: var(--ana); }
.varyant-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* pencere */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 20px 60px #0005; }
dialog::backdrop { background: #0f172a80; }
#pencere-ic { padding: 18px; }
.pencere-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pencere-baslik h2 { margin: 0; }

/* giriş */
.giris { max-width: 400px; margin: 10vh auto; }
.giris h1 { text-align: center; color: var(--ana); }
.giris-logolar { display: flex; justify-content: center; align-items: center; gap: 28px; margin: 4px 0 18px; }
.giris-logolar img { max-height: 46px; max-width: 150px; }
.giris form { display: flex; flex-direction: column; gap: 12px; }

#bildirim { position: fixed; right: 16px; top: 120px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.tost { background: #1d2433; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--golge); max-width: 90vw; }
.tost.hata { background: var(--kirmizi); }
.tost.basari { background: var(--yesil); }

.yetki-grup h3 { font-size: 13px; text-transform: uppercase; color: var(--soluk); margin: 12px 0 2px; }
.sifre-kutu { font: 700 22px/1.3 ui-monospace, Consolas, monospace; background: var(--ana-acik); padding: 12px; border-radius: 8px; text-align: center; user-select: all; }

@media (max-width: 760px) {
  .kalem { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .kalem.baslik-satir { display: none; }
  .kalem .urun { grid-column: 1 / -1; }
  .kalem .sil { position: absolute; right: 0; }
  .kalem { position: relative; }
  .etiket-mobil { display: block; font-size: 12px; color: var(--soluk); }
  .toplamlar { min-width: 0; width: 100%; }
  .firma-sec { font-size: 0; }
  .bant-ad { display: none; }
}

/* ürün resimleri */
.urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.urun-izgara .urun-kart { display: flex; flex-direction: column; }
.urun-ust { display: flex; gap: 10px; align-items: flex-start; }
.urun-ust .resim-kutu { width: 72px; flex: none; }
.resim-kutu { aspect-ratio: 1; width: 100%; border-radius: 8px; background: #f3f5f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.resim-kutu img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.resim-kutu span { font-size: 11px; color: var(--soluk); }
.galeri-buyuk { background: #f3f5f8; border-radius: 10px; display: flex; justify-content: center; align-items: center; min-height: 200px; max-height: 50vh; overflow: hidden; }
.galeri-buyuk img { max-width: 100%; max-height: 50vh; object-fit: contain; cursor: zoom-in; background: #fff; }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.galeri-oge { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; }
.galeri-oge.secili { border-color: var(--ana); }
.galeri-oge img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.galeri-oge .rozet { position: absolute; top: 4px; left: 4px; font-size: 10px; }
.galeri-arac { display: flex; gap: 4px; margin-top: 4px; }
.galeri-arac button { flex: 1; min-height: 30px; padding: 2px 4px; font-size: 12px; }
.dugme-etiket { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 35px; background: var(--ana); color: #fff; font-weight: 600; cursor: pointer; }
.dugme-etiket.ikincil { background: #fff; color: var(--ana); border: 1px solid var(--ana); }

/* 3D model */
.resim-kutu { position: relative; }
.rozet.uc-d { position: absolute; top: 6px; right: 6px; background: var(--ana); color: #fff; font-size: 11px; }
.galeri-oge .rozet.uc-d { top: 4px; right: 4px; left: auto; }
.galeri-oge .rozet.alt { top: auto; bottom: 38px; }
.model-simge { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--ana-acik); color: var(--ana); font-weight: 800; font-size: 22px; border-radius: 6px; }
.galeri-buyuk.model-kap { height: min(56vh, 520px); max-height: none; position: relative; touch-action: none; }
.galeri-buyuk.model-kap canvas { width: 100% !important; height: 100% !important; display: block; border-radius: 10px; cursor: grab; }
.galeri-buyuk.model-kap:fullscreen { border-radius: 0; height: 100vh; }
.galeri-buyuk[data-durum]::after { content: attr(data-durum); position: absolute; inset: auto 0 12px; text-align: center; color: var(--soluk); font-size: 14px; }
.galeri-ad { font-size: 11px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* varyant renkleri */
.renk-cubugu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; }
.renk-cip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px; font-size: 14px;
  background: #fff; color: var(--yazi); border: 1px solid var(--cizgi); }
.renk-cip:hover { background: var(--ana-acik); }
.renk-cip.secili { border: 2px solid var(--ana); background: var(--ana-acik); color: var(--ana); }
.renk-nokta { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #0003; vertical-align: -4px; margin-right: 4px; flex: none; }
.renk-cip .renk-nokta { margin-right: 0; width: 24px; height: 24px; }
.renk-nokta.orijinal { background: conic-gradient(#c9ccd1, #8a8f99, #e6e8eb, #c9ccd1); }
.renk-duzen-satir { padding: 6px 0; border-bottom: 1px solid #edf0f4; }

/* set seçici */
dialog.genis { width: min(1100px, calc(100vw - 24px)); }
tr.sorunlu td { background: var(--kirmizi-acik) !important; }
pre.rapor { white-space: pre-wrap; background: #f6f7f9; border-radius: 8px; padding: 10px 12px; font: 13px/1.5 ui-monospace, Consolas, monospace; max-height: 320px; overflow: auto; }
.varyant { display: inline-block; margin-top: 3px; background: var(--ana-acik); color: var(--ana); border-radius: 6px; padding: 1px 8px; font-weight: 600; }

.set-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; align-items: start; }
.set-onizleme { position: sticky; top: 130px; }
.pencere-3d { height: 440px; border-radius: 10px; overflow: hidden; background: #eef1f5; touch-action: none; }
.pencere-3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 900px) { .set-izgara { grid-template-columns: 1fr; } .set-onizleme { position: static; order: -1; } .pencere-3d { height: 300px; } }

.secici-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.secici-kart { display: flex; flex-direction: column; gap: 4px; }
.olcu-dal { border-top: 1px solid #edf0f4; padding-top: 8px; margin-top: 8px; }
.olcu-dal code { background: #f3f5f8; padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.kucuk-tablo td, .kucuk-tablo th { padding: 4px; font-size: 13px; }
/* Donanım Sihirbazı > Setler tablosu: kutu içinde iki yönlü kaydırma, sabit başlık ve sol sütunlar, sürüklenen sütun genişliği */
.set-kaydir { overflow: auto; max-height: 70vh; border: 1px solid var(--cizgi); border-radius: 8px; }
.set-tablo { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.set-tablo th { position: sticky; top: 0; z-index: 2; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tablo td { background: #fff; overflow: hidden; }
.set-tablo input, .set-tablo select { width: 100%; min-width: 0; }
.set-tablo select { min-height: 32px; padding: 4px 6px; font-size: 13px; }
.set-tablo td.logo-ad { font-size: 13px; line-height: 1.3; white-space: normal; background: #f6f9fc; }
.set-tablo .sabit-kolon { position: sticky; z-index: 1; }
.set-tablo th.sabit-kolon { z-index: 3; }
.set-tablo .suz-satir th { padding: 4px 6px; background: #f6f9fc; }
.set-tablo .suz-satir input { min-height: 28px; padding: 3px 8px; font-size: 12px; font-weight: 400; }
.set-tablo .sabit-son { box-shadow: 4px 0 6px -4px #0003; }
.kolon-tut { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; }
.kolon-tut::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; border-right: 2px solid var(--cizgi); }
.kolon-tut:hover::after, .kolon-tut.surukle::after { border-color: var(--ana); }
.kucuk-tablo input { min-height: 32px; padding: 4px 6px; font-size: 13px; min-width: 80px; }
.formul { color: var(--soluk); font-size: 12px; cursor: help; white-space: nowrap; }

/* SAHA / Donanım Sihirbazı */
.marka-buyuk { font-size: 44px !important; letter-spacing: 6px; font-weight: 800; margin-bottom: 4px !important; }
.bant-ad { letter-spacing: 2px; }
.sihirbaz-baslik h1 { margin-bottom: 2px; }
.sihirbaz-baslik p { margin: 0 0 16px; }
.sihirbaz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sihirbaz-kart { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; background: #fff; color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); font-weight: 400; white-space: normal; transition: transform .15s, box-shadow .15s; }
.sihirbaz-kart:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 6px 24px #0000001f; border-color: var(--ana); }
.sihirbaz-gorsel { height: 290px; background: var(--onizleme-zemin, #eef1f5); position: relative; }
.sihirbaz-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kart-3d { position: absolute; inset: 0; pointer-events: none; }
.kart-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.kart-simge { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 64px; color: var(--ana); opacity: .4; }
.sihirbaz-alt { padding: 12px 14px 14px; border-top: 3px solid var(--ana); }
.sihirbaz-alt b { font-size: 18px; }

/* Ana Sayfa */
.ana-baslik h1 { margin-bottom: 2px; }
.ana-baslik p { margin: 0 0 18px; }
.ana-setler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ana-set { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cizgi, #dde2e8); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--yazi); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ana-set:hover { transform: translateY(-3px); box-shadow: 0 6px 20px #0000001a; border-color: var(--ana); }
.ana-set-gorsel { display: block; height: 190px; position: relative; background: var(--onizleme-zemin, #eef1f5); }
.ana-set-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ana-set b { padding: 10px 12px; border-top: 3px solid var(--ana); font-size: 15px; line-height: 1.25; }
.ana-moduller { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ana-modul { display: flex; gap: 14px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--cizgi, #dde2e8); border-radius: 14px;
  text-decoration: none; color: var(--yazi); min-height: 76px; transition: border-color .15s, box-shadow .15s; }
.ana-modul:hover { border-color: var(--ana); box-shadow: 0 4px 16px #00000014; }
.ana-modul b { display: block; font-size: 17px; margin-bottom: 2px; }
.ana-simge { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ana-acik); color: var(--ana); }
.ana-simge svg { width: 26px; height: 26px; }
.ana-modul.vurgu { background: var(--ana); border-color: var(--ana); color: #fff; }
.ana-modul.vurgu .soluk { color: #ffffffcc; }
.ana-modul.vurgu .ana-simge { background: #ffffff26; color: #fff; }
@media (max-width: 520px) { .ana-setler { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ana-set-gorsel { height: 150px; } }
/* Telefonda yönetim bağlantıları üst bantta ikinci satıra iner */
@media (max-width: 760px) {
  .ust-bant .ic { flex-wrap: wrap; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
  #yonetim { order: 3; flex-basis: 100%; margin-left: -10px; }
  #yonetim:not(:empty) + #kullanici-dugme { margin-left: auto; border-left: 0; border-radius: 35px; }
}

/* Ana Sayfa istatistikleri, teklif listeleri ve ziyaretler (CRM) */
.ana-istatistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ana-sayi { background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--ana); border-radius: 12px; padding: 12px 14px; }
.ana-sayi.sari { border-left-color: var(--sari); }
.ana-sayi.yesil { border-left-color: var(--yesil); }
.ana-sayi-deger { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 2px 0; }
.ana-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ana-iki .kart { min-width: 0; }
@media (max-width: 800px) { .ana-iki { grid-template-columns: 1fr; gap: 0; } }
.ana-alt-baslik { font-size: 15px; margin: 16px 0 4px; color: var(--soluk); }
.hizli-onay { justify-content: flex-end; gap: 6px; margin-top: 4px; flex-wrap: nowrap; }
.hizli-onay button { min-height: 32px; padding: 4px 10px; }
.ziyaret { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.ziyaret:last-child { border-bottom: 0; }
.ziyaret:hover { background: #f7f9fc; }
.ziyaret .ana { flex: 1; min-width: 0; }
.ziyaret .baslik { font-weight: 600; }
.ziyaret-saat { flex: none; width: 50px; font-weight: 800; color: var(--ana); font-size: 17px; }
.ziyaret-not { font-size: 14px; margin-top: 4px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ziyaret-teklif, .ziyaret-teklifler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.teklif-cip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px 4px 3px 10px;
  font-size: 13px; color: var(--yazi); text-decoration: none; background: #fff; }
.teklif-cip:hover { border-color: var(--ana); }
.onay-kutu { border-left: 4px solid var(--ana); }
.ana-setler > .bos { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .ana-istatistik { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ana-sayi { padding: 10px; }
  .ana-sayi-deger { font-size: 22px; }
  .ana-sayi:last-child { grid-column: 1 / -1; }
  .teklif-cip { width: 100%; justify-content: space-between; flex-wrap: wrap; border-radius: 10px; }
  .ziyaret-saat { width: 42px; font-size: 15px; }
}

/* Excel'i henüz yüklenmemiş sistem kartları */
.sihirbaz-kart.bekliyor .sihirbaz-alt, .ana-set.bekliyor b { opacity: .75; }
.ana-set { position: relative; }
.bekliyor-rozet { position: absolute; top: 8px; left: 8px; }

/* Ziyaret konumu, ekler, seyahat raporu */
.konum-kutu { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--yazi); font-weight: 400; }
.dosya-dugme { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--ana);
  border-radius: 35px; color: var(--ana); background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.dosya-dugme:hover { background: var(--ana-acik); }
a.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 35px;
  background: var(--ana); color: #fff; text-decoration: none; font-weight: 600; border: 1px solid var(--ana); }
a.dugme.ikincil { background: #fff; color: var(--ana); }
a.dugme.kucuk { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.ek-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.ek { position: relative; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; background: #f7f9fc; min-height: 90px; }
.ek img, .ek video { width: 100%; height: 100px; object-fit: cover; display: block; background: #000; }
.ek-dosya { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100px; padding: 6px;
  font-size: 26px; text-decoration: none; color: var(--yazi); text-align: center; }
.ek-dosya span, .ek-dosya small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.ek.bekliyor { border-style: dashed; }
.ek-sil { position: absolute; top: 4px; right: 4px; min-height: 26px; width: 26px; padding: 0; border-radius: 50%; background: #000a; color: #fff; border: 0; font-size: 13px; }
.ziyaret-ek { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.ziyaret-ek img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.gider-dagilim { display: grid; gap: 6px; margin: 10px 0 6px; }
.gider-cubuk { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.gider-cubuk div { background: #eef1f5; border-radius: 6px; height: 12px; overflow: hidden; }
.gider-cubuk i { display: block; height: 100%; background: var(--sari); border-radius: 6px; }
@media print {
  #ust, .alt-cubuk, .yazdirma, #bildirim { display: none !important; }
  body { background: #fff; }
  .kart, .ana-sayi { box-shadow: none; break-inside: avoid; }
}
div.alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); font-weight: 600; }

/* Teklif revizyonları */
.rev-rozet { vertical-align: middle; font-size: 13px; }
.rev-guncel td { background: var(--ana-acik); }
.tablo-kaydir { overflow-x: auto; margin-top: 10px; }
.rev-tablo td { vertical-align: top; }
.rev-cikarildi td { color: var(--soluk); }
.rev-cikarildi td b { text-decoration: line-through; }
.rev-eklendi td { background: var(--yesil-acik); }
.rev-degisen { background: var(--sari-acik); }
.rev-degisen s, .rev-tablo s { color: var(--soluk); }
.rev-artti, .rev-azaldi { font-weight: 700; }
.rev-genel td { font-weight: 700; }

/* Teklif satırında ürün resmi */
.urun-resimli { display: flex; gap: 12px; align-items: center; }
.kalem-resim { flex: none; width: 64px; height: 64px; min-height: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: 10px;
  background: #fff; overflow: hidden; display: grid; place-items: center; cursor: pointer; }
.kalem-resim:hover { border-color: var(--ana); background: #fff; }
.kalem-resim img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kalem-resim .resim-yok { color: #c3cad3; display: grid; place-items: center; }
.kalem-resim .resim-yok svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .kalem-resim { width: 52px; height: 52px; } }

/* Modül alt menüsü */
.ust-alt { background: var(--ana-acik); border-top: 1px solid #0000000f; }
.ust-alt .ic { min-height: 44px; }
#altmenu { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
#altmenu .altmenu-baslik { font-weight: 800; color: var(--ana); margin-right: 10px; white-space: nowrap; font-size: 14px; }
#altmenu a { color: #333; text-decoration: none; padding: 7px 12px; border-radius: 35px; font-weight: 600; font-size: 14px; white-space: nowrap; }
#altmenu a:hover { color: var(--ana); }
#altmenu a.secili { background: #fff; color: var(--ana); box-shadow: 0 1px 4px #0000001a; }

/* Proje takibi */
.proje-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.proje-kart { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--yazi); transition: border-color .15s, box-shadow .15s; }
.proje-kart:hover { border-color: var(--ana); box-shadow: 0 4px 16px #00000014; }
.proje-ad { font-size: 17px; line-height: 1.3; }
.ilerleme { display: inline-block; width: 110px; height: 8px; border-radius: 6px; background: #e6eaf0; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ilerleme i { display: block; height: 100%; background: var(--ana); border-radius: 6px; }
.ilerleme.gecikmis i { background: var(--kirmizi); }
.kirmizi-yazi { color: var(--kirmizi); }
tr.tik { cursor: pointer; }
tr.tik:hover td { background: #f7f9fc; }
.tl-sonuc { max-height: 220px; overflow-y: auto; margin: 6px 0 10px; }
.is-dugmeler { gap: 6px; flex-wrap: nowrap; }
details.is-yuku { border-bottom: 1px solid #edf0f4; padding: 10px 2px; }
details.is-yuku summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gantt-araclar { margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.gantt-kap { display: flex; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; overflow: hidden; }
.gantt-sol { flex: none; border-right: 1px solid #d5dbe3; box-shadow: 2px 0 4px rgba(0, 0, 0, .04); position: relative; z-index: 1; }
.gantt-kaydir { flex: 1; min-width: 0; overflow-x: auto; }
.gantt { display: block; font-family: inherit; }
.gantt .g-ince-cizgi { stroke: #e8ecf1; }
.gantt .g-ac { cursor: pointer; }
.gantt .g-ac rect { fill: #eef2f6; stroke: #d5dbe3; }
.gantt .g-ac:hover rect { fill: #dfe6ee; }
.gantt .g-ac path { fill: var(--ana); }
.gantt .g-proje-zemin { fill: #34404d; opacity: .22; }
.gantt .g-proje-dolu { fill: #34404d; }
.gantt .g-proje-zemin.gecikmis { fill: var(--kirmizi); }
.gantt .g-proje-dolu.gecikmis { fill: var(--kirmizi); }
.gantt .g-ozet-kisi { fill: var(--ana); }
.gantt .gs-proje .g-ad, .gantt .gs-kisi .g-ad { font-size: 13.5px; }
#pr-gorunum button { white-space: nowrap; }
.gantt .g-gun.g-hs { fill: #a6b0bc; }
.gantt .g-baslik { fill: #f3f5f8; }
.gantt .g-ay { font-size: 12px; font-weight: 700; fill: var(--yazi); }
.gantt .g-gun { font-size: 10px; fill: var(--soluk); }
.gantt .g-ay-cizgi { stroke: #d5dbe3; }
.gantt .g-hafta-sonu { fill: #f6f7f9; }
.gantt .g-ayrac { stroke: #d5dbe3; }
.gantt .g-zebra { fill: #fafbfc; }
.gantt .g-bos { fill: transparent; }
.gantt .g-satir { cursor: pointer; }
.gantt .g-satir.uzerinde > rect:first-child { fill: var(--ana-acik); fill-opacity: .55; }
.gantt .g-ad { font-size: 13px; fill: var(--yazi); }
.gantt .g-ust { font-weight: 700; }
.gantt .g-kisi { font-size: 11px; fill: var(--soluk); }
.gantt .g-yuzde { font-size: 11px; fill: #fff; font-weight: 700; }
.gantt .g-ozet { fill: #34404d; }
.gantt .g-ok { fill: none; stroke: #6b7785; stroke-width: 1.4; }
.gantt .g-ok-ucu { fill: #6b7785; }
.gantt .g-bugun { stroke: var(--kirmizi); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gantt .g-bugun-yazi { font-size: 10px; fill: var(--kirmizi); font-weight: 700; }
.g-lejant { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 4px 0 10px; }
.gantt .g-yuzde.koyu { fill: var(--yazi); }
button.sil { background: transparent; border: 0; color: var(--kirmizi); font-size: 20px; min-height: 36px; padding: 0 6px; }
button.sil:hover { background: var(--kirmizi-acik); }

/* Malzeme kart tipleri */
#altmenu .altmenu-grup { color: var(--soluk); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 0 2px 0 12px; white-space: nowrap; }
.kart-bilgi { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.kart-ozellik { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 8px; font-size: 14px; }
.liste-not { grid-column: 1 / -1; text-align: center; padding: 8px; }
.gecis-serit { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; padding: 8px 16px; background: #b45309; color: #fff; font-size: 14px; }
.gecis-serit button { background: #fff; color: #b45309; min-height: 34px; }
@media print { .gecis-serit { display: none; } }
.rozet.net { background: #e6f4ea; color: #1e7a3c; }
.rozet.yesil-rozet { background: #e6f4ea; color: #1e7a3c; }
/* Stok reçete raporu */
.secim-dugme { width: 100%; text-align: left; background: #fff; color: inherit; border: 1px solid var(--cizgi); font-weight: 400; justify-content: flex-start; }
.rc-tablo tr.rc-ana td { background: #eef3fa; font-weight: 600; }
.rc-tablo .rc-ac { min-height: 22px; padding: 0 4px; margin-right: 4px; width: 22px; }
.rc-tablo .rc-bos { display: inline-block; width: 26px; }
.rozet.rc-MM { background: #e3ecf8; color: #1f4e8c; } .rozet.rc-YM { background: #fff4d6; color: #8a5b00; }
.rozet.rc-HM { background: #e6f4ea; color: #1e7a3c; }
.rc-tablo th.rc-ek, .rc-tablo td.rc-ek, td.rc-ek, th.rc-ek { background: #fbfaf3; }
.rc-maliyet-izgara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#ana-proje .proje-sayilar { margin-top: 12px; }
#ana-proje a.ana-sayi { color: inherit; text-decoration: none; }
.ana-sayi.kirmizi { border-left-color: var(--kirmizi); }
.sayfalayici { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.sayfalayici:empty { display: none; }
.sayfalayici .sayfa-no { width: 72px; min-height: 36px; padding: 4px 8px; text-align: center; }
.sayfalayici button:disabled { opacity: .4; cursor: default; }
tr.secili-satir td { background: var(--ana-acik); }
/* Donanım Sihirbazı: Donanım Sistemi kendi satırında (ölçü alanlarının aralık satırı yüzünden kaymasın) */
.izgara > .sistem-satiri { grid-column: 1 / -1; max-width: 360px; }
/* Donanım Sihirbazı: ölçü kutusunda birim (mm) sağda */
.birimli { position: relative; display: block; }
.birimli input { padding-right: 48px; -moz-appearance: textfield; }
.birimli input::-webkit-outer-spin-button, .birimli input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.birimli .birim { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk); font-weight: 600; pointer-events: none; }
.olcu-araligi { white-space: nowrap; font-size: .92em; }
.alan-baslik { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Donanım Sihirbazı üst satırı: Donanım Sistemi solda, Miktar sağda (alttaki ızgaranın son sütunu), altında çizgi */
.izgara.ust-satir { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 2px solid var(--cizgi); align-items: end; }
.ust-satir > .sistem-satiri { grid-column: 1; max-width: none; }
.ust-satir > .miktar-alani { grid-column: -2 / -1; }
#set-girdi .miktar-alani .alan-baslik { color: var(--ana); font-size: 15px; font-weight: 800; }
#set-girdi .alan.miktar-alani input { border: 2px solid var(--ana); background: var(--ana-acik); color: var(--yazi); font-size: 18px; font-weight: 800; }
#set-girdi .miktar-alani .birim { color: var(--ana); font-weight: 700; }
/* Donanım Sistemi: Miktar ile aynı belirginlikte (tüm sistemlerde) */
#set-girdi .alan.sistem-satiri { color: var(--ana); font-size: 15px; font-weight: 800; }
#set-girdi .alan.sistem-satiri select { border: 2px solid var(--ana); background-color: var(--ana-acik); color: var(--yazi);
  font-size: 18px; font-weight: 800; }
@media (min-width: 700px) { .ust-satir > .sistem-satiri { grid-column: 1 / span 2; } }  /* uzun sistem adı kesilmesin */
/* ölçü seçim kutusu: "mm" açılır okun solunda */
.birimli-secim select { padding-right: 72px; }
.birimli-secim .birim { right: 40px; }
/* Logo grup kodu / alt grup süzgeci */
.grup-suzgec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.grup-suzgec[hidden] { display: none; }
.grup-etiket { color: var(--ana); font-weight: 600; }
/* Donanım Sihirbazı: alan başlıkları koyu; kutu içindeki yazılar eskisi gibi (başlıktan miras almasın) */
#set-girdi .alan { color: var(--yazi); font-weight: 700; }
#set-girdi .alan :is(input, select) { color: var(--soluk); font-weight: 600; }
#set-girdi .alan .olcu-araligi { color: var(--soluk); font-weight: 600; }

/* teklif: fiyatı listede olmayan kalemde boş fiyat kutusu */
.kalem input[data-fiyat] { max-width: 130px; margin-left: auto; }
.kalem input[data-fiyat].eksik { border-color: var(--kirmizi); background: var(--kirmizi-acik); }
#ana-proje .proje-sayilar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 760px) { #altmenu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

/* Ayarlı tablo (reçete): sürükle-bırak sütun, sıralama */
.rc-tablo th[draggable="true"] { cursor: grab; user-select: none; }
.rc-tablo th.siralanir:hover { color: var(--ana); }
.rc-tablo th.tasiniyor { opacity: .5; }
.rc-tablo th.birak { box-shadow: inset 3px 0 0 var(--ana); }
.rc-tablo td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 5px; padding-bottom: 5px; }
.rc-tablo td > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-tablo .rc-ac { min-height: 20px; line-height: 1; }
.rc-tablo th { vertical-align: top; }
.rc-tablo th .th-ad { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 18px; }
.rc-tablo .tablo-filtre { width: 100%; min-height: 28px; padding: 2px 6px; margin-top: 4px; font-size: 12px; font-weight: 400; text-transform: none; border-radius: 6px; }
/* reçete durum sütunu */
.rozet.rc-durum-uyari { background: #fde7d5; color: #b45309; }
.rozet.rc-durum-yanurun { background: #eef0f3; color: #555; }
.rozet.rc-durum-ok { background: #e6f4ea; color: #1e7a3c; }
.rc-tablo tr.rc-uyari td { background: #fff6ee; }
.rc-uyari-dugme { color: #b45309; font-weight: 700; min-height: 22px; padding: 0 6px; }
.secim-dugme:hover, .secim-dugme:focus, .secim-dugme:active { background: #fff; color: inherit; border-color: var(--ana); }
/* reçete tablosu: sık satır */
table.tablo.rc-tablo td { padding-top: 3px; padding-bottom: 3px; line-height: 1.25; font-size: 13px; }
.rc-tablo td .rozet { padding: 1px 7px; font-size: 11px; line-height: 1.35; }
.rc-tablo .rc-ac { min-height: 16px; height: 16px; padding: 0 3px; width: 18px; font-size: 11px; }
.rc-tablo .rc-bos { width: 22px; }
.cari-tablo tr.pasif-satir td { color: #8a8f98; }

/* Varyant Kodları */
.vk-tablo td { vertical-align: top; }
.vk-oz { display: inline-block; padding: 1px 6px; margin: 1px 2px 1px 0; border-radius: 6px; background: var(--zemin, #f3f5f8); white-space: nowrap; }
.vk-oz.gecersiz { background: #fde2e1; color: #a1251b; }
.rozet.vk-yesil { background: #e2f3e5; color: #1e6b33; }
.rozet.vk-sari { background: #fff3cd; color: #7a5a00; }
.rozet.vk-kirmizi { background: #fde2e1; color: #a1251b; }
.vk-sonuc { padding: 12px; border: 1px solid var(--cizgi); border-radius: 10px; }
.secim-listesi { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 320px; overflow: auto; }
.secim-listesi button { text-align: left; justify-content: flex-start; }
.rc-brut { text-align: right; white-space: nowrap; }
.rc-brut b { font-size: 1.25em; }
/* sihirbaz sırası */
.ss-liste { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.ss-satir { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--cizgi); border-radius: 8px; }
.ss-no { width: 22px; text-align: right; color: var(--soluk, #6b7785); }
.ss-ad { flex: 1; }
/* teklifin Logo süreci */
.surec { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.surec-adim { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.surec-adim:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--cizgi); }
.surec-nokta { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cizgi); background: #fff; flex: none; margin-top: 2px; }
.surec-adim.aktif .surec-nokta { background: var(--ana); border-color: var(--ana); }
.surec-icerik { flex: 1; }
/* cari bakiye / ekstre */
.cari-bakiye { box-shadow: none; border: 1px solid var(--cizgi); margin-top: 12px; }
.bakiye-izgara { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: 6px; }
.bakiye-borc { color: #a1251b; }
.bakiye-alacak { color: #1e6b33; }
table.ekstre td.sag, table.ekstre th.sag { text-align: right; white-space: nowrap; }
.ekstre-devir td { background: var(--zemin, #f4f6f9); }
/* geniş / tam ekran pencere (ekstre) */
dialog.pencere-genis { width: min(1500px, calc(100vw - 24px)); resize: both; overflow: auto; min-width: 360px; min-height: 300px; }
dialog.pencere-tam { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; border-radius: 0; resize: none; }
.ekstre-ozet { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 8px 10px; border-radius: 8px; background: var(--zemin, #f4f6f9); margin-top: 8px; }
.doviz-bakiye { margin-top: 4px; }
.doviz-bakiye td.sag, .doviz-bakiye th.sag { text-align: right; white-space: nowrap; }
#e-tablo .set-kaydir { max-height: 52vh; overflow: auto; }
dialog.pencere-tam #e-tablo .set-kaydir { max-height: calc(100vh - 330px); }
#e-tablo thead th { position: sticky; top: 0; z-index: 2; background: var(--kart, #fff); }
#a-tablo .set-kaydir { max-height: 52vh; overflow: auto; }
dialog.pencere-tam #a-tablo .set-kaydir { max-height: calc(100vh - 360px); }
#a-tablo thead th { position: sticky; top: 0; z-index: 2; background: var(--kart, #fff); }
/* ekstre: eşleşme durumu */
.rozet.ekstre-kapali { background: #e2f3e5; color: #1e6b33; }
.rozet.ekstre-kismen { background: #fff3cd; color: #7a5a00; }
.rozet.ekstre-acik { background: #fde2e1; color: #a1251b; }
table.tablo tr.ekstre-satir-acik td { background: #fdf0ef; }
table.tablo tr.ekstre-satir-kismen td { background: #fffaea; }
/* ekstre pivotu */
.pivot-kaydir { max-height: 58vh; overflow: auto; }
dialog.pencere-tam .pivot-kaydir { max-height: calc(100vh - 300px); }
table.pivot-tablo th, table.pivot-tablo td { white-space: nowrap; }
table.pivot-tablo th.sag, table.pivot-tablo td.sag { text-align: right; }
table.pivot-tablo thead th { position: sticky; top: 0; z-index: 2; background: var(--kart, #fff); }
table.pivot-tablo td:first-child, table.pivot-tablo th:first-child { position: sticky; left: 0; background: var(--kart, #fff); z-index: 1; }
table.pivot-tablo tfoot td { background: var(--zemin, #f4f6f9); }
.doviz-bakiye td.ekstre-acik-hucre { background: #fff8f0; }
.ekstre-devir-doviz td { background: #f8fafc !important; font-size: 0.95em; }
/* SATIŞ özet raporu */
.ozet-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.ozet-kart { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: var(--kart); color: inherit; text-decoration: none; box-shadow: var(--golge); }
.ozet-kart:hover { border-color: #94a3b8; }
.ozet-kart b { font-size: 1.25em; }
.ozet-cubuk { height: 10px; border-radius: 4px; background: var(--vurgu); min-width: 1px; }
.izgara-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.izgara-2 > .kart { margin: 0; }
.sekme a { padding: 8px 14px; background: #fff; color: var(--ana); text-decoration: none; font-weight: 600; }
.sekme a.secili { background: var(--ana); color: #fff; }
/* SATIŞ karşılama (pano) */
.pano-bugun { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding: 10px 14px; margin-top: 8px; border-radius: var(--yaricap); background: var(--ana-acik); }
.pano-artis { color: var(--yesil); font-weight: 600; }
.pano-azalis { color: var(--kirmizi); font-weight: 600; }
.ozet-kart.pano-uyari { border-color: #f2c4bf; background: #fffafa; }
.pano-grafik { width: 100%; height: auto; display: block; margin-top: 8px; }
.pano-grafik .pg-cizgi { stroke: var(--cizgi); stroke-width: 1; }
.pano-grafik .pg-eksen { font-size: 11px; fill: var(--soluk); }
.pg-siparis { fill: #9db8de; background: #9db8de; }
.pg-fatura { fill: var(--ana); background: var(--ana); }
.pano-grafik .pg-bu .pg-eksen { fill: var(--yazi); font-weight: 700; }
.pano-lejant { font-size: 0.85em; color: var(--soluk); display: inline-flex; align-items: center; gap: 6px; }
.pano-lejant i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.pano-satir { margin: 0 0 10px; }
.pano-satir-ust { display: flex; justify-content: space-between; gap: 10px; }
.pano-satir-ust span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-iz { height: 6px; border-radius: 3px; background: var(--bant); margin-top: 3px; }
.pano-iz div { height: 100%; border-radius: 3px; background: var(--vurgu); }
.pano-satir-ust b, #pn td.sag b { white-space: nowrap; }
#pn td.sag { white-space: nowrap; }
/* SATINALMA belge zinciri */
.sa-zincir { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.sa-adim { flex: 1 1 140px; min-width: 120px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 6px 8px; background: var(--kart); display: flex; flex-direction: column; gap: 4px; }
.sa-adim.bos { background: var(--bant); }
.sa-adim a { display: flex; flex-direction: column; text-decoration: none; color: var(--ana); padding: 3px 5px; border-radius: 6px; }
.sa-adim a:hover { background: var(--ana-acik); }
.sa-adim a.secili { background: var(--ana); color: #fff; }
.sa-adim a.secili .soluk { color: #dbe6f5; }
.sa-ok { align-self: center; color: var(--soluk); font-weight: 700; }
/* talep süreci (Logo): talep > emir > sipariş > irsaliye > fatura */
.tl-surec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.tl-adim { display: inline-flex; flex-direction: column; padding: 2px 9px; border-radius: 12px; font-size: 0.82em; background: var(--bant); color: var(--soluk); border: 1px solid var(--cizgi); }
.tl-adim.tamam { background: var(--yesil-acik); color: var(--yesil); border-color: #b9e0c8; }
.tl-adim.kismi { background: var(--sari-acik); color: var(--sari); border-color: #f0d79a; }
.tl-adim.hata { background: var(--kirmizi-acik); color: var(--kirmizi); border-color: #f2c4bf; }
.tl-adim .kucuk { font-weight: 400; }
.tl-ok { color: var(--soluk); }
.tl-termin { font-size: 0.82em; padding: 2px 9px; border-radius: 12px; background: var(--ana-acik); color: var(--ana); font-weight: 600; }
.tl-termin.gecikti { background: var(--kirmizi-acik); color: var(--kirmizi); }
.yesil-yazi { color: var(--yesil); }
/* Logo fiş alt toplamları (Logo ekranındaki gibi) ve bağlı belge satırları */
.bagli-ac { width: 24px; height: 24px; padding: 0; border-radius: 6px; font-weight: 700; line-height: 1; }
tr.bagli-ic > td { background: var(--bant); }
.bagli-satirlar { background: var(--kart); }
.bagli-satirlar td.sag, #sba td.sag, #saa td.sag, #lta td.sag { white-space: nowrap; }
.logo-toplam { display: flex; flex-direction: column; align-items: flex-end; margin-top: 8px; }
.logo-toplam table { border-collapse: separate; border-spacing: 3px 2px; font-size: 0.86em; width: auto; }
.logo-toplam th, .logo-toplam td { padding: 0 2px; border: 0; line-height: 1.25; background: none; }
.logo-toplam th { font-weight: 700; color: var(--yazi); text-transform: none; letter-spacing: 0; }
.logo-toplam td:first-child { padding-right: 10px; white-space: nowrap; }
.logo-toplam-kutu { display: block; min-width: 118px; height: 21px; line-height: 19px; padding: 0 6px; border: 1px solid var(--cizgi); background: var(--bant); text-align: right; white-space: nowrap; }
.logo-toplam tr.net .logo-toplam-kutu { font-weight: 700; background: var(--ana-acik); border-color: #b9cbe6; }
.logo-toplam .kucuk { font-size: 0.78em; margin-top: 2px; }
.uyari-yazi { color: var(--sari); }

/* Tam ekran (her ekranda): menüler gizli, içerik tam genişlik */
#tam-ekran-cik { display: none; }
body.tam-ekran #ust { display: none !important; }
body.tam-ekran main { max-width: none; padding: 10px 14px 80px; }
body.tam-ekran .alt-cubuk .ic { max-width: none; }
body.tam-ekran #tam-ekran-cik { display: inline-flex; position: fixed; top: 8px; right: 12px; z-index: 50; box-shadow: var(--golge); background: var(--kart, #fff); }

/* Kârlılık: + ile açılan iç içe kırılım */
.kr-ac { min-height: 22px; min-width: 24px; padding: 0 6px; font-weight: 700; }
tr.kr-alt > td { background: var(--zemin, #f4f6f9); padding: 6px 8px 10px; }
.kr-alt-kap { position: sticky; left: 0; width: fit-content; max-width: calc(100vw - 60px); overflow-x: auto; }
.kr-alt-kap table { background: var(--kart, #fff); }
.gd-tablo td, .gd-tablo th { white-space: nowrap; }
.gd-para td.sag { white-space: nowrap; }
.tam-ekran-dugme { margin-left: auto; }
body.tam-ekran #tam-ekran-cik { display: none; }  /* başlıktaki düğme varken ayrı çıkış düğmesi gerekmez */
body.tam-ekran:not(:has([data-tam-ekran])) #tam-ekran-cik { display: inline-flex; }
/* Dip toplam satırı (ayarlı tablolar ve iç içe tablolar): kaydırırken altta sabit */
tfoot tr.dip-toplam td { border-top: 2px solid var(--cizgi); background: var(--zemin, #f4f6f9); white-space: nowrap; }
.set-tablo tfoot tr.dip-toplam td { position: sticky; bottom: 0; z-index: 2; }
.ozet-tablo tr.ozet-ara td { background: var(--zemin, #f4f6f9); border-top: 1px solid var(--cizgi); }
/* Barel blister kartı: 3B önizlemenin sol altında (Ambalaj Tipi Blister) */
.p3-cerceve { position: relative; }
.blister-ek { position: absolute; left: 8px; bottom: 8px; width: 94px; filter: drop-shadow(0 2px 6px #0003); pointer-events: none; }
.blister-ek svg { width: 100%; height: auto; display: block; }
.blister-ek.kutu-ek { width: 112px; }
.koli-ek { position: absolute; right: 8px; bottom: 8px; width: 150px; filter: drop-shadow(0 2px 6px #0003); pointer-events: none; }
.koli-ek svg { width: 100%; height: auto; display: block; }
/* anahtar demeti (3B): iki kutunun arasında; sol / sağ JS ile kutulara göre */
.anahtar-ek { position: absolute; left: 160px; right: 160px; bottom: 4px; height: 190px; pointer-events: none; filter: drop-shadow(0 2px 4px #0003); }
.anahtar-ek canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 900px) { .blister-ek { width: 70px; } .blister-ek.kutu-ek { width: 84px; } .koli-ek { width: 112px; } .anahtar-ek { height: 150px; } }
/* ETİKET: döküm (sol: kaynak + liste, sağ: şablon ve önizleme) ve tasarım (şablonlar · tuval · özellikler) */
.et-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 16px; align-items: start; }
.et-izgara .kart { margin-top: 0; }
.et-yan { position: sticky; top: 8px; }
.et-onizleme { display: inline-block; box-shadow: 0 1px 6px #0003; border-radius: 2px; }
.et-tasarim { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.et-tasarim .kart { margin-top: 0; }
.et-sablon-sec { display: block; width: 100%; text-align: left; background: none; color: inherit; border: 1px solid transparent; border-radius: 8px; padding: 8px; margin-top: 4px; min-height: 0; font-weight: 600; }
.et-sablon-sec { overflow: hidden; }
.et-sablon-sec .soluk { display: block; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-sablon-sec.secili { border-color: var(--ana, #013b75); background: #eef4fb; }
.et-tuval { background: repeating-conic-gradient(#eef1f4 0 25%, #f8f9fa 0 50%) 0 0 / 16px 16px; border-radius: 8px; padding: 24px; overflow: auto; min-height: 260px; max-height: 70vh; margin-top: 10px; }
.et-kagit { display: inline-block; box-shadow: 0 2px 10px #0003; }
.et-tas { cursor: move; outline: 0.2px dashed #9aa5b1; touch-action: none; }
.et-tas.et-secili { outline: 0.4px solid #e8590c; }
.et-tut { position: absolute; right: 0; bottom: 0; width: 2.2mm; height: 2.2mm; background: #e8590c; cursor: nwse-resize; }
.et-ozellik .izgara-2x { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.et-ozellik .alan { margin-top: 6px; }
@media (max-width: 1100px) { .et-tasarim { grid-template-columns: 1fr; } .et-izgara { grid-template-columns: 1fr; } .et-yan { position: static; } }
.et-cari-cipler { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.et-cip { display: inline-flex; align-items: center; gap: 2px; background: #eef4fb; border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 12px; font-weight: 600; }
.et-cip button { min-height: 0; padding: 0 6px; }
.pasif-alan { opacity: .55; }
/* Raf takibi: solda raflar, sağda raf içeriği */
.rf-izgara { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rf-izgara .kart { margin-top: 0; }
@media (max-width: 900px) { .rf-izgara { grid-template-columns: 1fr; } }
/* 3B raf görünümü */
.raf3d-kart { margin-bottom: 16px; }
.raf3d { position: relative; height: 480px; border-radius: 10px; overflow: hidden; margin-top: 8px; background: #eef2f6; }
.raf3d canvas { width: 100% !important; height: 100% !important; touch-action: none; }
.raf3d-ipucu { position: absolute; background: #1f2933; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; z-index: 2; }
.raf3d-renk { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-left: 6px; }
@media (max-width: 900px) { .raf3d { height: 340px; } }
.raf3d-seritler { margin-top: 8px; display: grid; gap: 4px; }
.raf3d-serit { display: flex; gap: 3px; overflow-x: auto; align-items: center; padding-bottom: 4px; }
.raf3d-serit b { margin-right: 6px; white-space: nowrap; font-size: 13px; }
.raf3d-no { min-width: 30px; min-height: 30px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--cizgi, #d5dbe1); background: #fff; color: #1f2933; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.raf3d-no.dolu { background: #e3f4e9; border-color: #2f9e5b; }
.raf3d-no.bulunan { background: #dbeafb; border-color: #2b7bd6; }
.raf3d-no.secili { background: #f08c00; border-color: #f08c00; color: #fff; }
.raf3d-no.odak { outline: 2px solid var(--ana, #013b75); outline-offset: 1px; background: var(--ana, #013b75); color: #fff; }
.raf3d-katlar { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 34px; }
.raf3d-katlar .secili { background: #f08c00; color: #fff; border-color: #f08c00; }
.raf3d canvas { cursor: grab; }
.rf-secim { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--cizgi, #d5dbe1); border-radius: 10px; background: #f6f9fc; }

/* Finans */
.fin-art { color: var(--yesil); font-weight: 700; }
.fin-az, .fin-eksi { color: #c92a2a; }
.fin-lejant { display: flex; gap: 14px; font-size: 12px; color: var(--soluk); margin: 6px 0; }
.fin-lejant i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.fin-grafik { width: 100%; height: auto; max-height: 300px; display: block; margin-bottom: 10px; }
.fin-grup { cursor: pointer; }
.fin-grup:hover td, .fin-hesap:hover td { background: var(--ana-acik, #eef4fb); }
.fin-hesap { cursor: pointer; }
.fin-ara td { font-weight: 700; background: #f1f3f5; }
.fin-tahmin td { background: #fff3bf; }
.fin-not td { color: var(--soluk); font-style: italic; }
.fin-tablo th, .fin-tablo td { white-space: nowrap; }
.fin-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.fin-serit { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #f1f3f5; }
.ana-sayi.kirmizi { border-left-color: #e03131; }
.rozet.kirmizi-rozet { background: #ffe3e3; color: #c92a2a; }
.rozet.mavi-rozet { background: #e7f0fb; color: #1864ab; }