/* XtroEngine CRM — sıkı, tam genişlik yönetim arayüzü. */
:root {
  --zemin: #f4f5f2; --yuzey: #fff; --cizgi: #dcdfd6; --metin: #1c1f1a; --soluk: #646b5e;
  --vurgu: #1f5f4a; --vurgu-acik: #e3efe9; --kirmizi: #a8321f; --sari: #8a6400; --yesil: #2d6b2d;
  font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; background: var(--zemin); color: var(--metin); line-height: 1.4; }
a { color: var(--vurgu); }
small { color: var(--soluk); }
[hidden] { display: none !important; }
h2 { font-size: 1rem; margin: .2rem 0 .6rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
button, select, input { font: inherit; }

.logo { font-weight: 600; letter-spacing: .01em; }
.ust { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .5rem 1rem; background: var(--metin); color: #eef0ea; position: sticky; top: 0; z-index: 5; }
@media (max-width: 600px) { .ust { padding: .4rem .6rem; gap: .3rem .6rem; } .sekmeler { order: 3; width: 100%; } .tablo thead th { top: 5rem; } .filtre select { flex: 1 1 45%; } }
#firmalar { overflow-x: auto; }
.sekmeler button { background: none; border: 0; color: #c9cec2; padding: .35rem .7rem; border-radius: 4px; cursor: pointer; }
.sekmeler button[aria-selected="true"] { background: #3a4036; color: #fff; }
.baglanti { margin-left: auto; font-size: .85rem; color: #c9cec2; }
.baglanti[data-durum="ok"]::before { content: "● "; color: #6fcf6f; }
.baglanti[data-durum="kopuk"]::before { content: "● "; color: #e0705c; }
.cikis button { background: none; border: 1px solid #5a6154; color: #eef0ea; border-radius: 4px; padding: .25rem .6rem; cursor: pointer; }

main { padding: .8rem 1rem 2rem; }
.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; padding: .8rem; min-width: 0; }
.iki { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .8rem; }
@media (max-width: 900px) { .iki { grid-template-columns: 1fr; } }

.sayaclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.sayac { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; padding: .5rem .7rem; }
.sayac b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.sayac span { color: var(--soluk); font-size: .85rem; }

.akis { list-style: none; margin: 0; padding: 0; max-height: 65vh; overflow: auto; }
.akis li { padding: .3rem 0; border-bottom: 1px solid var(--cizgi); display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.akis li.yeni { animation: belir 1.2s ease-out; }
@keyframes belir { from { background: var(--vurgu-acik); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .akis li.yeni { animation: none; } }
time { color: var(--soluk); font-size: .8rem; font-variant-numeric: tabular-nums; }
.aktor { font-size: .8rem; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 3px; padding: 0 .3rem; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .35rem 0; border-bottom: 1px solid var(--cizgi); overflow-wrap: anywhere; }
.bos { color: var(--soluk); font-style: italic; }

.tablo { width: 100%; border-collapse: collapse; background: var(--yuzey); }
.tablo th, .tablo td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo thead th { font-size: .8rem; color: var(--soluk); font-weight: 600; position: sticky; top: 2.6rem; background: var(--yuzey); }
.tablo.tikla tbody tr { cursor: pointer; }
.tablo.tikla tbody tr:hover { background: var(--vurgu-acik); }
.tablo.dik th { width: 32%; color: var(--soluk); font-weight: 500; }
.kirmizi { color: var(--kirmizi); font-weight: 600; }

.filtre { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.filtre input, .filtre select { padding: .35rem .5rem; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--yuzey); }
.filtre input { flex: 1 1 260px; }
.sayi { color: var(--soluk); margin-left: auto; }

.rozet { display: inline-block; font-size: .75rem; padding: 0 .35rem; border-radius: 3px; border: 1px solid var(--cizgi); }
.rozet.Yüksek { color: var(--kirmizi); border-color: currentColor; }
.rozet.Orta { color: var(--sari); border-color: currentColor; }
.rozet.Düşük { color: var(--soluk); }
.rozet.kirmizi { color: #fff; background: var(--kirmizi); border-color: var(--kirmizi); }

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: .5rem; overflow-x: auto; align-items: start; padding-bottom: .5rem; }
.kolon { background: #e9ebe4; border: 1px solid var(--cizgi); border-radius: 6px; padding: .4rem; min-height: 60vh; }
.kolon.ustunde { outline: 2px dashed var(--vurgu); }
.kolon h3 { margin: .1rem .2rem .5rem; font-size: .85rem; display: flex; justify-content: space-between; }
.kolon h3 span { color: var(--soluk); font-variant-numeric: tabular-nums; }
.kartlar { display: flex; flex-direction: column; gap: .35rem; max-height: 75vh; overflow-y: auto; }
.kkart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 4px; padding: .4rem .5rem; cursor: grab; display: flex; flex-direction: column; gap: .1rem; }
.kkart:hover { border-color: var(--vurgu); }

.cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--yuzey); border-left: 1px solid var(--cizgi); box-shadow: -6px 0 18px rgba(0,0,0,.08); overflow-y: auto; padding: 1rem 1.2rem 2rem; z-index: 10; }
.cekmece .kapat { position: absolute; top: .4rem; right: .6rem; border: 0; background: none; font-size: 1.6rem; cursor: pointer; color: var(--soluk); }
.cekmece h2 { font-size: 1.2rem; margin-right: 2rem; }
.alt { color: var(--soluk); margin: -.3rem 0 .6rem; }
.asama-sec { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.asama-sec select { padding: .25rem .4rem; }

.giris { display: grid; place-items: center; min-height: 100vh; }
.giris-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; padding: 1.5rem; width: min(340px, 92vw); display: flex; flex-direction: column; gap: .8rem; }
.giris-kutu h1 { font-size: 1.1rem; margin: 0; }
.giris-kutu label { display: flex; flex-direction: column; gap: .25rem; color: var(--soluk); font-size: .9rem; }
.giris-kutu input { padding: .45rem .5rem; border: 1px solid var(--cizgi); border-radius: 4px; color: var(--metin); }
.giris-kutu button { padding: .5rem; background: var(--vurgu); color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.giris-hata { color: var(--kirmizi); margin: 0; }

.aciklama { color: var(--soluk); margin: 0 0 .8rem; max-width: 70rem; }
.onay-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--vurgu); border-radius: 6px; padding: .7rem .9rem; margin-bottom: .7rem; display: flex; flex-direction: column; gap: .45rem; max-width: 70rem; }
.onay-kart.denetimde { border-left-color: var(--kirmizi); }
.onay-kart header { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.onay-kart p { margin: 0; }
.onay-kart label { display: flex; flex-direction: column; gap: .2rem; color: var(--soluk); font-size: .85rem; }
.onay-kart input, .onay-kart textarea { border: 1px solid var(--cizgi); border-radius: 4px; padding: .4rem .5rem; color: var(--metin); width: 100%; }
.onay-kart textarea { resize: vertical; line-height: 1.45; }
.denetim { margin: 0; padding-left: 1.1rem; color: var(--kirmizi); }
.dugmeler { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dugmeler button { padding: .35rem .8rem; border-radius: 4px; border: 1px solid var(--vurgu); background: var(--vurgu); color: #fff; cursor: pointer; }
.dugmeler button.ikincil { background: none; color: var(--kirmizi); border-color: var(--kirmizi); }
.dugmeler button:disabled { opacity: .45; cursor: not-allowed; }
.o-sonuc { color: var(--soluk); font-size: .85rem; }
.sekmeler .rozet { border-color: #5a6154; color: inherit; margin-left: .2rem; }

.fikir { border: 1px solid var(--cizgi); border-radius: 4px; padding: .4rem .6rem; margin-bottom: .4rem; }
.fikir.secildi { border-color: var(--vurgu); }
.fikir.reddedildi summary { color: var(--soluk); text-decoration: line-through; }
.fikir summary { cursor: pointer; }
.fikir p { margin: .35rem 0; }
.hakem { border-left: 3px solid var(--cizgi); padding: .1rem .6rem; margin: .35rem 0; }
.hakem.muhalif { border-left-color: var(--kirmizi); }
.hakem.savunucu { border-left-color: var(--yesil); }
.hakem.bas { border-left-color: var(--metin); background: var(--zemin); }

#ag-kap { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; overflow: hidden; }
.ag-dugum { cursor: pointer; }
.ag-etiket { font-size: 11px; fill: var(--soluk); font-weight: 600; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.ag-ad { font-size: 9.5px; fill: var(--metin); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.ag-lejant { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .5rem .7rem; border-top: 1px solid var(--cizgi); font-size: .8rem; color: var(--soluk); }
.ag-lejant span { display: inline-flex; align-items: center; gap: .3rem; }
.ag-lejant i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ag-lejant b { width: 16px; border-top: 2px solid; display: inline-block; }
.huni-ad { font-size: 11px; fill: var(--soluk); }
.huni-n { font-size: 11px; fill: var(--metin); font-variant-numeric: tabular-nums; }

#huni h2 small, #huni h2 small { font-weight: 400; color: var(--soluk); font-size: .8rem; }
.havuz { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.havuz-kart { text-align: left; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 6px; padding: .5rem .7rem; cursor: pointer; }
.havuz-kart:hover { border-color: var(--vurgu); }
.havuz-kart b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.havuz-kart span { color: var(--soluk); font-size: .85rem; }
.kolon { min-height: 40vh; }
.kkart .sonraki { color: var(--vurgu); }
.daha { margin-top: .3rem; border: 1px dashed var(--cizgi); background: none; border-radius: 4px; padding: .3rem; cursor: pointer; color: var(--vurgu); }