/* azatech – MÜŞTERİ / TAKİP / ENVANTER EKRANLARI TASARIMI (5 Kasım, ikinci tur: gerçek yeniden tasarım) * Kapsam: Müşteriler, Fırsat panosu, Görevlerim, Takvim, Fiyat listesi, Envanter, Bina şeması, Soğuyan müşteriler. * İçerik (alan, düğme, sütun, metin) DEĞİŞMEZ; yalnız görünüm ve yerleşim. Renk tanımlamaz: tema değişkenleri (--navy, --line, --panel, --ink, --mut ...). * Ölçek: aralık 4·8·12·16·24 (--b-*), köşe 8 / 12, yazı 12·13·14·16 (--yz-*), denetim yüksekliği 36 px. * Mantıksal özellikler (inline-start/end) kullanılır: RTL (AR/FA) ters çevrilir. Sınıf adı: reklam engelleyici listelerine takılmaz. */ #app main { --mt-h: 36px; --mt-r: 8px; --mt-kutu: var(--r-lg, 12px); --mt-yuzey: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff)); --mt-cizgi: color-mix(in srgb, var(--navy) 9%, var(--line)); --mt-vurgu: color-mix(in srgb, var(--navy) 7%, var(--panel, #fff)); } /* ================= ARAÇ ÇUBUĞU: tek kutu, tek satır ================= */ #app main:is([data-v="crmMus"], [data-v="crmLead"], [data-v="takvim"], [data-v="admin"]) :is(.tk-bar, .inv-bar) { --x: 1; } #app main[data-v="crmMus"] .tk-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: 0; } #app main[data-v="crmMus"] .tk-bar .crm-seg { flex: 0 0 auto; margin: 0; } #app main[data-v="crmMus"] .tk-bar > input[type=search] { flex: 1 1 260px; max-width: 420px; height: var(--mt-h); } #app main[data-v="crmMus"] .tk-bar > .help { margin: 0; font-size: 13px; color: var(--mut); } #app main[data-v="crmMus"] .tk-bar > :is(#yetimTemizle, [id*="ilen"], .ghost):last-child { margin-inline-start: auto; } /* ================= MÜŞTERİLER: liste ================= */ #app main[data-v="crmMus"] .crm-body { gap: var(--b-4, 16px); } @media (min-width: 1181px) { #app main[data-v="crmMus"] .crm-body { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px); } } /* orta genişlikte (tablet / küçük dizüstü) tablo tüm genişliği alır; ayrıntı paneli seçilince listenin üstünde açılır, seçim yokken görünmez */ @media (max-width: 1180px) { #app main[data-v="crmMus"] .crm-body:has(> .crm-side) { grid-template-columns: minmax(0, 1fr); } #app main[data-v="crmMus"] .crm-body > .crm-side { order: -1; position: static; max-height: none; } #app main[data-v="crmMus"] .crm-body > .crm-side:has(> .side-empty) { display: none; } } @media (min-width: 861px) and (max-width: 1180px) { /* panel altta olduğundan tablo tam genişlikte: "Kayıt" sütunu geri gelir */ #app main[data-v="crmMus"] .crm-body table.tk :is(th, td):nth-child(6) { display: table-cell; } #app main[data-v="crmMus"] .crm-body table.tk td.mail .cell-trunc, #app main[data-v="crmMus"] .crm-body table.tk td.sor .cell-trunc { max-width: 22ch; } } #app main[data-v="crmMus"] .tbl-x { border: 1px solid var(--line); border-radius: var(--mt-kutu); background: var(--panel, #fff); box-shadow: var(--g-1); } #app main[data-v="crmMus"] table.tk { border: 0; border-radius: 0; box-shadow: none; } #app main[data-v="crmMus"] table.tk thead th { background: var(--mt-yuzey); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); padding-block: 10px; border-bottom: 1px solid var(--mt-cizgi); } #app main[data-v="crmMus"] table.tk td { padding-block: 11px; border-bottom: 1px solid var(--mt-cizgi); font-size: 13.5px; vertical-align: middle; } #app main[data-v="crmMus"] table.tk tbody tr:last-child td { border-bottom: 0; } #app main[data-v="crmMus"] table.tk tbody tr[data-id]:hover td { background: var(--mt-vurgu); } #app main[data-v="crmMus"] table.tk tbody tr.on td { background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); } #app main[data-v="crmMus"] table.tk tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--navy); } html[dir="rtl"] #app main[data-v="crmMus"] table.tk tbody tr.on td:first-child { box-shadow: inset -3px 0 0 var(--navy); } #app main[data-v="crmMus"] table.tk td.kisi-ad { position: relative; padding-inline-start: 56px; min-width: 22ch; } #app main[data-v="crmMus"] table.tk td.kisi-ad > .kisi-av { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); } #app main[data-v="crmMus"] table.tk td.kisi-ad b { font-weight: 600; color: var(--ink); } #app main[data-v="crmMus"] table.tk td.tel, #app main[data-v="crmMus"] table.tk td.kayit { font-variant-numeric: tabular-nums; } #app main[data-v="crmMus"] table.tk td.mail, #app main[data-v="crmMus"] table.tk td.kayit, #app main[data-v="crmMus"] table.tk td.sor { color: var(--mut); } #app main[data-v="crmMus"] table.tk td:not(.kisi-ad):not(.tel):not(.kayit) .cell-trunc, #app main[data-v="crmMus"] table.tk td:not(.kisi-ad) .cell-2 { color: inherit; } /* avatar (ad baş harfleri) */ .kisi-av { --ton: var(--navy); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ton); background: color-mix(in srgb, var(--ton) 12%, var(--panel, #fff)); border: 1px solid color-mix(in srgb, var(--ton) 22%, transparent); } .kisi-av[data-t="1"] { --ton: var(--green, #1a7f4b); } .kisi-av[data-t="2"] { --ton: var(--amber, #a86a00); } .kisi-av[data-t="3"] { --ton: color-mix(in srgb, var(--navy) 60%, var(--red, #b42318)); } .kisi-av[data-t="4"] { --ton: color-mix(in srgb, var(--navy) 55%, var(--green, #1a7f4b)); } /* ================= YAN PANEL ================= */ #app main[data-v="crmMus"] .crm-side { border-radius: var(--mt-kutu); padding: var(--b-4, 16px); box-shadow: var(--g-1); } #app main[data-v="crmMus"] .crm-side .side-h { display: flex; align-items: center; gap: var(--b-3, 12px); margin: 0 0 var(--b-3, 12px); padding-bottom: var(--b-3, 12px); border-bottom: 1px solid var(--mt-cizgi); } #app main[data-v="crmMus"] .crm-side .side-h .kisi-av { width: 40px; height: 40px; font-size: 14px; } #app main[data-v="crmMus"] .crm-side .side-h b { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; } #app main[data-v="crmMus"] .crm-side .side-h .link { color: var(--mut); font-size: 12.5px; } #app main[data-v="crmMus"] .crm-side dl { grid-template-columns: 92px minmax(0, 1fr); gap: 8px 12px; margin: 0 0 var(--b-3, 12px); } #app main[data-v="crmMus"] .crm-side dd { font-weight: 550; overflow-wrap: anywhere; } #app main[data-v="crmMus"] .crm-side h4 { margin: var(--b-4, 16px) 0 var(--b-2, 8px); padding-top: var(--b-3, 12px); border-top: 1px solid var(--mt-cizgi); font-size: 11.5px; letter-spacing: .06em; color: var(--mut); } #app main[data-v="crmMus"] .crm-side .side-a { display: flex; flex-wrap: wrap; gap: var(--b-2, 8px); margin-top: var(--b-4, 16px); } #app main[data-v="crmMus"] .crm-side .cs-detay { margin-top: var(--b-4, 16px); display: grid; gap: 6px; } #app main[data-v="crmMus"] .crm-side .cs-detay .primary { display: flex; justify-content: center; align-items: center; min-height: var(--mt-h); text-decoration: none; } #app main[data-v="crmMus"] .crm-side :is(input, select, textarea) { border-radius: var(--mt-r); } #app main[data-v="crmMus"] .side-empty { display: grid; place-items: center; min-height: 140px; text-align: center; padding: var(--b-5, 24px) var(--b-4, 16px); border: 1px dashed var(--line); border-radius: var(--mt-kutu); background: transparent; font-size: 13.5px; } /* ================= GÖREVLERİM ================= */ #app main[data-v="crmGor"] .tbl-x { border: 1px solid var(--line); border-radius: var(--mt-kutu); background: var(--panel, #fff); box-shadow: var(--g-1); } #app main[data-v="crmGor"] table.tk { border: 0; box-shadow: none; border-radius: 0; } #app main[data-v="crmGor"] table.tk thead th { background: var(--mt-yuzey); font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); padding-block: 10px; border-bottom: 1px solid var(--mt-cizgi); } #app main[data-v="crmGor"] table.tk td { padding-block: 10px; border-bottom: 1px solid var(--mt-cizgi); vertical-align: middle; font-size: 13.5px; } #app main[data-v="crmGor"] table.tk tbody tr:last-child td { border-bottom: 0; } #app main[data-v="crmGor"] table.tk tbody tr:hover td { background: var(--mt-vurgu); } #app main[data-v="crmGor"] table.tk tr.late td:first-child { box-shadow: inset 3px 0 0 var(--red, #b42318); } html[dir="rtl"] #app main[data-v="crmGor"] table.tk tr.late td:first-child { box-shadow: inset -3px 0 0 var(--red, #b42318); } #app main[data-v="crmGor"] table.tk tr.late td:nth-child(4) { color: var(--red, #b42318); font-weight: 600; } .gr-tur, .gr-durum { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; background: var(--mt-vurgu, #eef); color: var(--navy); } .gr-tur::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .gr-tur[data-tur="Call"] { color: var(--green, #1a7f4b); background: color-mix(in srgb, var(--green, #1a7f4b) 10%, var(--panel, #fff)); } .gr-tur[data-tur="Meeting"] { color: var(--amber, #a86a00); background: color-mix(in srgb, var(--amber, #a86a00) 10%, var(--panel, #fff)); } .gr-tur[data-tur="AcentaArama"] { color: color-mix(in srgb, var(--navy) 60%, var(--green, #1a7f4b)); background: color-mix(in srgb, var(--navy) 6%, var(--panel, #fff)); } .gr-durum { background: transparent; color: var(--mut); padding-inline: 0; font-weight: 550; } .gr-durum[data-d="Started"], .gr-durum[data-d="Planned"] { color: var(--ink); } #app main[data-v="crmGor"] td.acts { white-space: nowrap; text-align: end; } #app main[data-v="crmGor"] td.acts > * + * { margin-inline-start: 8px; } /* ================= FIRSAT PANOSU ================= */ #app main[data-v="crmMus"] .fp-kabuk .fp-arac { padding: 0; } #app main[data-v="crmMus"] .fp-sutun { border-radius: var(--mt-kutu); background: var(--mt-yuzey); } #app main[data-v="crmMus"] .fp-kart { border-radius: 10px; } #app main[data-v="crmMus"] .fp-s-bas h3 { font-size: 13px; letter-spacing: .01em; } #app main[data-v="crmMus"] .fp-arac > input[type=search] { padding-inline-start: 40px; background-position: 14px center; } #app main[data-v="crmMus"] .fp-kabuk input[type=search] { padding-inline-start: 38px; background-position: 12px 50%; height: var(--mt-h); } #app main[data-v="crmMus"] .tk-bar > input[type=search] { padding-inline-start: 38px; background-position: 12px 50%; } [dir="rtl"] #app main[data-v="crmMus"] .tk-bar > input[type=search], [dir="rtl"] #app main[data-v="crmMus"] .fp-kabuk input[type=search] { padding-inline-start: 12px; padding-inline-end: 38px; background-position: calc(100% - 12px) 50%; } /* ================= TAKVİM ================= */ #app main[data-v="takvim"] .tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px); 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); box-shadow: var(--g-1); } #app main[data-v="takvim"] .tk-bar .tv-ekle { order: 9; margin-inline-start: auto; } #app main[data-v="takvim"] .tv-ay { min-width: 150px; text-align: center; font-size: 15px; font-weight: 650; } #app main[data-v="takvim"] .tv-cal { border-radius: var(--mt-kutu); padding: var(--b-3, 12px); } #app main[data-v="takvim"] .tv-h span { font-size: 11.5px; letter-spacing: .06em; color: var(--mut); } #app main[data-v="takvim"] .tv-grid { gap: 4px; } #app main[data-v="takvim"] .tv-g { min-height: 104px; border-color: var(--mt-cizgi); border-radius: 10px; background: var(--panel, #fff); } #app main[data-v="takvim"] .tv-g.hs { background: var(--mt-yuzey); } #app main[data-v="takvim"] .tv-g.dis { background: transparent; border-style: dashed; } #app main[data-v="takvim"] .tv-g:hover { background: var(--mt-vurgu); box-shadow: none; } #app main[data-v="takvim"] .tv-g.on { background: color-mix(in srgb, var(--navy) 9%, var(--panel, #fff)); box-shadow: inset 0 0 0 2px var(--navy); } #app main[data-v="takvim"] .tv-g.gec:not(.on) { border-color: color-mix(in srgb, var(--red, #b42318) 35%, var(--mt-cizgi)); } #app main[data-v="takvim"] .tv-d { width: 26px; height: 26px; font-size: 13px; } #app main[data-v="takvim"] .tv-i { font-size: 11.5px; border-radius: 6px; padding: 2px 7px; background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); color: var(--navy); } #app main[data-v="takvim"] .tv-i.ac { background: color-mix(in srgb, var(--green, #1a7f4b) 11%, var(--panel, #fff)); color: var(--green, #1a7f4b); } #app main[data-v="takvim"] .tv-i.gec { background: color-mix(in srgb, var(--red, #b42318) 9%, var(--panel, #fff)); color: var(--red, #b42318); } #app main[data-v="takvim"] .tv-i.bitti { background: var(--mt-yuzey); color: var(--mut); } #app main[data-v="takvim"] .tv-gun { border-radius: var(--mt-kutu); } #app main[data-v="takvim"] .tv-l > li { border: 1px solid var(--mt-cizgi); border-radius: 10px; padding: 10px 12px; background: var(--panel, #fff); } #app main[data-v="takvim"] .tv-l > li.gec { border-inline-start: 3px solid var(--red, #b42318); } /* ================= ENVANTER ================= */ #app main.inv-app[data-v="admin"] { padding-inline: var(--sayfa-px, 18px); box-sizing: border-box; height: calc(100dvh - 140px); min-height: 520px; } #app main[data-v="admin"] .grid-wrap { border-inline: 1px solid var(--line); } #app main[data-v="admin"] .inv-bar .chip, #app main[data-v="admin"] .inv-bar [data-f] { min-height: 30px; } #app main[data-v="admin"] .inv-bar > :is(#invGeri, [id*="eri"]) { margin-inline-start: auto; } #app main[data-v="admin"] .inv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px); margin: 0; padding: var(--b-3, 12px) var(--b-4, 16px); background: var(--panel, #fff); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--mt-kutu) var(--mt-kutu) 0 0; } #app main[data-v="admin"] .inv-bar > input[type=search] { flex: 1 1 220px; max-width: 320px; height: var(--mt-h); } #app main[data-v="admin"] .inv-bar > :is(button, .ghost, .primary) { min-height: var(--mt-h); border-radius: var(--mt-r); } #app main[data-v="admin"] .inv-foot { padding: var(--b-2, 8px) var(--b-4, 16px); background: var(--panel, #fff); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--mt-kutu) var(--mt-kutu); color: var(--mut); font-size: 12.5px; } /* ================= BİNA ŞEMASI ================= */ #app main[data-v="sema"] .sema-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); padding: var(--b-3, 12px) var(--b-4, 16px); margin: 0 0 var(--b-3, 12px); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu); box-shadow: var(--g-1); } #app main[data-v="sema"] .sema-leg { display: flex; flex-wrap: wrap; gap: var(--b-2, 8px); flex: 1 1 100%; } @media (min-width: 1360px) { #app main.sema-app[data-v="sema"] { padding-inline: var(--sayfa-px, 18px); box-sizing: border-box; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--b-4, 16px); min-height: 0; align-items: start; } #app main[data-v="sema"] .sema-main { padding: 0 0 var(--b-5, 24px); overflow: visible; } } #app main[data-v="sema"] .sema-side { border: 1px solid var(--line); border-radius: var(--mt-kutu); box-shadow: var(--g-1); min-height: 0; top: calc(var(--top-h, 56px) + 12px); } #app main[data-v="sema"] .sema-side > .none, #app main[data-v="sema"] .sema-side .side-empty { min-height: 120px; } /* ================= SOĞUYAN MÜŞTERİLER ================= */ #app:has(main[data-v="soguyanlar"]) .pg-bas { padding-top: 20px; padding-bottom: 4px; gap: 12px 16px; } #app:has(main[data-v="soguyanlar"]) .pg-bas h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; } #app:has(main[data-v="soguyanlar"]) .pg-bas-et { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--mut); } #app:has(main[data-v="soguyanlar"]) .pg-yildiz { min-height: 32px; border-color: transparent; background: transparent; color: var(--mut); font-weight: 550; border-radius: var(--mt-r); } #app main[data-v="soguyanlar"] { display: grid; gap: var(--b-3, 12px); align-content: start; padding-top: var(--b-2, 8px); } #app main[data-v="soguyanlar"] > * { margin: 0; min-width: 0; } #app main[data-v="soguyanlar"] .sg-kapak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-3, 12px); padding: var(--b-3, 12px) var(--b-4, 16px); border-radius: var(--mt-kutu); border: 1px solid var(--line); border-inline-start: 3px solid var(--red, #b42318); box-shadow: var(--g-1); } #app main[data-v="soguyanlar"] .sg-kapak h2 { margin: 0; font-size: 16px; } #app main[data-v="soguyanlar"] .sg-kapak-s { display: flex; gap: var(--b-2, 8px); } #app main[data-v="soguyanlar"] .sg-serit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-4, 16px); font-size: 13px; } #app main[data-v="soguyanlar"] .sg-serit .help { flex: 1 1 320px; margin: 0; max-width: 68ch; } #app main[data-v="soguyanlar"] .sg-cards { margin: 0; } #app main[data-v="soguyanlar"] .sg-k { cursor: pointer; text-align: start; font: inherit; } #app main[data-v="soguyanlar"] .sg-k:hover { border-color: color-mix(in srgb, var(--navy) 40%, var(--line)); } #app main[data-v="soguyanlar"] .sg-k.on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), var(--g-1); outline: 0; } #app main[data-v="soguyanlar"] .sg-suz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2, 8px) var(--b-3, 12px); margin: 0; } #app main[data-v="soguyanlar"] .sg-suz > input[type=search] { flex: 1 1 260px; max-width: 420px; height: var(--mt-h); } #app main[data-v="soguyanlar"] .sg-suz > select { height: var(--mt-h); } #app main[data-v="soguyanlar"] .sg-arac { margin: 0; padding: var(--b-2, 8px) var(--b-3, 12px); border-radius: var(--mt-kutu); background: var(--mt-yuzey); border: 1px solid var(--mt-cizgi); } #app main[data-v="soguyanlar"] .tbl-x { border: 1px solid var(--line); border-radius: var(--mt-kutu); background: var(--panel, #fff); box-shadow: var(--g-1); } #app main[data-v="soguyanlar"] table.tk thead th { background: var(--mt-yuzey); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); } #app main[data-v="soguyanlar"] .sg-bos { border-radius: var(--mt-kutu); } /* ================= MÜŞTERİ / FIRSAT / ACENTA DETAY (kayıt kartı) ================= */ #app main:is([data-v="musteri"], [data-v="firsat"], [data-v="acentadetay"], [data-v="satisci"]) .dt-sayfa { display: grid; gap: var(--b-3, 12px); align-content: start; padding-top: var(--b-3, 12px); } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-geri { margin: 0; } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-bas { margin: 0; padding: var(--b-4, 16px) var(--b-4, 16px); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu); box-shadow: var(--g-1); gap: var(--b-3, 12px) var(--b-4, 16px); } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-av { width: 48px; height: 48px; font-size: 16px; background: color-mix(in srgb, var(--navy) 12%, var(--panel, #fff)); color: var(--navy); border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent); } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-ad h2 { font-size: 20px; letter-spacing: -.01em; } /* KPI şeridi: 6 kart tek satır (geniş ekran), kompakt */ #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk > .stat-grid { margin: 0; gap: var(--b-2, 8px); } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk > .stat-grid .stat { padding: 10px 12px; gap: 2px; } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk > .stat-grid .stat > b { font-size: clamp(16px, 11cqi, 21px); } /* sekmeler: kutusuz, alt çizgili */ #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-sek { margin: 0; padding: 0 var(--b-2, 8px); gap: var(--b-1, 4px); background: transparent; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; border-radius: 0; } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-sek button { padding: 10px 14px; margin-bottom: -1px; font-size: 14px; } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-sek button.on { border-bottom-color: var(--navy); color: var(--navy); background: transparent; } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-n { background: color-mix(in srgb, var(--navy) 9%, var(--panel, #fff)); color: var(--navy); } #app main:is([data-v="musteri"], [data-v="acentadetay"]) .kk-panel { padding-top: var(--b-1, 4px); } #app main[data-v="firsat"] .dt-ust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--b-3, 12px) var(--b-4, 16px); padding: var(--b-3, 12px) var(--b-4, 16px); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--mt-kutu); box-shadow: var(--g-1); } #app main[data-v="firsat"] .dt-ust h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; } #app main[data-v="firsat"] .dt-sayfa > .stat-grid { margin: 0; gap: var(--b-2, 8px); } #app main[data-v="firsat"] .dt-sayfa > .stat-grid .stat { padding: 10px 12px; } #app main[data-v="firsat"] .dt-sayfa > .stat-grid .stat > b { font-size: clamp(16px, 11cqi, 21px); } #app main[data-v="firsat"] .dt-alt { display: flex; align-items: center; gap: var(--b-3, 12px); padding-top: var(--b-2, 8px); } #app main:is([data-v="musteri"], [data-v="firsat"], [data-v="acentadetay"]) .dt-iki { gap: var(--b-3, 12px); align-items: start; } #app main:is([data-v="musteri"], [data-v="firsat"], [data-v="acentadetay"]) .dt-dl { gap: 10px var(--b-4, 16px); } #app main:is([data-v="musteri"], [data-v="firsat"], [data-v="acentadetay"]) .dt-dl dt { color: var(--mut); font-size: 13px; } #app main:is([data-v="musteri"], [data-v="firsat"], [data-v="acentadetay"]) .dt-dl dd { font-weight: 550; overflow-wrap: anywhere; } /* Telefonda görev listesi: sıkı kart (tür + tarih üstte, konu, durum + eylemler altta) */ @media (max-width: 640px) { #app main[data-v="crmGor"] table.mt-kart tbody tr:not(.mt-tek) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--b-3, 12px); padding: var(--b-3, 12px) var(--b-4, 16px); align-items: center; } #app main[data-v="crmGor"] table.mt-kart tbody tr:not(.mt-tek) td { display: block; padding: 0; border: 0; text-align: start; min-width: 0; width: auto; } #app main[data-v="crmGor"] table.mt-kart tbody tr:not(.mt-tek) td::before { display: none; } #app main[data-v="crmGor"] table.mt-kart td > .mt-v { text-align: start; } #app main[data-v="crmGor"] table.mt-kart td:nth-child(1) { grid-column: 1; grid-row: 1; } #app main[data-v="crmGor"] table.mt-kart td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: end; font-size: 12.5px; color: var(--mut); } #app main[data-v="crmGor"] table.mt-kart td:nth-child(4) > .mt-v { text-align: end; } #app main[data-v="crmGor"] table.mt-kart tr.late td:nth-child(4) { color: var(--red, #b42318); } #app main[data-v="crmGor"] table.mt-kart tr.late { border-inline-start: 3px solid var(--red, #b42318); } #app main[data-v="crmGor"] table.mt-kart tr.late td:first-child { box-shadow: none; } #app main[data-v="crmGor"] table.mt-kart td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 15px; } #app main[data-v="crmGor"] table.mt-kart td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--mut); } #app main[data-v="crmGor"] table.mt-kart td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; font-size: 12.5px; } #app main[data-v="crmGor"] table.mt-kart td.acts { grid-column: 1 / -1; grid-row: 5; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--mt-cizgi); } } /* ================= FİYAT LİSTESİ ================= */ #app main[data-v="fiyat"] table.fl-in th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); background: var(--mt-yuzey); } #app main[data-v="fiyat"] .fl-prev { gap: var(--b-4, 16px); } @media (max-width: 640px) { #app main[data-v="fiyat"] .tbl-x:has(> table.fl-in) { overflow: visible; border: 0; background: transparent; box-shadow: none; } #app main[data-v="fiyat"] table.fl-in, #app main[data-v="fiyat"] table.fl-in tbody { display: block; width: 100%; } #app main[data-v="fiyat"] table.fl-in thead { display: none; } #app main[data-v="fiyat"] table.fl-in tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-2, 8px) var(--b-3, 12px); padding: var(--b-3, 12px); margin-bottom: var(--b-2, 8px); border: 1px solid var(--line); border-radius: var(--mt-kutu); background: var(--panel, #fff); } #app main[data-v="fiyat"] table.fl-in tbody td { display: block; padding: 0; border: 0; min-width: 0; text-align: start; } #app main[data-v="fiyat"] table.fl-in tbody td[data-et]:not(:first-child)::before { content: attr(data-et); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); } #app main[data-v="fiyat"] table.fl-in tbody td:first-child { grid-column: 1 / -1; } #app main[data-v="fiyat"] table.fl-in tbody td:first-child::after { content: attr(data-et); margin-inline-start: 8px; font-size: 13px; color: var(--mut); } #app main[data-v="fiyat"] table.fl-in tbody td input:not([type=checkbox]) { width: 100%; max-width: none; box-sizing: border-box; } #app main[data-v="fiyat"] table.fl-in tbody td:last-child { grid-column: 1 / -1; color: var(--mut); } } /* ================= MOBİL ================= */ /* Telefonda müşteri / aday listesi: sıkı kart (ad + avatar üstte, telefon ve e-posta altında, kalan bilgiler tek şeritte) */ @media (max-width: 640px) { #app main[data-v="crmMus"] table.mt-kart tbody tr[data-id] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--b-3, 12px); row-gap: 2px; padding: var(--b-3, 12px) var(--b-4, 16px); } #app main[data-v="crmMus"] table.mt-kart tbody tr[data-id].on { border-color: var(--navy); } #app main[data-v="crmMus"] table.mt-kart tbody tr[data-id] td { display: block; padding: 0; border: 0; text-align: start; min-width: 0; font-size: 13px; } #app main[data-v="crmMus"] table.mt-kart tbody tr[data-id] td::before { display: none; } #app main[data-v="crmMus"] table.mt-kart tbody tr[data-id] td > .mt-v { text-align: start; } #app main[data-v="crmMus"] table.mt-kart tbody tr[data-id] td.kisi-ad { grid-column: 1 / -1; position: relative; padding-inline-start: 46px; min-height: 36px; display: flex; align-items: center; margin-bottom: 6px; } #app main[data-v="crmMus"] table.mt-kart td.kisi-ad > .mt-v > .kisi-av { position: absolute; inset-inline-start: 0; top: 0; transform: none; } #app main[data-v="crmMus"] table.mt-kart td.kisi-ad b { font-size: 15px; } #app main[data-v="crmMus"] table.mt-kart td.tel, #app main[data-v="crmMus"] table.mt-kart td.mail { grid-column: 1 / -1; } #app main[data-v="crmMus"] table.mt-kart td.mail { color: var(--mut); } #app main[data-v="crmMus"] table.mt-kart td:nth-child(4), #app main[data-v="crmMus"] table.mt-kart td.sor, #app main[data-v="crmMus"] table.mt-kart td.kayit { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mt-cizgi); font-size: 12px; color: var(--mut); } #app main[data-v="crmMus"] table.mt-kart td:nth-child(4):has(.cell-2:empty) { visibility: hidden; } #app main[data-v="crmMus"] table.mt-kart td.kayit, #app main[data-v="crmMus"] table.mt-kart td.kayit > .mt-v { text-align: end; } } @media (max-width: 760px) { #app main[data-v="crmMus"] .tk-bar > input[type=search] { flex: 1 1 100%; max-width: none; } #app main[data-v="crmMus"] .tk-bar .crm-seg { flex: 1 1 100%; } #app main[data-v="crmMus"] .tk-bar .crm-seg button { flex: 1; } #app main[data-v="takvim"] .tk-bar .tv-ekle { flex: 1 1 100%; order: -1; margin: 0; } #app main[data-v="takvim"] .tv-ay { min-width: 0; flex: 1; } }