/* AtlasWeb gorunumu. Eski prototipin acik gri-mavi zemini, beyaz bolumleri ve mavi ana rengi.
   Renk, punto, kalinlik, satir araligi ve tema firma/kullanici bazinda yoneticiden ayarlanir (ekranlar.js). */
:root {
  --ana: #155eef;
  --tablo-boyut: 16px;
  --satir: 13px;
  --tablo-kalinlik: 700;
  --logo-boyu: 48px;
  /* Bilgisayarda icerik genisligi; genis ekranda tablolar sigsin. Telefonda zaten tam ekran. */
  --sayfa-genislik: 1800px;

  --zemin: #f3f6fa;
  --kart: #ffffff;
  --murekkep: #172033;
  --soluk: #64748b;
  --cizgi: #e2e8f0;
  --cizgi-acik: #eef2f7;
  --baslik-zemin: #f8fafc;
  --zebra: #f1f5f9;
  --ana-acik: color-mix(in srgb, var(--ana) 12%, var(--kart));
  --ana-yazi: color-mix(in srgb, var(--ana) 80%, #000);
  --ana-metin: var(--ana);
  /* Ozet kutularinin ust seritleri (eski Donusum ekraninin renkleri) */
  --r1: #2563eb; --r2: #0d9488; --r3: #c2410c; --r4: #7c3aed; --r5: #067647; --r6: #b54708;
  --vurgu: #c62828;
  --golge: 0 4px 16px rgba(15, 23, 42, .04);
  --yaricap: 12px;
  --yazi: system-ui, "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root[data-tema="koyu"] {
  --zemin: #111827;
  --kart: #1f2937;
  --murekkep: #e5e7eb;
  --soluk: #aab6c8;
  --cizgi: #374151;
  --cizgi-acik: #303b4c;
  --baslik-zemin: #263b5c;
  --zebra: #243041;
  --ana-acik: color-mix(in srgb, var(--ana) 28%, var(--kart));
  --ana-yazi: color-mix(in srgb, var(--ana) 40%, #fff);
  --ana-metin: color-mix(in srgb, var(--ana) 55%, #fff);
  --r1: #3b82f6; --r2: #14b8a6; --r3: #ea580c; --r4: #a78bfa; --r5: #4ade80; --r6: #fbbf24;
  --vurgu: #ff8a80;
  --golge: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--yazi);
  font-size: 15px;
  line-height: 1.45;
  color: var(--murekkep);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--ana-metin); }

main { padding: 0 18px 32px; max-width: var(--sayfa-genislik); margin: 0 auto; }

/* ---------------------------------------------------------------- Ust bolum (logo, firma adi, menu) */
.ust {
  position: sticky; top: 0; z-index: 20;
  max-width: var(--sayfa-genislik); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 12px) 18px 10px;
  background: var(--zemin);
}
.ust .marka { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ust .marka img { height: var(--logo-boyu); max-width: 220px; object-fit: contain; flex: none; }
.ust .marka img.ikon { height: 34px; width: 34px; border-radius: 9px; }
.ust .marka b { font-size: clamp(1.15rem, 3.4vw, 1.6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
/* Atlas logosu ve destek numarasi: her ekranda sol ust kosede, ayarlardan degismez */
.atlas { display: grid; justify-items: center; gap: 1px; flex: none; text-decoration: none; line-height: 1; }
.atlas img { height: 38px; width: auto; display: block; }
.atlas .tel { font-size: 11.5px; font-weight: 700; color: var(--soluk); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.atlas .koyu { display: none; }
:root[data-tema="koyu"] .atlas .acik { display: none; }
:root[data-tema="koyu"] .atlas .koyu { display: block; }
.ust .ayrac { width: 1px; align-self: stretch; background: var(--cizgi); flex: none; }
.ust .sag { display: grid; justify-items: end; gap: 4px; flex: none; }
.sure-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, #16a34a 12%, var(--kart)); color: color-mix(in srgb, #16a34a 75%, var(--murekkep)); border: 1px solid color-mix(in srgb, #16a34a 30%, var(--kart)); }
.sure-rozet.uyari { background: color-mix(in srgb, #f59e0b 14%, var(--kart)); color: color-mix(in srgb, #b45309 80%, var(--murekkep)); border-color: color-mix(in srgb, #f59e0b 40%, var(--kart)); }
.sure-rozet.kritik, .sure-rozet.doldu { background: color-mix(in srgb, #ef4444 14%, var(--kart)); color: color-mix(in srgb, #dc2626 80%, var(--murekkep)); border-color: color-mix(in srgb, #ef4444 40%, var(--kart)); }
.sure-rozet .kisa { display: none; }
.ust .durum { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--soluk); white-space: nowrap; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: #9aa39d; flex: none; display: inline-block; }
.nokta.acik { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.nokta.kapali { background: #ef4444; }

.menu {
  max-width: var(--sayfa-genislik); margin: 0 auto 14px; padding: 0 18px;
}
.menu-ic {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 9px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart);
}
.menu a { padding: 7px 11px; border-radius: 7px; text-decoration: none; font-weight: 650; color: var(--ana-metin); }
.menu a.secili { background: var(--ana-acik); color: var(--ana-yazi); }
.menu-linkler { display: contents; }
.menu .menu-tum { display: none; }
.ust .atlas { cursor: pointer; }
.cikti-logolar { display: flex; flex-wrap: wrap; gap: 10px; }
.cikti-logo { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 1px solid var(--cizgi); border-radius: 10px; width: 170px; text-align: center; font-size: 13px; }
.cikti-logo img { height: 50px; max-width: 150px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.logo-sec { max-width: 460px; }
.logo-secenekler { display: grid; gap: 8px; max-height: 55vh; overflow: auto; }
.logo-secenek { display: grid !important; grid-template-columns: 22px 120px 1fr; align-items: center; gap: 10px !important;
  padding: 8px 10px; border: 1.5px solid var(--cizgi); border-radius: 10px; cursor: pointer; color: var(--murekkep) !important; font-size: 14px !important; }
.logo-secenek:has(input:checked) { border-color: var(--ana); background: var(--ana-acik); }
.logo-secenek img { height: 40px; width: 120px; object-fit: contain; background: #fff; border-radius: 6px; }
.logo-secenek input { width: 18px; height: 18px; }
.perde { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 16px; }
.yonetici-cubuk { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: color-mix(in srgb, var(--ana) 12%, var(--kart)); border: 1px solid color-mix(in srgb, var(--ana) 40%, var(--kart));
  padding: 10px 12px; border-radius: var(--yaricap); margin-bottom: 14px; font-size: 13px; }
.duzenle-panel { border: 2px dashed color-mix(in srgb, var(--ana) 45%, var(--cizgi)); }
.menu .kim { margin-left: auto; color: var(--soluk); font-size: 13.5px; }
.menu .cikis {
  background: var(--ana); border: 0; color: #fff; border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 13.5px; cursor: pointer;
}

@media (max-width: 699px) {
  main { padding: 0 10px calc(env(safe-area-inset-bottom) + 84px); }
  .ust { padding-left: 10px; padding-right: 10px; gap: 9px; }
  .atlas img { height: 32px; }
  .atlas .tel { font-size: 10.5px; }
  .ust .marka img { height: min(var(--logo-boyu), 34px); max-width: 110px; }
  .ust .marka b { font-size: 1.02rem; }
  .sure-rozet { font-size: 11px; padding: 2px 8px; }
  .sure-rozet .uzun { display: none; }
  .sure-rozet .kisa { display: inline; }
  .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 0; }
  .menu-ic {
    border-radius: 0; border-width: 1px 0 0; padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px);
    flex-wrap: nowrap; box-shadow: 0 -4px 14px rgba(15, 23, 42, .06);
  }
  .menu a { flex: 1; text-align: center; padding: 10px 6px; }
  .menu .kim { display: none; }
  .menu-linkler a:nth-of-type(n+4) { display: none; }
  .menu .menu-tum { display: block; flex: 1; border: 0; background: none; font-weight: 650; color: var(--ana-metin); padding: 10px 6px; font-size: 14px; }
  .menu.acik .menu-ic { flex-wrap: wrap; max-height: 75vh; overflow: auto; }
  .menu.acik .menu-linkler a { display: block; flex: 1 1 45%; }
  .menu.acik .menu-tum { flex: 1 1 100%; order: 99; }
}

/* ---------------------------------------------------------------- Basliklar ve araclar */
.baslik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.baslik h1 { font-size: clamp(1.25rem, 3.6vw, 1.75rem); margin: 0; flex: 1; min-width: 160px; letter-spacing: -.01em; }
.baslik .geri { text-decoration: none; font-weight: 650; font-size: 14px; padding: 6px 10px 6px 0; }
.alt-bilgi { color: var(--soluk); font-size: 12.5px; }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 15px; border-radius: 8px;
  border: 1px solid var(--cizgi); background: var(--kart); color: var(--murekkep);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
}
.dugme:hover { border-color: var(--soluk); }
.dugme.ana { background: var(--ana); border-color: var(--ana); color: #fff; }
.dugme.ana:hover { filter: brightness(1.08); }
.dugme.tehlike { color: var(--vurgu); }
.dugme:disabled { opacity: .55; cursor: default; }
.dugme.kucuk { min-height: 30px; padding: 4px 10px; font-size: 13px; }

.arama {
  min-height: 38px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--cizgi);
  background: var(--kart); min-width: 0; flex: 1 1 180px; max-width: 340px;
}

/* ---------------------------------------------------------------- Ozet kutulari */
.ozetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ozet {
  background: var(--kart); border: 1px solid var(--cizgi); border-top: 4px solid var(--c, var(--cizgi));
  border-radius: var(--yaricap); padding: 12px 16px; box-shadow: var(--golge);
}
.ozet:nth-child(6n+1) { --c: var(--r1); }
.ozet:nth-child(6n+2) { --c: var(--r2); }
.ozet:nth-child(6n+3) { --c: var(--r3); }
.ozet:nth-child(6n+4) { --c: var(--r4); }
.ozet:nth-child(6n+5) { --c: var(--r5); }
.ozet:nth-child(6n+6) { --c: var(--r6); }
.ozet > span { display: block; font-size: 12.5px; color: var(--soluk); }
.ozet b { display: block; font-size: clamp(1.15rem, 3vw, 1.45rem); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ozet b.eksi { color: var(--vurgu); }

/* ---------------------------------------------------------------- Filtreler */
.filtre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 14px 16px;
  box-shadow: var(--golge); margin-bottom: 14px;
}
.filtre label { display: grid; gap: 4px; font-size: 12.5px; color: var(--soluk); font-weight: 600; }
.filtre input, .filtre select {
  min-height: 38px; padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); width: 100%;
}
.filtre .onay { display: flex; align-items: center; gap: 8px; min-height: 38px; color: var(--murekkep); font-weight: 500; font-size: 14px; }
.filtre .onay input { width: 18px; height: 18px; min-height: 0; }

/* ---------------------------------------------------------------- Tablo */
.tablo-kutu {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge);
  overflow: auto; max-height: calc(100vh - 240px);
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--tablo-boyut); font-weight: var(--tablo-kalinlik); }
th, td { padding: var(--satir) 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--cizgi-acik); }
th {
  position: sticky; top: 0; z-index: 1; background: var(--baslik-zemin); color: var(--soluk);
  font-size: inherit; font-weight: 650; cursor: pointer; user-select: none;
}
th.sirali::after { content: " ▲"; font-size: .6em; }
th.sirali.azalan::after { content: " ▼"; }
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-zebra="1"] main tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--ana-acik) !important; }
tbody tr.tiklanir { cursor: pointer; }
tbody tr.tiklanir:hover td { background: var(--ana-acik); }
tfoot td { position: sticky; bottom: 0; background: var(--baslik-zemin); font-weight: 700; border-top: 2px solid var(--cizgi); border-bottom: 0; }
td.eksi { color: var(--vurgu); }
.rozet { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .75em; font-weight: 700; background: var(--ana-acik); color: var(--ana-yazi); vertical-align: 1px; }
.rozet.a { background: color-mix(in srgb, var(--vurgu) 14%, var(--kart)); color: var(--vurgu); }

/* ---------------------------------------------------------------- Kartlar (telefon) */
.kartlar { display: none; gap: 10px; }
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 12px 14px;
  box-shadow: var(--golge); display: grid; gap: 6px; font-size: min(var(--tablo-boyut), 17px); font-weight: var(--tablo-kalinlik);
}
.kart.tiklanir { cursor: pointer; }
.kart.tiklanir:active { border-color: var(--ana); }
.kart .k-ust { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kart .k-baslik { font-weight: 700; overflow-wrap: anywhere; }
.kart.tiklanir { position: relative; padding-right: 30px; }
.kart.tiklanir::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--soluk); }
.kart .k-buyuk { font-weight: 700; font-size: 1.1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kart .k-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-size: .88em; }
.kart .k-alt span { color: var(--soluk); }
.kart .k-alt b { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kart .k-alt b.eksi { color: var(--vurgu); }
.kart-toplam { background: var(--baslik-zemin); }

@media (max-width: 699px) {
  .tablo-kutu { display: none; }
  .kartlar { display: grid; }
}

/* ---------------------------------------------------------------- Mesajlar */
.bilgi, .hata, .bos { padding: 12px 14px; border-radius: var(--yaricap); margin-bottom: 14px; font-size: 14px; }
.hata { background: color-mix(in srgb, var(--vurgu) 10%, var(--kart)); color: var(--vurgu); border: 1px solid color-mix(in srgb, var(--vurgu) 30%, var(--kart)); }
.bilgi { background: var(--ana-acik); color: var(--ana-yazi); border: 1px solid color-mix(in srgb, var(--ana) 25%, var(--kart)); }
.bos { background: var(--kart); color: var(--soluk); text-align: center; padding: 28px 14px; border: 1px solid var(--cizgi); }
.yukleniyor { color: var(--soluk); padding: 28px 0; text-align: center; }
.yukleniyor::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2px solid var(--cizgi); border-top-color: var(--ana); border-radius: 50%; animation: don .8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.yukle-ipucu {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, #f59e0b 12%, var(--kart)); border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--kart));
  padding: 10px 12px; border-radius: var(--yaricap); margin-bottom: 14px; font-size: 13px;
}

/* ---------------------------------------------------------------- Giris ekrani */
.giris-zemin { min-height: 100vh; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 16px) 18px 24px; }
.giris-zemin > .atlas { align-self: flex-start; }
.giris-zemin > .atlas img { height: 46px; }
.giris-zemin > .atlas .tel { font-size: 12.5px; }
.giris-orta { flex: 1; display: grid; place-items: center; padding: 24px 0 40px; }
.giris {
  width: 100%; max-width: 380px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 28px 24px; box-shadow: var(--golge); display: grid; gap: 14px;
}
.giris .logo { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 4px; }
.giris .logo img { max-height: 90px; max-width: 220px; object-fit: contain; }
.giris .logo img.ikon { width: 52px; height: 52px; border-radius: 13px; }
.giris h1 { font-size: 21px; margin: 0; }
.giris p { margin: 0; color: var(--soluk); font-size: 14px; }
.giris label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--soluk); }
.giris input[type=text], .giris input[type=password] {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 8px; font-size: 16px; background: var(--kart);
}
.giris .onay { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--murekkep); font-size: 14px; }
.giris .onay input { width: 18px; height: 18px; }
.giris .dugme { min-height: 46px; font-size: 15px; }

/* ---------------------------------------------------------------- Yonetim */
.yonetim-bolum { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 16px; margin-bottom: 16px; }
.yonetim-bolum h2 { margin: 0 0 12px; font-size: 16.5px; }
.yonetim-bolum h3 { margin: 18px 0 8px; font-size: 14.5px; }
.yonetim-bolum table { font-size: 14px; font-weight: 400; }
.yonetim-bolum td, .yonetim-bolum th { white-space: normal; vertical-align: middle; padding: 9px 12px; }
.satir-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 12px; }
.satir-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--soluk); font-weight: 600; }
.satir-form input, .satir-form select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); }
.anahtar-kutu { background: color-mix(in srgb, #f59e0b 10%, var(--kart)); border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--kart)); border-radius: var(--yaricap); padding: 14px; margin-top: 12px; display: grid; gap: 8px; font-size: 14px; }
.anahtar-kutu code { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 14px; background: var(--kart); border: 1px solid var(--cizgi); padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.ekran-sec { display: flex; gap: 10px; flex-wrap: wrap; }
.ekran-sec label { display: flex; gap: 5px; align-items: center; font-size: 13px; }
.islemler { display: flex; gap: 6px; flex-wrap: wrap; }
.soluk { color: var(--soluk); }
.bilgi-satiri { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 14px; font-size: 13.5px; color: var(--soluk); }
.bilgi-satiri b { color: var(--murekkep); font-weight: 650; }
.alt-baslik { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.alt-baslik h2 { margin: 0; font-size: 18px; }
.sure-uyari { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Yonetim: sekmeler, durum rozetleri, firma listesi */
.sekme-cubuk { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--cizgi); }
.sekme-cubuk button { border: 0; background: none; padding: 9px 14px; font-weight: 650; color: var(--soluk); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.sekme-cubuk button.secili { color: var(--ana-metin); border-bottom-color: var(--ana); }
.durum-rozet { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; }
.durum-rozet.iyi { color: color-mix(in srgb, #16a34a 80%, var(--murekkep)); }
.durum-rozet.kotu { color: color-mix(in srgb, #dc2626 80%, var(--murekkep)); }
.bilgi-kutu { border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px 14px; background: var(--baslik-zemin); font-size: 14px; }
.onay-satir { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.onay-satir input { width: 18px; height: 18px; }
.firma-araclar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.firma-araclar input[type=search] { flex: 1; min-width: 200px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); }
.filtre-dugmeler { display: flex; gap: 4px; flex-wrap: wrap; }
.filtre-dugmeler button { border: 1px solid var(--cizgi); background: var(--kart); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--murekkep); }
.filtre-dugmeler button.secili { background: var(--ana); border-color: var(--ana); color: #fff; }
.firma-satir { cursor: pointer; }
.firma-satir:hover td { background: var(--ana-acik); }
.firma-satir td small { display: block; color: var(--soluk); font-size: 12px; }
.ozet-sayilar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ozet-sayilar > div { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--soluk); }
.ozet-sayilar b { display: block; font-size: 20px; color: var(--murekkep); }

.ayar-ust { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 6px; }
.ayar-ust label { display: grid; gap: 4px; font-size: 12.5px; color: var(--soluk); font-weight: 600; }
.ayar-ust select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); }
.ayar-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; }
.ayar-izgara label { display: grid; gap: 4px; font-size: 12.5px; color: var(--soluk); font-weight: 600; }
.ayar-izgara label.onay { display: flex; align-items: center; gap: 8px; color: var(--murekkep); font-weight: 500; font-size: 14px; }
.ayar-izgara input[type=text], .ayar-izgara input[type=number], .ayar-izgara select {
  min-height: 36px; padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); width: 100%;
}
.ayar-izgara input[type=color] { width: 64px; height: 36px; padding: 2px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); }
.alan-liste { display: grid; gap: 4px; max-width: 720px; }
.alan-satir {
  display: grid; grid-template-columns: 28px minmax(120px, 1fr) minmax(140px, 1.2fr) auto; gap: 8px; align-items: center;
  padding: 5px 8px; border: 1px solid var(--cizgi-acik); border-radius: 8px; background: var(--kart);
}
.alan-satir.kapali { opacity: .55; }
.alan-satir input[type=checkbox] { width: 18px; height: 18px; }
.alan-satir input[type=text]::placeholder { color: var(--soluk); opacity: .7; }
.alan-satir input[type=text] { min-height: 32px; padding: 4px 8px; border: 1px solid var(--cizgi); border-radius: 7px; background: var(--kart); width: 100%; }
.alan-satir .ok { display: flex; gap: 4px; }
.alan-satir .ok button { width: 30px; height: 30px; border: 1px solid var(--cizgi); border-radius: 7px; background: var(--kart); cursor: pointer; }
.durum-cubuk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.logo-onizleme { max-height: 70px; max-width: 220px; object-fit: contain; border: 1px dashed var(--cizgi); border-radius: 8px; padding: 4px; background: #fff; }

@media print {
  .menu, .baslik .dugme, .filtre, .yukle-ipucu, .arama, .ust .durum { display: none !important; }
  body { background: #fff; color: #000; }
  .ust { position: static; padding: 0 0 6px; border-bottom: 1.5px solid #333; margin-bottom: 8px; }
  .tablo-kutu { display: block !important; max-height: none; box-shadow: none; overflow: visible; border: 0; }
  .kartlar { display: none !important; }
  th { position: static !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .ozet { box-shadow: none; }
  main { padding: 0; }
  table { font-size: 11pt; }
  th, td { padding: 4px 8px; }
}

/* ---------------------------------------------------------------- Yazdirma: ekran degil, rapor kagidi */
.yazdir-sayfa { display: none; }
/* Kagit her zaman acik renkli: ekranda koyu tema secili olsa da cikti degiskenleri acik temaya doner */
.yazdir-sayfa {
  --zemin: #ffffff; --kart: #ffffff; --murekkep: #000000; --soluk: #333333; --cizgi: #999999; --cizgi-acik: #cccccc;
  --baslik-zemin: #ffffff; --zebra: #f3f4f6; --vurgu: #b91c1c; color-scheme: light; color: #000; background: #fff;
}
.yazdir-sayfa th, .yazdir-sayfa td { color: inherit; background: transparent; position: static; }
@media print {
  @page { margin: 10mm; }
  body.yazdiriliyor { background: #fff !important; color: #000 !important; }
  body.yazdiriliyor > *:not(.yazdir-sayfa) { display: none !important; }
  body.yazdiriliyor .yazdir-sayfa { display: block; font-family: var(--yazi); font-size: 9.5pt; color: #000; }
  .yazdir-sayfa .y-ust { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1.5pt solid #000; padding-bottom: 4pt; margin-bottom: 8pt; }
  .yazdir-sayfa .y-firma { font-size: 10pt; font-weight: 700; }
  .yazdir-sayfa h1 { font-size: 15pt; margin: 2pt 0 0; }
  .yazdir-sayfa .y-zaman { font-size: 8.5pt; }
  .yazdir-sayfa .y-bilgi { border-collapse: collapse; margin-bottom: 8pt; font-size: 9.5pt; }
  .yazdir-sayfa .y-bilgi th { text-align: left; font-weight: 600; padding: 1pt 12pt 1pt 0; color: #333; white-space: nowrap; }
  .yazdir-sayfa .y-bilgi td { padding: 1pt 0; font-weight: 700; }
  .yazdir-sayfa .y-ozet { display: flex; flex-wrap: wrap; gap: 0; border: 1pt solid #000; margin-bottom: 8pt; }
  .yazdir-sayfa .y-ozet > div { flex: 1; padding: 4pt 8pt; border-right: 1pt solid #000; }
  .yazdir-sayfa .y-ozet > div:last-child { border-right: 0; }
  .yazdir-sayfa .y-ozet > div > span { display: block; font-size: 8pt; color: #333; }
  .yazdir-sayfa .y-ozet b { font-size: 11pt; }
  .yazdir-sayfa .y-tablo { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .yazdir-sayfa .y-tablo th { background: #e5e7eb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; text-align: left; border: .75pt solid #000; padding: 3pt 5pt; }
  .yazdir-sayfa .y-tablo td { border: .5pt solid #777; padding: 2.5pt 5pt; }
  .yazdir-sayfa .y-tablo .sayi { text-align: right; white-space: nowrap; }
  .yazdir-sayfa .y-tablo tr { break-inside: avoid; }
  .yazdir-sayfa .y-tablo tfoot { display: table-row-group; }
  .yazdir-sayfa.genis .y-tablo { font-size: 7.5pt; }
  .yazdir-sayfa.genis .y-tablo td, .yazdir-sayfa.genis .y-tablo th { padding: 2pt 3pt; }
  .yazdir-sayfa .y-tablo tfoot td { font-weight: 700; border-top: 1.5pt solid #000; }
  .yazdir-sayfa .rozet { background: none !important; color: #000 !important; padding: 0; font-size: 8pt; }
  .yazdir-sayfa a { color: #000; text-decoration: none; }
  .yazdir-sayfa .y-ek { font-size: 12pt; margin: 14pt 0 5pt; }
  .yazdir-sayfa .y-alt { margin-top: 6pt; font-size: 8pt; color: #333; }
}

/* ---------------------------------------------------------------- Sol menu (bilgisayarda sabit, telefonda soldan acilir) */
.duzen { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.yan {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--kart); border-right: 1px solid var(--cizgi);
  padding: calc(env(safe-area-inset-top) + 14px) 12px 12px;
}
.yan-ust { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 6px 10px; }
.yan-ust .atlas img { height: 56px; max-width: 100%; object-fit: contain; }
.yan-ust .atlas .tel { font-size: 13px; }
.yan-kapat { display: none; border: 0; background: none; color: var(--soluk); padding: 6px; cursor: pointer; border-radius: 8px; }
.yan-kapat .ikon { width: 22px; height: 22px; }
.yan-firma { display: flex; align-items: center; gap: 10px; padding: 10px 8px 12px; border-bottom: 1px solid var(--cizgi); margin-bottom: 6px; }
.yan-firma img { height: min(var(--logo-boyu), 40px); max-width: 120px; object-fit: contain; }
.yan-firma b { font-size: 16.5px; line-height: 1.2; letter-spacing: -.01em; }
.yan-menu { flex: 1; display: grid; align-content: start; gap: 2px; }
.yan-grup-baslik {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer;
  padding: 7px 8px; border-radius: 9px; font: inherit; font-weight: 700; font-size: 14px; color: var(--murekkep); text-align: left;
}
.yan-grup-baslik:hover { background: var(--zebra); }
.yan-grup-baslik > span:nth-child(2) { flex: 1; }
.yan-grup-ikon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px;
  color: var(--grup); background: color-mix(in srgb, var(--grup) 13%, var(--kart));
}
.yan-grup-ikon .ikon { width: 18px; height: 18px; }
.yan-grup-baslik .ok { width: 15px; height: 15px; color: var(--soluk); transition: transform .15s; }
.yan-grup.acik .yan-grup-baslik .ok { transform: rotate(90deg); }
.yan-ogeler { display: none; padding: 2px 0 6px 20px; margin-left: 15px; border-left: 1.5px solid var(--cizgi); }
.yan-grup.acik .yan-ogeler { display: grid; gap: 1px; }
.yan-menu a {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
  text-decoration: none; color: var(--murekkep); font-size: 14px; font-weight: 550;
}
.yan-menu a .ikon { width: 17px; height: 17px; flex: none; color: var(--grup); }
.yan-menu a:hover { background: var(--zebra); }
.yan-menu a.secili { background: var(--ana-acik); color: var(--ana-yazi); font-weight: 700; }
.yan-tek { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cizgi); }
.yan-tek a { font-weight: 700; }
.yan-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--cizgi); margin-top: 6px; }
.yan-alt .kim { color: var(--soluk); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yan-perde { display: none; }

.govde { min-width: 0; }
.govde .ust { justify-content: flex-end; }
.govde .ust .atlas, .yan-ac, .ust-firma { display: none; }
.yan-ac { border: 1px solid var(--cizgi); background: var(--kart); color: var(--murekkep); border-radius: 10px; width: 40px; height: 40px; place-items: center; cursor: pointer; flex: none; }
.yan-ac .ikon { width: 22px; height: 22px; }

@media (max-width: 899px) {
  .duzen { display: block; }
  .yan {
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; height: auto; width: min(300px, 86vw);
    transform: translateX(-104%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(15, 23, 42, .25);
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  }
  body.yan-acik .yan { transform: none; }
  body.yan-acik { overflow: hidden; }
  .yan-perde { position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, .45); }
  body.yan-acik .yan-perde { display: block; }
  .yan-kapat { display: block; }
  .govde .ust { justify-content: flex-start; gap: 10px; }
  .yan-ac { display: grid; }
  .govde .ust .atlas { display: grid; }
  .ust-firma { display: block; flex: 1; min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
}
@media print {
  .yan, .yan-perde, .govde .ust { display: none !important; }
  .duzen { display: block; }
}

/* ---------------------------------------------------------------- FR3 sablonlari (programdaki cikti tasarimlari)
   Ekranda gorunmez (.yazdir-sayfa gizli); print disinda da tanimli ki tek sayfaya sigdirmak icin yukseklik olculebilsin. */
@media all {
  .yazdir-sayfa.sablon { font-family: Tahoma, "Segoe UI", Arial, sans-serif; font-size: 9pt; color: #000; background: #fff; }
  .yazdir-sayfa.sablon.olcum { display: block !important; position: absolute; left: -10000px; top: 0; }
  .sablon .s-kutu { border: .75pt solid #000; }
  .sablon .s-ust { display: flex; justify-content: space-between; align-items: center; min-height: 17mm; padding: 1mm 3mm; margin-bottom: 1mm; }
  .sablon .s-logo { max-height: 15mm; max-width: 60mm; object-fit: contain; display: block; }
  .sablon .s-firma-adi { font-size: 14pt; font-weight: 700; }
  .sablon .s-tarih-buyuk { font-size: 14pt; font-weight: 700; width: 49mm; text-align: center; }
  .sablon table { border-collapse: collapse; width: 100%; }
  .sablon .s-bilgi { margin-bottom: 4mm; }
  .sablon .s-bilgi th, .sablon .s-bilgi td { border: .75pt solid #000; padding: .8mm 1.5mm; text-align: left; vertical-align: middle; }
  .sablon .s-bilgi th { font-weight: 700; white-space: nowrap; }
  .sablon .s-bilgi col.e { width: 20mm; }
  .sablon .s-bilgi col.e2 { width: 17mm; }
  .sablon .s-bilgi col.e3 { width: 28mm; }
  .sablon .s-dar td, .sablon .s-dar th { padding: .4mm 1.5mm; }
  .sablon .s-tablo { margin-bottom: 4mm; }
  .sablon .s-tablo th, .sablon .s-tablo td { border: .75pt solid #000; padding: .6mm 1.2mm; }
  .sablon .s-tablo thead th { font-weight: 700; text-align: center; }
  .sablon .s-tablo .s-top td, .sablon .s-tablo .s-top th { font-weight: 700; }
  .sablon .s-tablo tr { break-inside: avoid; }
  .sablon .s, .sablon th.s { text-align: right; white-space: nowrap; }
  .sablon .o { text-align: center; width: 9mm; }
  .sablon .s-toplamlar { width: auto; margin: 0 0 6mm auto; font-weight: 700; }
  .sablon .s-toplamlar th, .sablon .s-toplamlar td { border: .75pt solid #000; padding: .6mm 2mm; text-align: right; min-width: 14mm; }
  .sablon .s-toplamlar tr:first-child td:first-child { border: 0; }
  .sablon .s-grup { width: 88%; margin-left: 4mm; }
  .sablon .s-malzeme { width: 45%; margin-left: 12mm; }
  .sablon .s-ust2 { display: flex; gap: 0; margin-bottom: 4mm; }
  .sablon .s-logo-kutu { width: 65mm; min-height: 14mm; display: grid; place-items: center; padding: 1mm; }
  .sablon .s-ust2-bilgi { flex: 1; margin: 0; }
  .sablon .s-ust2-bilgi tr.buyuk td, .sablon .s-ust2-bilgi tr.buyuk th { height: 8mm; font-size: 11pt; }
  .sablon .s-alt { display: flex; justify-content: space-between; gap: 6mm; align-items: flex-start; }
  .sablon .s-sol-toplam { width: 110mm; }
  .sablon .s-sol-toplam th { text-align: right; }
  .sablon .s-sag-toplam { width: auto; font-weight: 700; }
  .sablon .s-sag-toplam th { text-align: left; padding: .6mm 3mm .6mm 0; }
  .sablon .s-sag-toplam td { text-align: right; border-bottom: .75pt solid #000; padding: .6mm 1mm; min-width: 26mm; }
  .sablon .s-sag-toplam td + td { min-width: 0; }
  .sablon .s-yeni-sayfa { break-after: page; }
  .sablon .s-baslik2 { font-size: 11pt; margin: 5mm 0 2mm 15mm; }
  .sablon .s-maliyet { width: 82%; margin-left: 15mm; }
  .sablon .s-maliyet td, .sablon .s-maliyet th { border: 0; border-bottom: .5pt solid #888; }
  .sablon .s-maliyet thead th { border: .75pt solid #000; }
  .sablon .s-grup-baslik td { font-weight: 700; font-family: Arial, sans-serif; padding-top: 2.5mm; border-bottom: 0; }
  /* Fatura ve Maliyet: renkli cikti (renkler yazicida da basilsin) */
  .sablon .s-renkli { -webkit-print-color-adjust: exact; print-color-adjust: exact; --s-ana: #1e3a8a; --s-acik: #e8eefc; }
  .sablon .s-ust3 { display: flex; align-items: stretch; gap: 3mm; margin-bottom: 4mm; border: .75pt solid var(--s-ana); border-top: 3mm solid var(--s-ana); padding: 2mm; }
  .sablon .s-ust3-logo { width: 45mm; display: grid; place-items: center; }
  .sablon .s-ust3-orta { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .sablon .s-ust3-baslik { font-size: 15pt; font-weight: 800; color: var(--s-ana); letter-spacing: .5pt; }
  .sablon .s-ust3-alt { font-size: 9pt; color: #444; margin-top: 1mm; }
  .sablon .s-ust3-bilgi { width: 78mm; margin: 0; }
  .sablon .s-renkli .s-bilgi th { background: var(--s-acik); color: var(--s-ana); }
  .sablon .s-renkli .s-tablo thead th { background: var(--s-ana); color: #fff; border-color: var(--s-ana); }
  .sablon .s-renkli .s-tablo tbody tr:nth-child(even) td { background: #f6f8fc; }
  .sablon .s-renkli .s-kar { color: #047857; font-weight: 700; }
  .sablon .s-renkli .s-zarar { color: #b91c1c; font-weight: 700; }
  .sablon .s-renkli .s-anlik th, .sablon .s-renkli .s-anlik td { font-weight: 800; font-size: 10pt; }
  .sablon .s-renkli tr.s-kar-zemin th, .sablon .s-renkli tr.s-kar-zemin td { background: #d1fae5 !important; color: #065f46 !important; }
  .sablon .s-renkli tr.s-zarar-zemin th, .sablon .s-renkli tr.s-zarar-zemin td { background: #fee2e2 !important; color: #991b1b !important; }
  .sablon .s-renkli .s-sag-toplam th { color: var(--s-ana); }
  .sablon .s-renkli .s-baslik2 { color: var(--s-ana); border-bottom: 1pt solid var(--s-ana); padding-bottom: 1mm; margin-left: 0; }
  .sablon .s-renkli .s-maliyet { width: 100%; margin-left: 0; }
  .sablon .s-renkli .s-grup-baslik td { background: var(--s-acik); color: var(--s-ana); border-bottom: 0; }
  .sablon .s-renkli .s-maliyet tbody tr:nth-child(even) td { background: transparent; }
  .sablon .s-renkli .s-top td, .sablon .s-renkli .s-top th { background: var(--s-acik); color: var(--s-ana); }
  .sablon .s-maliyet-kolon { column-count: 2; column-gap: 5mm; }
  .sablon .s-maliyet-kolon .s-maliyet { break-inside: avoid; margin-bottom: 3mm; width: 100%; display: table; }
  .sablon .s-grup-top { float: right; }
  .sablon .s-maliyet-top { width: 50%; margin-left: auto; }
  .sablon .s-maliyet td:first-child { white-space: normal; }
  /* Tir bazli kar / zarar raporu */
  .sablon .s-kz-ust { display: flex; align-items: center; gap: 4mm; margin-bottom: 3mm; border-bottom: 1pt solid var(--s-ana); padding-bottom: 2mm; }
  .sablon .s-kz-logo { width: 45mm; }
  .sablon .s-kz-orta { flex: 1; text-align: center; }
  .sablon .s-kz-firma { font-size: 10pt; }
  .sablon .s-kz-baslik { font-size: 15pt; font-weight: 800; color: var(--s-ana); margin: 1mm 0; }
  .sablon .s-kz-aralik { font-size: 11pt; font-weight: 700; }
  .sablon .s-kz-sag { width: 30mm; text-align: right; font-size: 8.5pt; }
  .sablon .s-kz-tablo td, .sablon .s-kz-tablo th { padding: .5mm 1.2mm; font-size: 8.5pt; }
  .sablon .s-kz-tablo thead { display: table-header-group; }
  .sablon .s-kz-tablo i, .sablon .s-kz-ozet i { color: #888; font-weight: 400; }
  .sablon .s-kz-ozet { width: 60%; margin: 3mm 0 0 auto; }
  .sablon .s-kz-ozet td, .sablon .s-kz-ozet th { padding: .8mm 2mm; font-weight: 700; }
}

/* Ihracat: para birimine gore gruplar */
.doviz-grup { margin: 0 0 16px; }
.doviz-grup h3 { font-size: 14px; margin: 0 0 8px; color: var(--soluk); font-weight: 600; }
.doviz-grup .tablo-kutu { max-height: none; }
.doviz-grup td.sag, .doviz-grup th.sag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doviz-grup tr.ara-toplam td { font-weight: 700; border-top: 2px solid var(--cizgi, #ccc); }
.doviz-grup p { margin: 6px 0 0; font-size: 12px; }
.doviz-grup td small { display: block; font-size: 11.5px; color: var(--vurgu); font-weight: 500; }

/* ---------------------------------------------------------------- Ana sayfa (kullanicinin kutucuklari) */
.yan-ana { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--cizgi); }
.yan-ana a { font-weight: 700; }
.ana-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; border-radius: 16px; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: 6px; }
.ana-izgara.birakiliyor { outline-color: var(--ana); background: var(--ana-acik); }
.ana-kutu {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 172px; padding: 18px 18px 16px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge);
  color: var(--murekkep); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ana-kutu:hover { border-color: color-mix(in srgb, var(--grup) 55%, var(--cizgi)); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
.ana-kutu:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; }
.ana-kutu.suruklenen { opacity: .45; }
.ana-kutu.hedef { box-shadow: -4px 0 0 0 var(--ana); }
.ana-ikon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 6px;
  color: var(--grup); background: color-mix(in srgb, var(--grup) 14%, var(--kart)); }
.ana-ikon .ikon { width: 26px; height: 26px; }
.ana-kutu b { font-size: 17px; letter-spacing: -.01em; }
.ana-kutu small { color: var(--soluk); font-size: 13.5px; line-height: 1.4; }
.ana-ac { margin-top: auto; padding-top: 8px; color: var(--ana-metin); font-weight: 700; font-size: 14px; }
.ana-sil { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--soluk); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.ana-sil .ikon { width: 16px; height: 16px; }
.ana-kutu:hover .ana-sil, .ana-sil:focus-visible { opacity: 1; }
.ana-sil:hover { background: var(--zebra); color: var(--vurgu); }
@media (hover: none) { .ana-sil { opacity: 1; } }
.ana-birak { min-height: 172px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center;
  border: 2px dashed var(--cizgi); border-radius: 14px; color: var(--soluk); font-size: 13.5px; }
.ana-birak .ikon { width: 26px; height: 26px; }
body.ekran-surukleniyor .ana-birak { border-color: var(--ana); color: var(--ana-metin); background: var(--ana-acik); }
.ana-ipucu { margin-top: 14px; }
.ana-ekle { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.ana-ekle-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ana-ekle-oge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart); cursor: pointer; font-weight: 600; }
.ana-ekle-oge .ikon { width: 18px; height: 18px; color: var(--grup); }
.ana-ekle-oge:hover { border-color: var(--grup); }
@media (max-width: 600px) { .ana-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ana-kutu { min-height: 150px; padding: 14px; } .ana-kutu small { display: none; } .ana-birak { min-height: 150px; } }

/* ---------------------------------------------------------------- Donusum Ozeti ve Cari Grup Bakiye */
:root { --dn-ham: #c2410c; --dn-ana: #155eef; --dn-kalan: #64748b; --dn-ihracat: #2563eb; --dn-ic: #0d9488; --dn-yan: #7c3aed; --dn-uyari: #b54708; --dn-iyi: #067647; --dn-cubuk1: #2f63d6; --dn-cubuk2: #94a3b8; }
:root[data-tema="koyu"] { --dn-ham: #ea580c; --dn-ana: #7aa7ff; --dn-ihracat: #3b82f6; --dn-ic: #14b8a6; --dn-yan: #a78bfa; --dn-uyari: #fbbf24; --dn-iyi: #4ade80; --dn-cubuk2: #475569; }
.dn-bolumler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.dn-bolum { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 16px; margin-bottom: 14px; min-width: 0; box-shadow: var(--golge); }
.dn-bolum.genis { grid-column: 1 / -1; }
.dn-bolum h2, .cg-gruplar h2 { font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dn-etiket { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--dn-yan) 14%, var(--kart)); color: var(--dn-yan); }
.dn-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dn-kart { background: var(--zemin); border: 1px solid var(--cizgi); border-top: 4px solid var(--c); border-radius: 12px; padding: 13px 15px; display: grid; gap: 3px; min-width: 0; }
.dn-kart > span { color: var(--soluk); font-size: 13px; }
.dn-kart strong { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-variant-numeric: tabular-nums; }
.dn-kart small { color: var(--soluk); font-size: 12.5px; }
.dn-deger { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.dn-tutar { margin-left: auto; white-space: nowrap; color: var(--soluk); font-size: 12.5px; display: grid; justify-items: end; }
.dn-tutar i { font-style: normal; }
.dn-tutar b { font-size: clamp(1rem, 1.7vw, 1.25rem); color: var(--c); font-variant-numeric: tabular-nums; }
.dn-cubuk { display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin: 14px 0 4px; font-weight: 700; font-size: 12.5px; background: var(--zebra); }
.dn-cubuk div { display: flex; align-items: center; padding: 0 10px; color: #fff; white-space: nowrap; overflow: hidden; }
.dn-tablo { overflow-x: auto; margin-top: 12px; }
.dn-tablo table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: calc(var(--tablo-boyut) - 1px); font-weight: var(--tablo-kalinlik); }
.dn-tablo th, .dn-tablo td { padding: calc(var(--satir) * .55) 7px; border-bottom: 1px solid var(--cizgi); text-align: right; white-space: nowrap; }
.dn-tablo th { background: var(--baslik-zemin); font-size: .85em; color: var(--soluk); }
.dn-tablo th:first-child, .dn-tablo td:first-child { text-align: left; white-space: normal; }
.dn-tablo tfoot td { font-weight: 800; background: var(--ana-acik); }
.dn-pay { display: inline-block; height: 8px; border-radius: 4px; background: var(--dn-cubuk1); vertical-align: middle; margin-right: 6px; opacity: .75; }
.dn-not { font-size: 13px; color: var(--dn-uyari); margin: 10px 0 0; }
.dn-uyari { padding: 12px; border-radius: 8px; background: color-mix(in srgb, var(--dn-uyari) 14%, var(--kart)); color: var(--dn-uyari); margin: 0; }
.dn-bos { color: var(--soluk); margin: 8px 0 0; }
.dn-depolar { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.dn-depo td:first-child { min-width: 130px; }
.dn-depo h3 { margin: 0; font-size: 15.5px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-left: 8px; border-left: 4px solid var(--c); }
.dn-depo h3 small { color: var(--soluk); font-weight: 600; font-size: 13px; }
tr.dn-ac { cursor: pointer; }
tr.dn-ac:hover td { background: var(--zebra); }
.dn-ok { display: inline-block; width: 1.1em; color: var(--soluk); transition: transform .15s; }
tr.dn-ac[aria-expanded="true"] .dn-ok { transform: rotate(90deg); }
tr.dn-detay > td { padding: 4px 0 10px 18px !important; background: var(--zemin); }
.dn-palet { font-size: .9em; }
.dn-palet th { background: transparent !important; }
.dn-palet td.dn-karma { text-align: left; white-space: normal; color: var(--soluk); }
.dn-mut td small { display: block; color: var(--soluk); font-size: .8em; font-weight: 400; }
.dn-mut tr.kalin td { font-weight: 800; }
.dn-mut tr.soluk td { color: var(--soluk); }
.dn-mut tfoot tr.fark td { color: var(--dn-uyari); }
.dn-mut tfoot tr.ayrinti td { font-weight: 500; background: var(--kart); }
.dn-liste { margin-top: 10px; }
.dn-liste summary { cursor: pointer; color: var(--ana-metin); font-weight: 650; }
@media (max-width: 1100px) { .dn-bolumler { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .dn-bolum { padding: 12px; } .dn-cubuk { font-size: 10.5px; } .dn-depolar { grid-template-columns: minmax(0, 1fr); } }

.cg-gruplar { margin-bottom: 14px; }
.cg-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cg-kart { text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--kart); border: 1px solid var(--cizgi); border-top: 4px solid var(--c);
  border-radius: 12px; padding: 13px 15px; display: grid; gap: 3px; align-content: start; box-shadow: var(--golge); }
.cg-kart.genel strong { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.cg-kart:hover { border-color: var(--c); }
.cg-kart.secili { outline: 2px solid var(--c); outline-offset: 1px; background: color-mix(in srgb, var(--c) 7%, var(--kart)); }
.cg-kart > span { color: var(--soluk); font-size: 13px; font-weight: 600; }
.cg-kart strong { font-size: clamp(1.15rem, 2vw, 1.45rem); font-variant-numeric: tabular-nums; }
.cg-kart strong.eksi { color: var(--vurgu); }
.cg-kart em { font-style: normal; font-size: 12.5px; color: var(--soluk); display: flex; justify-content: space-between; gap: 10px; }
.cg-kart em b { color: var(--murekkep); font-variant-numeric: tabular-nums; font-weight: 600; }
.ozet b + b { margin-top: 0; font-size: clamp(1rem, 2.4vw, 1.2rem); }

/* Donusum yazdirma */
@media print {
  .yazdir-sayfa .dn-yazdir { font-size: 9pt; color: #000; }
  .yazdir-sayfa .dn-bolumler { display: block; }
  .yazdir-sayfa .dn-bolum { break-inside: avoid; border: 1px solid #999; box-shadow: none; padding: 8pt; margin-bottom: 8pt; background: #fff; }
  .yazdir-sayfa .dn-bolum h2 { font-size: 11pt; margin-bottom: 6pt; }
  .yazdir-sayfa .dn-kartlar { grid-template-columns: repeat(4, 1fr); gap: 6pt; }
  .yazdir-sayfa .dn-kart { background: #fff; padding: 5pt 7pt; }
  .yazdir-sayfa .dn-kart strong { font-size: 12pt; }
  .yazdir-sayfa .dn-tutar b { font-size: 10pt; }
  .yazdir-sayfa .dn-cubuk { height: 18pt; font-size: 7.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .yazdir-sayfa .dn-tablo table { font-size: 8pt; }
  .yazdir-sayfa .dn-tablo th, .yazdir-sayfa .dn-tablo td { padding: 2pt 4pt; }
  .yazdir-sayfa .dn-pay, .yazdir-sayfa .dn-ok { display: none; }
  .yazdir-sayfa .dn-depolar { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .yazdir-sayfa .dn-etiket { border: 1px solid #999; background: none; color: #333; }
}

.cg-sekmeler { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.cg-sekme { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--ana-metin); cursor: pointer; }
.cg-sekme.secili { background: var(--ana); border-color: var(--ana); color: #fff; }
.cg-ozet .ozet b.iyi { color: var(--dn-iyi); }
.cg-ozet .ozet b.kotu { color: var(--vurgu); }
.cg-ozet .ozet small { display: block; color: var(--soluk); font-size: 12.5px; margin-top: 4px; }

/* Ihracat: maliyeti yapilmamis faturalar */
/* Maliyeti yapilmamis fatura / faturalanmamis yukleme: hafif pembe zemin + solda pembe serit (koyu temada biraz daha belirgin) */
:root { --pembe: #ec4899; --pembe-zemin: 10%; --pembe-uzeri: 17%; }
:root[data-tema="koyu"] { --pembe: #f472b6; --pembe-zemin: 17%; --pembe-uzeri: 25%; }
tr.maliyetsiz td, .kart.maliyetsiz { background: color-mix(in srgb, var(--pembe) var(--pembe-zemin), var(--kart)) !important; }
tr.maliyetsiz:hover td { background: color-mix(in srgb, var(--pembe) var(--pembe-uzeri), var(--kart)) !important; }
tr.maliyetsiz td:first-child { box-shadow: inset 4px 0 0 var(--pembe); }
.kart.maliyetsiz { box-shadow: inset 4px 0 0 var(--pembe); }
.mk-gec { color: var(--vurgu); font-weight: 700; }
.dn-tablo td.dn-karma { text-align: left; white-space: normal; min-width: 200px; max-width: 460px; font-size: .88em; }


.hizli-tarih { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.hizli-tarih .dugme.secili { background: var(--ana); border-color: var(--ana); color: #fff; }
/* Ozet tablolarinda uzun basliklar alt satira insin; tablo saga tasmasin */
.dn-tablo th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.dn-tablo td:first-child { min-width: 120px; white-space: normal; }

/* Acik / koyu tema dugmesi: her sayfada sag alt kose */
.tema-dugme { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 60; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--cizgi); background: var(--kart); color: var(--murekkep); font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .15); display: grid; place-items: center; opacity: .85; }
.tema-dugme:hover { opacity: 1; }
@media print { .tema-dugme { display: none !important; } }

/* ---------------------------------------------------------------- Canli Pano (TV): temadan bagimsiz koyu zemin */
.pano { --p-zemin: #0b1220; --p-kart: #141d30; --p-cizgi: #24314d; --p-yazi: #f1f5f9; --p-soluk: #93a3bd;
  --dn-ham: #fb923c; --dn-iyi: #34d399; --dn-uyari: #fbbf24; --dn-ihracat: #60a5fa; --dn-ic: #2dd4bf; --dn-yan: #c084fc;
  background: var(--p-zemin); color: var(--p-yazi); border-radius: 16px; padding: clamp(12px, 1.6vw, 28px); font-size: clamp(14px, 1.05vw, 22px); }
.pano-ust { display: flex; align-items: center; gap: 1.2em; margin-bottom: 1em; flex-wrap: wrap; }
.pano-logo { height: 3.2em; max-width: 12em; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px 8px; }
.pano-baslik { flex: 1; min-width: 12em; }
.pano-baslik h1 { margin: 0; font-size: 2em; letter-spacing: -.01em; }
.pano-baslik span { color: var(--p-soluk); }
.pano-saat { font-size: 3.2em; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pano-araclar { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.pano-araclar .dugme { background: var(--p-kart); color: var(--p-yazi); border-color: var(--p-cizgi); }
.pano-canli { color: var(--p-soluk); font-size: .85em; font-weight: 700; display: inline-flex; align-items: center; gap: .4em; }
.pano-canli i { width: .7em; height: .7em; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); animation: pano-nabiz 1.6s infinite; }
@keyframes pano-nabiz { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 70% { box-shadow: 0 0 0 .6em rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.pano-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: .8em; margin-bottom: .9em; }
.pano-kutu { background: var(--p-kart); border: 1px solid var(--p-cizgi); border-top: .3em solid var(--c); border-radius: 14px; padding: .8em 1em; display: grid; gap: .15em; }
.pano-kutu > span { color: var(--p-soluk); font-size: .9em; font-weight: 600; }
.pano-kutu strong { font-size: 2.4em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--c); }
.pano-kutu strong small { font-size: .45em; color: var(--p-soluk); font-weight: 600; }
.pano-kutu > small { color: var(--p-soluk); font-size: .85em; }
/* Iki sutun: sol mal kabul, sag palet */
.pano-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; align-items: start; }
.pano-iki.tek { grid-template-columns: minmax(0, 1fr); }
.pano-sutun { display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.pano-sutun .pano-kutular { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }
.pano-sutun-baslik { color: var(--p-soluk); font-weight: 800; font-size: .95em; text-transform: uppercase; letter-spacing: .08em; padding-left: .2em; border-left: .3em solid #3b82f6; padding: .1em .6em; }
.pano-sutun:first-child .pano-sutun-baslik { border-left-color: var(--dn-uyari); }
.pano-kaydir { max-height: 22em; overflow-y: auto; scrollbar-width: thin; }
body.tv-modu .pano-kaydir { max-height: 40vh; }
.pano-kaydir .pano-tablo th { position: sticky; top: 0; background: var(--p-kart); }
.pano-adet { display: inline-block; margin-left: .4em; padding: 0 .55em; border-radius: 999px; background: var(--p-cizgi); color: var(--p-yazi); font-size: .8em; letter-spacing: 0; }
.pano-orta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; margin-bottom: .9em; }
.pano-bolum { background: var(--p-kart); border: 1px solid var(--p-cizgi); border-radius: 14px; padding: .9em 1.1em; min-width: 0; }
.pano-bolum h2 { margin: 0 0 .7em; font-size: 1.15em; color: var(--p-soluk); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pano-cubuk { display: grid; grid-template-columns: minmax(6em, 11em) 1fr auto; align-items: center; gap: .7em; margin-bottom: .55em; }
.pano-cubuk-ad { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-cubuk-yol { height: 1.3em; background: #0f172a; border-radius: 999px; overflow: hidden; }
.pano-cubuk-dolu { height: 100%; background: var(--dn-uyari); border-radius: 999px; overflow: hidden; transition: width .6s; }
.pano-cubuk-dolu.mavi { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.pano-cubuk-islenen { height: 100%; background: var(--dn-iyi); transition: width .6s; }
.pano-cubuk-deger { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pano-cubuk-deger small { display: block; color: var(--p-soluk); font-weight: 600; font-size: .75em; }
.pano-lejant { color: var(--p-soluk); font-size: .8em; margin-top: .4em; display: flex; align-items: center; gap: .4em; }
.pano-lejant i { width: .9em; height: .9em; border-radius: 3px; display: inline-block; }
.pano-lejant i.l1 { background: var(--dn-iyi); } .pano-lejant i.l2 { background: var(--dn-uyari); margin-left: .8em; }
.pano-tablo { width: 100%; border-collapse: collapse; font-size: .95em; }
.pano-tablo th { text-align: left; color: var(--p-soluk); font-weight: 600; font-size: .85em; padding: .3em .5em; border-bottom: 1px solid var(--p-cizgi); background: transparent; position: static; }
.pano-tablo td { padding: .45em .5em; border-bottom: 1px solid var(--p-cizgi); background: transparent !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.pano-tablo tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--p-cizgi); }
.pano-tablo .s { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pano-soluk { color: var(--p-soluk); }
.pano-gec { color: #f87171 !important; }
.pano-iyi { color: var(--dn-iyi) !important; }
.pano-satir { cursor: pointer; }
.pano-nokta { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em; vertical-align: middle; }
.pano-nokta.iyi { background: var(--dn-iyi); } .pano-nokta.bekle { background: var(--dn-uyari); }
.pano-tablo td { max-width: 11em; }
.pano-satir:hover td { background: rgba(96, 165, 250, .12) !important; }
.pano-bekle { color: var(--dn-uyari) !important; }
.pano-bos { color: var(--p-soluk); margin: .4em 0; }
@media (max-width: 900px) { .pano-orta, .pano-iki { grid-template-columns: minmax(0, 1fr); } .pano-saat { font-size: 2.2em; } }
/* Açık temada Canlı Pano da açık (koyu temada ve tam ekran TV modunda koyu kalır) */
:root:not([data-tema="koyu"]) body:not(.tv-modu) .pano {
  --p-zemin: #ffffff; --p-kart: #f8fafc; --p-cizgi: #e2e8f0; --p-yazi: #0f172a; --p-soluk: #64748b;
  --dn-ham: #ea580c; --dn-iyi: #059669; --dn-uyari: #d97706; --dn-ihracat: #2563eb; --dn-ic: #0d9488; --dn-yan: #9333ea;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
:root:not([data-tema="koyu"]) body:not(.tv-modu) .pano-cubuk-yol { background: #e2e8f0; }
:root:not([data-tema="koyu"]) body:not(.tv-modu) .pano-gec { color: #dc2626 !important; }
:root:not([data-tema="koyu"]) body:not(.tv-modu) .pano-logo { border: 1px solid var(--p-cizgi); }
/* Telefon: tablolar bölümün içinde yana kayar (sayfa taşmaz), rakam kutuları ve çubuklar küçülür */
.pano-bolum, .pano-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pano { overflow-x: hidden; }
@media (max-width: 600px) {
  .pano { padding: .7em; }
  .pano-baslik h1 { font-size: 1.5em; }
  .pano-saat { font-size: 1.8em; }
  .pano-kutular, .pano-sutun .pano-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
  .pano-kutu { padding: .6em .7em; min-width: 0; }
  .pano-kutu strong { font-size: 1.6em; overflow-wrap: anywhere; }
  .pano-bolum { padding: .7em .75em; }
  .pano-tablo { font-size: .85em; }
  .pano-tablo th, .pano-tablo td { padding: .35em .35em; }
  .pano-tablo td { max-width: 8.5em; }
  .pano-cubuk { grid-template-columns: minmax(4em, 7em) minmax(3em, 1fr) auto; gap: .45em; }
  .pano-cubuk-deger { font-size: .9em; }
}
/* Tam ekran (TV): sadece pano */
body.tv-modu .yan, body.tv-modu .yan-perde, body.tv-modu .govde .ust, body.tv-modu [data-yonetici-cubuk], body.tv-modu [data-sure-uyari],
body.tv-modu [data-ipucu], body.tv-modu .tema-dugme, body.tv-modu [data-duzenle] { display: none !important; }
body.tv-modu .duzen { display: block; }
body.tv-modu main { max-width: none; padding: 0; }
body.tv-modu .pano { border-radius: 0; min-height: 100vh; }
body.tv-modu { background: #0b1220; }

.dn-tablo th.sol { text-align: left; }
/* Sol menu varken tema dugmesi menunun altinda; yuzen dugme sadece yonetim ve giris sayfalarinda */
body:has(.yan) .tema-dugme, body:has(.menu [data-tema-sec]) .tema-dugme { display: none; }
.yan-alt [data-tema-sec] { white-space: nowrap; }
.yan-alt .kim { flex: 1; text-align: right; }
.yan-surum { padding: 4px 8px 6px; font-size: 11.5px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.menu [data-tema-sec] { margin-left: auto; }
.menu [data-tema-sec] + .kim { margin-left: 8px; }
.pano-git { cursor: pointer; transition: border-color .15s, transform .15s; }
.pano-git:hover { border-color: var(--c, #60a5fa); transform: translateY(-2px); }
.pano-bolum.pano-git:hover { border-color: #60a5fa; transform: none; }