/* Caramell CRM Web — DevExpress Office 2013 görünümüne yakın */
:root {
  --font: "Segoe UI", Tahoma, Arial, sans-serif;
  --arka: #f0f0f0;
  --panel: #ffffff;
  --kenar: #c6c6c6;
  --kenar-acik: #e1e1e1;
  --mavi: #2b579a;
  --mavi-acik: #d5e5f7;
  --mavi-secim: #cce8ff;
  --mavi-secim-kenar: #99d1ff;
  --metin: #222;
  --metin-soluk: #666;
  --baslik: #444;
  --kirmizi: #c0392b;
  --yesil: #2e7d32;
  --sari: #fff4ce;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: var(--font); font-size: 12px; color: var(--metin); background: var(--arka); }
.gizli { display: none !important; }
button, input, select, textarea { font-family: inherit; font-size: 12px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  border: 1px solid #abadb3; background: #fff; padding: 3px 5px; height: 24px; outline: none; }
textarea { height: auto; }
input:focus, select:focus, textarea:focus { border-color: #3399ff; }
input[readonly], input:disabled, select:disabled { background: #f4f4f4; color: #555; }
.btn { border: 1px solid #adadad; background: linear-gradient(#fdfdfd, #e6e6e6); padding: 3px 12px; height: 24px; cursor: pointer; border-radius: 2px; white-space: nowrap; }
.btn:hover { background: linear-gradient(#f4f9ff, #d9e9fb); border-color: #7eb4ea; }
.btn:active { background: #c4e0fb; }
.btn:disabled { color: #999; cursor: default; background: #ececec; }
.btn.ana { background: linear-gradient(#4a86d6, #2b579a); color: #fff; border-color: #1f4478; }
.btn.ana:hover { background: linear-gradient(#5a96e6, #3567aa); }
.btn.kucuk { height: 20px; padding: 0 8px; font-size: 11px; }
.btn.tehlike:hover { background: linear-gradient(#ffe9e6, #f7c9c3); border-color: #d9534f; }
.bosluk { flex: 1; }

/* ---- giriş ---- */
.giris-ekran { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b579a, #1c3c6b); }
.giris-kutu { width: 340px; background: #fff; border: 1px solid #999; box-shadow: 0 8px 30px rgba(0,0,0,.35); padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 6px; }
.giris-baslik { font-size: 22px; font-weight: 600; color: var(--mavi); }
.giris-alt { color: var(--metin-soluk); margin-bottom: 10px; border-bottom: 1px solid var(--kenar-acik); padding-bottom: 8px; }
.giris-kutu label { margin-top: 6px; color: #444; }
.giris-kutu label.onay { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.giris-mesaj { min-height: 18px; color: var(--kirmizi); font-weight: 600; }
.giris-kutu .btn.ana { margin-top: 6px; height: 30px; font-size: 13px; }

/* ---- ana pencere ---- */
.ana { display: flex; flex-direction: column; height: 100%; }
.baslik-cubugu { display: flex; align-items: center; gap: 10px; background: var(--mavi); color: #fff; padding: 0 12px; height: 30px; font-weight: 600; }
.baslik-cubugu .logo { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; background: #fff; color: var(--mavi); border-radius: 3px; font-weight: 800; }
.baslik-cubugu .kullanici { font-weight: 400; opacity: .9; }
.baslik-cubugu .btn.kucuk { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }
.serit { background: #fff; border-bottom: 1px solid var(--kenar); }
.serit-sekmeler { display: flex; gap: 2px; padding: 4px 8px 0; background: var(--arka); }
.serit-sekme { padding: 4px 14px; cursor: pointer; text-transform: uppercase; font-size: 11.5px; color: #444; border: 1px solid transparent; border-bottom: none; }
.serit-sekme:hover { color: var(--mavi); }
.serit-sekme.aktif { background: #fff; color: var(--mavi); border-color: var(--kenar); font-weight: 600; }
.serit-icerik { display: flex; gap: 6px; padding: 6px 10px 4px; min-height: 92px; }
.serit-grup { display: flex; flex-direction: column; border-right: 1px solid var(--kenar-acik); padding-right: 8px; margin-right: 2px; }
.serit-grup:last-child { border-right: none; }
.serit-grup-ogeler { display: flex; gap: 2px; flex: 1; }
.serit-grup-baslik { text-align: center; color: #777; font-size: 11px; padding-top: 3px; }
.serit-buton { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 78px; padding: 6px 4px 4px; cursor: pointer; border: 1px solid transparent; border-radius: 3px; text-align: center; line-height: 1.15; color: #333; }
.serit-buton:hover { background: #eaf3fd; border-color: #b7d6f5; }
.serit-buton .ikon { width: 32px; height: 32px; margin-bottom: 5px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 14px; }
.ikon.model { background: #4a7ebb; } .ikon.kesim { background: #d9822b; } .ikon.nakis { background: #8e44ad; } .ikon.dikim { background: #27ae60; }
.ikon.paket { background: #b8860b; } .ikon.dashboard { background: #16a085; } .ikon.tanim { background: #7f8c8d; } .ikon.rapor { background: #2c3e50; }
.ikon.kod { background: #34495e; } .ikon.kullanici { background: #16a085; } .ikon.yetki { background: #8e44ad; } .ikon.maliyet { background: #c0392b; } .ikon.siparis { background: #3498db; } .ikon.giris { background: #2ecc71; } .ikon.cikis { background: #e74c3c; } .ikon.stok { background: #f39c12; } .ikon.hareket { background: #95a5a6; } .ikon.sayim { background: #9b59b6; } .ikon.maas { background: #1f7a4d; } .ikon.personel { background: #2980b9; } .ikon.calisma { background: #d35400; } .ikon.izin { background: #f1c40f; color: #333; }

/* ---- belge alanı (MDI sekmeler) ---- */
.belge-alani { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.belge-sekmeler { display: flex; gap: 1px; background: #dcdcdc; padding: 3px 4px 0; border-bottom: 1px solid var(--kenar); min-height: 26px; overflow-x: auto; }
.belge-sekme { display: flex; align-items: center; gap: 8px; padding: 3px 10px; background: #e8e8e8; border: 1px solid var(--kenar); border-bottom: none; cursor: pointer; white-space: nowrap; }
.belge-sekme.aktif { background: #fff; font-weight: 600; color: var(--mavi); }
.belge-sekme .kapat { color: #888; font-size: 13px; line-height: 1; }
.belge-sekme .kapat:hover { color: var(--kirmizi); }
.belgeler { flex: 1; position: relative; min-height: 0; background: #fff; }
.belge { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.belge.gizli { display: none; }
.hosgeldin { display: flex; align-items: center; justify-content: center; height: 100%; color: #888; }
.hosgeldin h2 { color: var(--mavi); font-weight: 600; }
.durum-cubugu { display: flex; gap: 10px; align-items: center; height: 22px; padding: 0 10px; background: var(--mavi); color: #fff; font-size: 11px; }

/* ---- liste formu ---- */
.arac-cubugu { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: var(--arka); border-bottom: 1px solid var(--kenar); flex-wrap: wrap; }
.arac-cubugu .ayrac { width: 1px; height: 20px; background: var(--kenar); margin: 0 4px; }
.arac-cubugu label { color: #555; margin-left: 4px; }
.arac-cubugu input[type=date] { width: 120px; }
.arac-cubugu .ara { width: 220px; }
.liste-bilgi { color: #666; margin-left: auto; }
.grid-kap { flex: 1; overflow: auto; position: relative; }
table.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
table.grid th { position: sticky; top: 0; background: #f7f7f7; border-right: 1px solid var(--kenar-acik); border-bottom: 1px solid var(--kenar); padding: 4px 6px; text-align: left; font-weight: 600; color: #333; white-space: nowrap; cursor: pointer; user-select: none; z-index: 2; }
table.grid th.sayi, table.grid th.para { text-align: right; }
table.grid th .sira { color: var(--mavi); font-size: 10px; margin-left: 3px; }
table.grid tr.filtre th { top: 26px; background: #fff; padding: 2px 3px; cursor: default; }
table.grid tr.filtre input { width: 100%; height: 20px; border: 1px solid #ddd; padding: 1px 4px; font-size: 11px; }
table.grid td { border-right: 1px solid #ececec; border-bottom: 1px solid #ececec; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
table.grid td.sayi, table.grid td.para { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.evet { text-align: center; }
table.grid tbody tr:nth-child(even) { background: #fafafa; }
table.grid tbody tr:hover { background: #eef5fc; }
table.grid tbody tr.secili { background: var(--mavi-secim) !important; outline: 1px solid var(--mavi-secim-kenar); }
table.grid tbody tr.grup-baslik td { background: #e9eef5; font-weight: 600; color: var(--mavi); cursor: pointer; }
table.grid tfoot td { position: sticky; bottom: 0; background: #f3f3f3; border-top: 1px solid var(--kenar); font-weight: 600; z-index: 2; }
.grid-bos { padding: 30px; color: #888; text-align: center; }
.grid-kap.duzenlenebilir td.duz { cursor: text; }
.grid-kap.duzenlenebilir td.duz:hover { background: #fff8dc; }
.grid-kap td input.hucre { width: 100%; height: 20px; border: 1px solid #3399ff; padding: 0 3px; font-size: 12px; }
td[class*="durum-"] span.rozet { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.durum-Tamamlandı span.rozet, .durum-Tamamlandi span.rozet { background: #dcfce7; color: #166534; }
.durum-Devam span.rozet, .durum-Sürüyor span.rozet { background: #dbeafe; color: #1e40af; }
.durum-Kesim span.rozet { background: #ede9fe; color: #5b21b6; }
.durum-Hazırlanıyor span.rozet, .durum-Hazirlaniyor span.rozet { background: #fef3c7; color: #92400e; }
.durum-Bekliyor span.rozet { background: #f3f4f6; color: #4b5563; }
.durum-Sipariş span.rozet { background: #dbeafe; color: #1e40af; }
.durum-İptal span.rozet { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.durum-Aktif span.rozet { background: #dcfce7; color: #166534; }
.durum-Pasif span.rozet { background: #f3f4f6; color: #6b7280; }

/* ---- pencereler (form diyalogları) ---- */
.pencere-perde { position: fixed; inset: 0; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; z-index: 50; }
.pencere { background: var(--arka); border: 1px solid #7a7a7a; box-shadow: 0 10px 40px rgba(0,0,0,.4); display: flex; flex-direction: column; max-width: 96vw; max-height: 94vh; min-width: 420px; }
.pencere.genis { width: 1180px; height: 760px; }
.pencere.orta { width: 760px; } .pencere.kucuk { width: 420px; }
.pencere-baslik { display: flex; align-items: center; background: var(--mavi); color: #fff; padding: 5px 10px; font-weight: 600; cursor: move; }
.pencere-baslik .kapat { margin-left: auto; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.pencere-govde { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pencere-alt { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--kenar); background: #e9e9e9; align-items: center; }
.pencere-alt .uyari { color: var(--yesil); font-weight: 600; }
.pencere-alt .hata { color: var(--kirmizi); font-weight: 600; }

/* group box */
.grup { border: 1px solid var(--kenar); background: #fff; padding: 8px 10px 10px; position: relative; }
.grup > .grup-baslik { position: absolute; top: -8px; left: 8px; background: #fff; padding: 0 4px; color: var(--mavi); font-weight: 600; font-size: 11px; }
.grup.dolgu { background: var(--arka); }
.alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 14px; }
.alan { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; min-height: 26px; }
.alan label { color: #444; text-align: right; }
.alan input, .alan select, .alan textarea { width: 100%; }
.alan.genis { grid-column: 1 / -1; }
.alan .onay { display: flex; align-items: center; gap: 6px; }
.alan.zorunlu label::after { content: " *"; color: var(--kirmizi); }

/* sekmeli panel */
.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--kenar); background: var(--arka); padding: 3px 4px 0; }
.sekme { padding: 4px 12px; border: 1px solid transparent; border-bottom: none; cursor: pointer; color: #444; }
.sekme.aktif { background: #fff; border-color: var(--kenar); color: var(--mavi); font-weight: 600; }
.sekme-icerik { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid var(--kenar); border-top: none; }
.sekme-sayfa { display: none; flex: 1; flex-direction: column; min-height: 0; }
.sekme-sayfa.aktif { display: flex; }
.yatay { display: flex; gap: 8px; min-height: 0; flex: 1; }
.yatay > * { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.mini-arac { display: flex; gap: 4px; padding: 4px; background: var(--arka); border-bottom: 1px solid var(--kenar-acik); align-items: center; }
.mini-arac .baslik { font-weight: 600; color: var(--mavi); margin-right: 6px; }
.kucuk-grid { flex: 1; overflow: auto; min-height: 120px; }
.kucuk-grid table.grid th { top: 0; }
.kucuk-grid tr.filtre { display: none; }

/* bildirim */
.bildirim { position: fixed; right: 16px; bottom: 34px; background: #333; color: #fff; padding: 8px 14px; border-radius: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 99; max-width: 460px; }
.bildirim.hata { background: var(--kirmizi); }
.bildirim.tamam { background: var(--yesil); }

/* dashboard */
.dash { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 8px; overflow: auto; }
.kart-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.kart { background: #fff; border: 1px solid var(--kenar); padding: 8px 12px; min-width: 150px; }
.kart .buyuk { font-size: 22px; font-weight: 700; color: var(--mavi); }
.kart .kucuk { color: #777; font-size: 11px; }

.secim-listesi { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; border: 1px solid var(--kenar); background: #fff; padding: 4px; }
.secim-listesi label { display: flex; gap: 6px; align-items: center; padding: 2px 4px; }
.secim-listesi label:hover { background: #eef5fc; }
.ipucu { color: #777; font-size: 11px; }
.rozet { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #e0e0e0; color: #333; }
.rozet.yeni { background: var(--sari); color: #7a5c00; }

.kur-baglanti { margin-top: 12px; font-size: 11px; color: var(--mavi); text-decoration: none; text-align: center; }
.kur-baglanti:hover { text-decoration: underline; }

/* aksesuar tablosu */
.aks-tablo-kap { flex: 1; overflow: auto; border: 1px solid var(--kenar); background: #fff; min-height: 260px; }
table.aks-tablo { border-collapse: collapse; }
table.aks-tablo th { background: #f0f0f0; border: 1px solid #d0d0d0; padding: 2px 6px; font-weight: 600; color: #555; min-width: 90px; text-align: center; position: sticky; top: 0; }
table.aks-tablo th.no { min-width: 28px; position: sticky; left: 0; z-index: 2; }
table.aks-tablo td { border: 1px solid #d8d8d8; padding: 2px 5px; min-width: 90px; height: 20px; white-space: nowrap; outline: none; }
table.aks-tablo td:focus { outline: 2px solid #217346; background: #f3fff5; }
.dosya-satir { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--kenar-acik); }
.dosya-satir a { flex: 1; color: var(--mavi); text-decoration: none; }
.secim-bolum { background: #e9eef5; color: var(--mavi); font-weight: 600; padding: 3px 8px; margin-top: 4px; position: sticky; top: 0; }
table.onizleme td, table.onizleme th { padding: 2px 4px; white-space: nowrap; }
table.onizleme select.hatali, table.onizleme input.hatali { border-color: var(--kirmizi); background: #fff3f3; }
table.onizleme select.yaklasik { border-color: #d97706; background: #fffbeb; }

/* ---------- Raporlar ---------- */
.kpiler { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: var(--arka); border-bottom: 1px solid var(--kenar-acik); }
.kpi { background: #fff; border: 1px solid var(--kenar-acik); border-radius: 6px; padding: 6px 12px; min-width: 150px; }
.kpi .ad { font-size: 11px; color: #666; }
.kpi .deger { font-size: 18px; font-weight: 700; margin-top: 1px; font-variant-numeric: tabular-nums; color: var(--mavi); }
table.grid td.asim { background: #fde8e4; color: #7a2416; font-weight: 600; }
.zc-ozet { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; margin-bottom: 8px; }
.zc { display: grid; grid-template-columns: 200px 1fr 80px; gap: 6px 10px; align-items: center; font-size: 12px; }
.zc .ray { position: relative; height: 22px; background: #f1f4f3; border-radius: 4px; }
.zc .cubuk { position: absolute; top: 3px; height: 16px; border-radius: 3px; background: var(--mavi); opacity: .85; }
.zc .cubuk.asim { background: var(--kirmizi); }
.zc .cubuk.acik { background: repeating-linear-gradient(45deg, #e8961e, #e8961e 6px, #f8c86a 6px, #f8c86a 12px); }
.zc .gun { text-align: right; font-variant-numeric: tabular-nums; }
.zc .gun.eksi { color: var(--kirmizi); font-weight: 700; }
.zc .eksen { grid-column: 2; display: flex; justify-content: space-between; color: #777; font-size: 11px; }
.zc .bos { color: #999; font-size: 11px; }
.oz { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; padding: 12px; }
.oz .kutu { background: #fff; border: 1px solid var(--kenar-acik); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.oz .kutu.genis { grid-column: 1 / -1; }
.oz h4 { margin: 0 0 8px; font-size: 13px; color: var(--mavi); }
.oz h4 small { color: #777; font-weight: 400; margin-left: 6px; }
table.oz-tablo { border-collapse: collapse; width: 100%; font-size: 12px; }
table.oz-tablo th { text-align: left; font-size: 11px; padding: 4px 8px; background: var(--arka); border-bottom: 1px solid var(--kenar-acik); }
table.oz-tablo th.sayi, table.oz-tablo td.sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.oz-tablo td { padding: 3px 8px; border-bottom: 1px solid #f0f0f0; }
table.oz-tablo td.eksi { color: var(--kirmizi); font-weight: 600; }
table.oz-tablo tr.tiklanir { cursor: pointer; } table.oz-tablo tr.tiklanir:hover td { background: #f5f9ff; }
.oz .cizgi { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.oz .cizgi .ad { width: 150px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz .cizgi .bar { flex: 1; min-width: 40px; height: 13px; background: #f1f4f3; border-radius: 3px; overflow: hidden; }
.oz .cizgi .bar i { display: block; height: 100%; background: var(--mavi); }
.oz .cizgi .bar i.k { background: var(--kirmizi); } .oz .cizgi .bar i.t { background: #e8961e; }
.oz .cizgi .d { text-align: right; font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; }
.oz .not { margin-top: 6px; }
.oz .buyuk { font-size: 22px; font-weight: 700; color: var(--mavi); } .oz .kucuk { color: #777; font-size: 11px; }
.oz .sira { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.oz .sira > div { background: #f7f9f8; border-radius: 6px; padding: 8px 10px; }
.kirinti a { color: var(--mavi); text-decoration: none; } .kirinti a:hover { text-decoration: underline; }
.oz .maliyet-ana .sira { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.oz .maliyet-ana .sira > div.tiklanir { cursor: pointer; border: 1px solid var(--mavi-secim-kenar); background: #f2f7ff; } .oz .maliyet-ana .sira > div.tiklanir:hover { background: var(--mavi-secim); }