/* azatech – MÜŞTERİ / TAKİP / DAİRE EKRANLARI, ÜÇÜNCÜ TUR (5 Kasım): yerleşimi değiştiren bileşenler
 * musteri-tasarim.css'ten SONRA yüklenir. Bu dosyadaki bileşenler JS şablonlarının yeni yerleşimine aittir:
 *   mp-*  Müşteri yan paneli (profil başlığı, hızlı eylemler, sekmeler)   mt-*  Müşteri listesi hücre bileşenleri
 *   gv-*  Görevlerim zaman grupları                                       dl-*  Daireler (araç çubuğu, tablo kutusu, dar ekran kartı)
 *   fp-*  Fırsat panosu: tek satır araç çubuğu + tek şerit özet
 * İçerik/işlev değişmez. Renk üretmez: tema değişkenleri. Aralık --b-*, denetim yüksekliği 36 px. Mantıksal özellikler (RTL). */

/* ================= MÜŞTERİLER: yerleşim ================= */
#app main[data-v="crmMus"] .crm-body { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1181px) { #app main[data-v="crmMus"] .crm-body:has(> .crm-side) { grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px); } }

/* liste hücre bileşenleri */
.mt-etiket { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 550; line-height: 18px; color: var(--ink); background: var(--mt-yuzey, color-mix(in srgb, var(--navy) 4%, var(--panel, #fff))); border: 1px solid var(--mt-cizgi, var(--line)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.mt-yok { color: var(--mut); font-size: 12.5px; }
.mt-sor { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.mt-sor-av { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); }

/* ================= MÜŞTERİ YAN PANELİ: profil kartı ================= */
#app main[data-v="crmMus"] .crm-side { padding: 0; display: flex; flex-direction: column; overflow: auto; }
#app main[data-v="crmMus"] .crm-side .mp-bas { display: flex; align-items: center; gap: var(--b-3, 12px); margin: 0; padding: var(--b-4, 16px); border-bottom: 0; }
#app main[data-v="crmMus"] .crm-side .mp-bas .kisi-av { width: 48px; height: 48px; font-size: 16px; }
#app main[data-v="crmMus"] .crm-side .mp-kim { flex: 1; min-width: 0; display: grid; gap: 2px; }
#app main[data-v="crmMus"] .crm-side .mp-kim b { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
#app main[data-v="crmMus"] .crm-side .mp-alt { display: flex; flex-wrap: wrap; gap: 0 var(--b-3, 12px); font-size: 13px; color: var(--mut); }
#app main[data-v="crmMus"] .crm-side .mp-alt a { color: var(--navy); text-decoration: none; font-weight: 550; }
#app main[data-v="crmMus"] .crm-side .mp-alt a:hover { text-decoration: underline; }
#app main[data-v="crmMus"] .crm-side .mp-bas .link { align-self: flex-start; }
#app main[data-v="crmMus"] .crm-side .mp-hizli { margin: 0; padding: 0 var(--b-4, 16px) var(--b-3, 12px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px); }
#app main[data-v="crmMus"] .crm-side .mp-hizli .primary { flex: 1 1 auto; justify-content: center; }
#app main[data-v="crmMus"] .crm-side .mp-sek { display: flex; gap: 0; padding: 0 var(--b-2, 8px); border-bottom: 1px solid var(--mt-cizgi, var(--line)); overflow-x: auto; scrollbar-width: none; }
#app main[data-v="crmMus"] .crm-side .mp-sek::-webkit-scrollbar { display: none; }
#app main[data-v="crmMus"] .crm-side .mp-sek button { flex: none; height: 40px; padding: 0 var(--b-3, 12px); border: 0; border-radius: 0; background: none; color: var(--mut); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
#app main[data-v="crmMus"] .crm-side .mp-sek button:hover { color: var(--ink); }
#app main[data-v="crmMus"] .crm-side .mp-sek button.on { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
#app main[data-v="crmMus"] .crm-side .mp-bol { padding: var(--b-4, 16px); }
#app main[data-v="crmMus"] .crm-side .mp-bol[hidden] { display: none; }
#app main[data-v="crmMus"] .crm-side .mp-bol > h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#app main[data-v="crmMus"] .crm-side .mp-bol form { display: grid; gap: var(--b-3, 12px); }
#app main[data-v="crmMus"] .crm-side .cf2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b-2, 8px); }
#app main[data-v="crmMus"] .crm-side .cfld { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
#app main[data-v="crmMus"] .crm-side :is(input, select, textarea) { width: 100%; box-sizing: border-box; min-width: 0; font-size: 14px; font-weight: 400; color: var(--ink); }
#app main[data-v="crmMus"] .crm-side :is(input, select) { height: var(--mt-h, 36px); }
#app main[data-v="crmMus"] .crm-side .cr-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-2, 8px); }
#app main[data-v="crmMus"] .crm-side .cr-l li { display: grid; gap: 2px; padding: var(--b-2, 8px) var(--b-3, 12px); border: 1px solid var(--mt-cizgi, var(--line)); border-radius: var(--mt-r, 8px); background: var(--mt-yuzey, transparent); font-size: 13px; }
#app main[data-v="crmMus"] .crm-side .cr-l li > span, #app main[data-v="crmMus"] .crm-side .cr-l li > small { color: var(--mut); }
#app main[data-v="crmMus"] .crm-side .cr-fb { display: grid; gap: 2px; color: inherit; text-decoration: none; }
#app main[data-v="crmMus"] .crm-side .cs-detay { margin: 0; padding: var(--b-3, 12px) var(--b-4, 16px) var(--b-4, 16px); border-top: 1px solid var(--mt-cizgi, var(--line)); }

/* ================= GÖREVLERİM: zaman grupları ================= */
.gv-liste { display: grid; gap: var(--b-4, 16px); }
.gv-grup { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu, 12px); box-shadow: var(--g-1); overflow: hidden; }
.gv-grup > h3 { display: flex; align-items: center; gap: var(--b-2, 8px); margin: 0; padding: var(--b-3, 12px) var(--b-4, 16px); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); background: var(--mt-yuzey, transparent); border-bottom: 1px solid var(--mt-cizgi, var(--line)); }
.gv-grup > h3 span { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0; color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); }
.gv-gec > h3 { color: var(--red, #b42318); }
.gv-gec > h3 span { color: var(--red, #b42318); background: color-mix(in srgb, var(--red, #b42318) 10%, var(--panel, #fff)); }
.gv-grup ul { list-style: none; margin: 0; padding: 0; }
.gv-satir { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--b-3, 12px); padding: var(--b-3, 12px) var(--b-4, 16px); border-bottom: 1px solid var(--mt-cizgi, var(--line)); }
.gv-satir:last-child { border-bottom: 0; }
.gv-satir:hover { background: var(--mt-vurgu, transparent); }
.gv-satir.late { box-shadow: inset 3px 0 0 var(--red, #b42318); }
html[dir="rtl"] .gv-satir.late { box-shadow: inset -3px 0 0 var(--red, #b42318); }
.gv-satir .gr-tur { justify-self: start; }
.gv-ana { display: grid; gap: 2px; min-width: 0; }
.gv-ana b { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.gv-ana small { color: var(--mut); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-tarih { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mut); white-space: nowrap; }
.gv-satir.late .gv-tarih { color: var(--red, #b42318); font-weight: 600; }
.gv-satir .gr-durum { min-width: 70px; }
.gv-satir .acts { display: inline-flex; align-items: center; gap: var(--b-2, 8px); white-space: nowrap; }
@media (max-width: 860px) {
  .gv-satir { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tur ana ana" "tarih durum acts"; row-gap: var(--b-2, 8px); }
  .gv-satir .gr-tur { grid-area: tur; } .gv-satir .gv-ana { grid-area: ana; } .gv-satir .gv-tarih { grid-area: tarih; } .gv-satir .gr-durum { grid-area: durum; min-width: 0; } .gv-satir .acts { grid-area: acts; justify-self: end; }
}

/* ================= FIRSAT PANOSU: tek satır araç çubuğu, tek şerit özet ================= */
#app main[data-v="crmMus"] .fp-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 var(--b-3, 12px); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu, 12px); box-shadow: var(--g-1); overflow: hidden; }
#app main[data-v="crmMus"] .fp-ozet .stat { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: var(--b-3, 12px) var(--b-4, 16px); border-inline-end: 1px solid var(--mt-cizgi, var(--line)); min-width: 0; text-align: start; }
#app main[data-v="crmMus"] .fp-ozet .stat:last-child { border-inline-end: 0; }
#app main[data-v="crmMus"] .fp-ozet .stat > b { font-size: 20px; line-height: 1.25; }
#app main[data-v="crmMus"] .fp-ozet .stat > b .coklu { font-size: 14px; gap: 0 var(--b-2, 8px); }
#app main[data-v="crmMus"] .fp-ozet .stat > span:last-child { font-size: 12px; color: var(--mut); }
#app main[data-v="crmMus"] .fp-ozet button.stat { cursor: pointer; font: inherit; }
#app main[data-v="crmMus"] .fp-ozet button.stat.on { background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); }
@media (min-width: 1100px) {
  #app main[data-v="crmMus"] .fp-arac { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--b-2, 8px); margin: 0 0 var(--b-3, 12px); }
  #app main[data-v="crmMus"] .fp-arac > input[type=search] { flex: 0 1 220px; min-width: 160px; max-width: none; order: 1; }
  #app main[data-v="crmMus"] .fp-arac .fp-suz { flex: 1 1 auto; order: 2; flex-wrap: nowrap; min-width: 0; }
  #app main[data-v="crmMus"] .fp-arac .fp-suz > select { flex: 1 1 0; min-width: 0; max-width: 200px; height: var(--mt-h, 36px); padding-inline: 10px 26px; font-size: 13px; text-overflow: ellipsis; }
  #app main[data-v="crmMus"] .fp-arac .fp-gor { order: 3; flex: none; }
}
#app main[data-v="crmMus"] .fp-kabuk .fp-arac > input[type=search] { padding-inline-start: 40px; background-position: 14px 50%; }
html[dir="rtl"] #app main[data-v="crmMus"] .fp-kabuk .fp-arac > input[type=search] { padding-inline-start: 12px; padding-inline-end: 40px; background-position: calc(100% - 14px) 50%; }

/* ================= DAİRELER (kullanıcı listesi): kutu içinde, sayfa akışında ================= */
#app main.list-app { display: block; height: auto; min-height: 0; padding-block: var(--b-3, 12px) var(--b-5, 24px); padding-inline: var(--sayfa-px, 16px); box-sizing: border-box; }
#app main.list-app .prev-banner { margin: 0 0 var(--b-3, 12px); }
#app main.list-app .dl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); margin: 0 0 var(--b-3, 12px); padding: var(--b-2, 8px) var(--b-3, 12px); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu, 12px); box-shadow: var(--g-1); }
#app main.list-app .dl-bar input[type=search] { flex: 0 1 260px; width: auto; min-width: 150px; height: var(--mt-h, 36px); }
#app main.list-app .dl-durum { display: flex; flex-wrap: wrap; gap: var(--b-2, 8px); }
#app main.list-app .dl-durum .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--b-3, 12px); border-radius: 999px; font-size: 13px; }
#app main.list-app .dl-durum .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
#app main.list-app .dl-durum .chip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.dl-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); flex: none; }
.chip.st-ok .dl-nokta, .dl-rozet.st-ok { --dl-ton: var(--green, #1a7f4b); }
.chip.st-opt .dl-nokta, .dl-rozet.st-opt { --dl-ton: var(--amber, #a86a00); }
.chip.st-res .dl-nokta, .dl-rozet.st-res { --dl-ton: color-mix(in srgb, var(--navy) 50%, var(--amber, #a86a00)); }
.chip.st-sold .dl-nokta, .dl-rozet.st-sold { --dl-ton: var(--navy); }
.dl-nokta { background: var(--dl-ton, var(--mut)); }
.dl-rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 18px; white-space: nowrap; color: var(--dl-ton, var(--ink)); background: color-mix(in srgb, var(--dl-ton, var(--navy)) 11%, var(--panel, #fff)); }
#app main.list-app .lcount { font-size: 13px; color: var(--mut); }
#app main.list-app .dl-kart { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu, 12px); box-shadow: var(--g-1); overflow: hidden; }
#app main.list-app .list-wrap { max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); min-height: 220px; overflow: auto; background: transparent; }
#app main.list-app .ltab { border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
#app main.list-app .ltab thead th { position: sticky; top: 0; z-index: 2; background: var(--mt-yuzey, var(--panel, #fff)); color: var(--mut); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--mt-cizgi, var(--line)); white-space: nowrap; cursor: pointer; }
#app main.list-app .ltab td { padding: 11px 12px; border-bottom: 1px solid var(--mt-cizgi, var(--line)); color: var(--ink); background: var(--panel, #fff); }
#app main.list-app .ltab td.bbn { font-weight: 700; }
#app main.list-app .ltab td.st-ok, #app main.list-app .ltab td.st-opt, #app main.list-app .ltab td.st-res, #app main.list-app .ltab td.st-sold { color: var(--ink); font-weight: 400; }
#app main.list-app .ltab tbody tr:hover td { background: var(--mt-vurgu, var(--panel, #fff)); }
#app main.list-app .ltab th:first-child, #app main.list-app .ltab td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; }
#app main.list-app .ltab thead th:first-child { z-index: 3; }
#app main.list-app .ltab th:first-child, #app main.list-app .ltab td:first-child { box-shadow: 1px 0 0 var(--mt-cizgi, var(--line)); }
html[dir="rtl"] #app main.list-app .ltab th:first-child, html[dir="rtl"] #app main.list-app .ltab td:first-child { box-shadow: -1px 0 0 var(--mt-cizgi, var(--line)); }
#app main.list-app .ltab th.n, #app main.list-app .ltab td.n { text-align: end; }
#app main.list-app .loading { padding: var(--b-5, 24px); text-align: center; color: var(--mut); }
.dl-kartlar { display: none; }
@media (max-width: 760px) {
  #app main.list-app { padding-inline: var(--b-3, 12px); }
  #app main.list-app .dl-kart { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  #app main.list-app .dl-kart .list-wrap { display: none; }
  #app main.list-app .dl-kartlar { display: grid; gap: var(--b-3, 12px); }
  #app main.list-app .dl-bar input[type=search] { flex: 1 1 100%; }
  .dl-k { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu, 12px); box-shadow: var(--g-1); padding: var(--b-3, 12px) var(--b-4, 16px); }
  .dl-k > header { display: flex; align-items: center; gap: var(--b-2, 8px); margin-bottom: var(--b-2, 8px); }
  .dl-k-bb { font-size: 18px; font-weight: 700; color: var(--ink); margin-inline-end: auto; }
  .dl-k dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-2, 8px) var(--b-3, 12px); margin: 0; }
  .dl-k dl > div { min-width: 0; }
  .dl-k dt { font-size: 11.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; }
  .dl-k dd { margin: 0; font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere; }
  .dl-kartlar .none { text-align: center; color: var(--mut); padding: var(--b-5, 24px); }
}

/* ================= TEKLİF OLUŞTUR / SATIŞ FORMU: yan kart, m² özeti ================= */
#app main #stBody.sf { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: var(--b-4, 16px); padding-block: var(--b-2, 8px) var(--b-5, 24px); align-items: start; }
@media (max-width: 860px) { #app main #stBody.sf { grid-template-columns: minmax(0, 1fr); } }
#app main #stBody.sf > aside.ctl { border: 1px solid var(--line); border-radius: var(--mt-kutu, 12px); background: var(--panel, #fff); box-shadow: var(--g-1); padding: var(--b-4, 16px); box-sizing: border-box; }
#app main #stBody.sf .sf-ctl .bb input { font-size: 14px; height: 40px; }
.sbz-ozet { display: none; padding: 0; overflow: hidden; }
.sbz .sbz-ozet { display: block; }
.sbz-ozet > h4 { margin: 0; padding: var(--b-3, 12px) var(--b-4, 16px); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); background: var(--mt-yuzey, transparent); border-bottom: 1px solid var(--mt-cizgi, var(--line)); }
.sbz-kahraman { display: grid; gap: 2px; padding: var(--b-3, 12px) var(--b-4, 16px); border-bottom: 1px solid var(--mt-cizgi, var(--line)); }
.sbz-kahraman small { font-size: 12px; color: var(--mut); font-weight: 600; }
.sbz-kahraman b { font-size: 16px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.sbz-grup { padding: var(--b-3, 12px) var(--b-4, 16px); border-bottom: 1px solid var(--mt-cizgi, var(--line)); }
.sbz-grup h5 { margin: 0 0 var(--b-2, 8px); font-size: 12px; font-weight: 650; color: var(--navy); }
.sbz-ozet .sbz-fark { margin: 0; padding: var(--b-2, 8px) var(--b-4, 16px) var(--b-3, 12px); border: 0; }
.m2box { display: grid; gap: var(--b-1, 4px); padding: var(--b-3, 12px) var(--b-4, 16px); border: 1px solid var(--mt-cizgi, var(--line)); border-radius: var(--mt-r, 8px); background: var(--mt-yuzey, transparent); font-size: 13px; }
.m2box:empty { display: none; }
.m2box > b { font-size: 12.5px; color: var(--mut); font-weight: 650; }
.m2box > div { display: flex; justify-content: space-between; gap: var(--b-3, 12px); }
.m2box > div > span { color: var(--mut); }
.m2box > div > b { font-variant-numeric: tabular-nums; }
.m2box > small { color: var(--mut); font-size: 11.5px; }