/* ========================================================================== Doruk Servis — renkli tema Panodaki yumuşak renk ve vurgu dilinin tüm sayfalara yayılmış hali. site.css'ten SONRA yüklenir; yalnızca görünümü değiştirir. ========================================================================== */ :root { --t-yesil: #3fae9c; --t-yesil-z: #eef8f6; --t-yesil-k: #2f8e86; --t-mavi: #5b8fd0; --t-mavi-z: #f0f5fc; --t-mavi-k: #4677b8; --t-mor: #9277d6; --t-mor-z: #f5f2fc; --t-mor-k: #7a5fc2; --t-turuncu: #e5875a; --t-turuncu-z: #fdf4ef; --t-turuncu-k: #cf6f43; --t-amber: #d39a3a; --t-amber-z: #fdf7ea; --t-amber-k: #b98228; --t-kirmizi: #d9746b; --t-kirmizi-z: #fcefed; --t-kirmizi-k: #c25d54; --t-gri: #7b8f95; --t-gri-z: #f3f6f6; --t-golge: 0 1px 8px rgba(12, 35, 43, .05); --t-golge-hover: 0 8px 22px rgba(12, 35, 43, .09); } /* ---------------------------------------------------------------- sayfa başlığı */ .icerik h1.h4, .icerik h1.h3 { display: flex; align-items: center; gap: 10px; } .icerik h1.h4::before, .icerik h1.h3::before { content: ""; flex: none; width: 5px; height: 1.15em; border-radius: 4px; background: linear-gradient(180deg, var(--t-yesil), var(--t-mavi)); } /* panoda ve kendi başlık düzeni olan sayfalarda çizgi yok */ .pano h1::before, .bk-ust h1::before { display: none !important; } /* ---------------------------------------------------------------- kartlar */ .card { border-radius: 14px; border-color: #dfe7e6; box-shadow: var(--t-golge); } .card:has(> .card-header) { --k: var(--t-yesil); --k-z: var(--t-yesil-z); --k-k: var(--t-yesil-k); border-top: 3px solid var(--k); overflow: hidden; } .card > .card-header { background: linear-gradient(180deg, var(--k-z, var(--t-yesil-z)), #fff); border-bottom-color: color-mix(in srgb, var(--k, var(--t-yesil)) 15%, var(--cizgi)); font-weight: 600; } .card > .card-header > i.bi:first-child, .card > .card-header > .fw-semibold > i.bi:first-child, .card > .card-header > span > i.bi:first-child { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 8px; background: color-mix(in srgb, var(--k, var(--t-yesil)) 85%, #fff); color: #fff; font-size: .8rem; vertical-align: middle; } .card > .card-header a:not(.btn) { color: var(--k-k, var(--t-yesil-k)); font-weight: 600; } /* Yan yana kartlar sırayla farklı renk alır: yeşil, mavi, mor, turuncu */ .row > [class*="col"]:nth-child(4n+2) > .card:has(> .card-header), .row > [class*="col"]:nth-child(4n+2) > * > .card:has(> .card-header) { --k: var(--t-mavi); --k-z: var(--t-mavi-z); --k-k: var(--t-mavi-k); } .row > [class*="col"]:nth-child(4n+3) > .card:has(> .card-header), .row > [class*="col"]:nth-child(4n+3) > * > .card:has(> .card-header) { --k: var(--t-mor); --k-z: var(--t-mor-z); --k-k: var(--t-mor-k); } .row > [class*="col"]:nth-child(4n+4) > .card:has(> .card-header), .row > [class*="col"]:nth-child(4n+4) > * > .card:has(> .card-header) { --k: var(--t-turuncu); --k-z: var(--t-turuncu-z); --k-k: var(--t-turuncu-k); } /* Aynı sütunda alt alta kartlar: ikinci ve sonrakiler bir sonraki rengi alır */ [class*="col"] > .card:has(> .card-header) ~ .card:has(> .card-header) { --k: var(--t-mavi); --k-z: var(--t-mavi-z); --k-k: var(--t-mavi-k); } [class*="col"] > .card:has(> .card-header) ~ .card:has(> .card-header) ~ .card:has(> .card-header) { --k: var(--t-mor); --k-z: var(--t-mor-z); --k-k: var(--t-mor-k); } /* Uyarı / tehlike kartları kendi renginde */ .card.border-warning:has(> .card-header) { --k: var(--t-amber); --k-z: var(--t-amber-z); --k-k: var(--t-amber-k); border-color: #f1dcae !important; border-top-color: var(--t-amber) !important; } .card.border-danger:has(> .card-header) { --k: var(--t-kirmizi); --k-z: var(--t-kirmizi-z); --k-k: var(--t-kirmizi-k); border-top-color: var(--t-kirmizi) !important; } .card.border-success:has(> .card-header) { --k: var(--t-yesil); --k-z: var(--t-yesil-z); border-top-color: var(--t-yesil) !important; } .card > .card-header.bg-warning-subtle { background: linear-gradient(180deg, var(--t-amber-z), #fff) !important; } /* Bakım / haftalık takvim kartları da aynı vurguyu alır */ .bk-kart { border-top: 3px solid var(--t-yesil); box-shadow: var(--t-golge); } .bk-kart > .bk-kart-ust { background: linear-gradient(180deg, var(--t-yesil-z), #fff); } .bk-kart > .bk-kart-ust h2 i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--t-yesil) 85%, #fff); color: #fff; font-size: .85rem; } .bk-kart#musteriler { border-top-color: var(--t-mavi); } .bk-kart#musteriler > .bk-kart-ust { background: linear-gradient(180deg, var(--t-mavi-z), #fff); } .bk-kart#musteriler > .bk-kart-ust h2 i { background: color-mix(in srgb, var(--t-mavi) 85%, #fff); } /* panodaki kartlar kendi rengini korur */ .pano .bk-kart.pn-kart { border-top-color: var(--k); } .pano .bk-kart.pn-kart > .bk-kart-ust { background: linear-gradient(180deg, var(--k-zemin), #fff); } .pano .bk-kart.pn-kart > .bk-kart-ust h2 i { background: color-mix(in srgb, var(--k) 85%, #fff); } /* Özet kutuları (bakım / takvim): değeri olan kutu renkli simge alır */ .bk-kpi { box-shadow: var(--t-golge); border-radius: 14px; } .bk-kpi.mavi { --k: var(--t-mavi); --k-zemin: var(--t-mavi-z); } .bk-kpi.yesil { --k: #4aa775; --k-zemin: #ecf7f1; } .bk-kpi.amber { --k: var(--t-turuncu); --k-zemin: var(--t-turuncu-z); } .bk-kpi.kirmizi { --k: var(--t-kirmizi); --k-zemin: var(--t-kirmizi-z); } .bk-kpi:not(.sifir) > i { background: color-mix(in srgb, var(--k) 85%, #fff); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--k) 22%, transparent); } .bk-kpi:not(.sifir) strong { color: color-mix(in srgb, var(--k) 85%, #1d3a40); } .bk-kpi:not(.mavi):not(.yesil):not(.amber):not(.kirmizi) { --k: var(--t-yesil); --k-zemin: var(--t-yesil-z); } .bk-ilerleme { background: linear-gradient(135deg, #2f8e86, #1d5a63); } /* ---------------------------------------------------------------- düğmeler */ .btn { border-radius: 10px; transition: background .15s, box-shadow .15s, transform .15s, border-color .15s, color .15s; } .btn-sm { border-radius: 8px; } .btn-lg { border-radius: 12px; } .btn-primary { --bs-btn-bg: var(--t-yesil); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--t-yesil-k); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--t-yesil-k); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: #9fd2c9; --bs-btn-disabled-border-color: transparent; background-image: linear-gradient(135deg, var(--t-yesil), var(--t-yesil-k)); box-shadow: 0 3px 10px rgba(63, 174, 156, .25); } .btn-success { --bs-btn-bg: #4aa775; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #3b8f62; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #3b8f62; --bs-btn-active-border-color: transparent; background-image: linear-gradient(135deg, #4aa775, #3b8f62); box-shadow: 0 3px 10px rgba(74, 167, 117, .25); } .btn-danger { --bs-btn-bg: var(--t-kirmizi); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--t-kirmizi-k); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--t-kirmizi-k); --bs-btn-active-border-color: transparent; background-image: linear-gradient(135deg, var(--t-kirmizi), var(--t-kirmizi-k)); box-shadow: 0 3px 10px rgba(217, 116, 107, .25); } .btn-warning { --bs-btn-bg: var(--t-amber); --bs-btn-border-color: transparent; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--t-amber-k); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--t-amber-k); background-image: linear-gradient(135deg, var(--t-amber), var(--t-amber-k)); box-shadow: 0 3px 10px rgba(211, 154, 58, .25); } .btn-info { --bs-btn-bg: var(--t-mavi); --bs-btn-border-color: transparent; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--t-mavi-k); --bs-btn-hover-border-color: transparent; background-image: linear-gradient(135deg, var(--t-mavi), var(--t-mavi-k)); box-shadow: 0 3px 10px rgba(91, 143, 208, .25); } .btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover { transform: translateY(-1px); filter: brightness(1.03); } .btn-primary:hover { box-shadow: 0 6px 16px rgba(63, 174, 156, .32); } .btn-success:hover { box-shadow: 0 6px 16px rgba(74, 167, 117, .32); } .btn-danger:hover { box-shadow: 0 6px 16px rgba(217, 116, 107, .32); } .btn-outline-primary { --bs-btn-color: var(--t-yesil-k); --bs-btn-border-color: color-mix(in srgb, var(--t-yesil) 40%, #fff); --bs-btn-bg: var(--t-yesil-z); --bs-btn-hover-bg: var(--t-yesil); --bs-btn-hover-border-color: var(--t-yesil); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--t-yesil-k); --bs-btn-active-border-color: var(--t-yesil-k); } .btn-outline-danger { --bs-btn-color: var(--t-kirmizi-k); --bs-btn-border-color: color-mix(in srgb, var(--t-kirmizi) 40%, #fff); --bs-btn-bg: var(--t-kirmizi-z); --bs-btn-hover-bg: var(--t-kirmizi); --bs-btn-hover-border-color: var(--t-kirmizi); } .btn-outline-success { --bs-btn-color: #3b8f62; --bs-btn-border-color: #b6dfc8; --bs-btn-bg: #ecf7f1; --bs-btn-hover-bg: #4aa775; --bs-btn-hover-border-color: #4aa775; --bs-btn-hover-color: #fff; } .btn-outline-warning { --bs-btn-color: var(--t-amber-k); --bs-btn-border-color: #ecd3a5; --bs-btn-bg: var(--t-amber-z); --bs-btn-hover-bg: var(--t-amber); --bs-btn-hover-border-color: var(--t-amber); --bs-btn-hover-color: #fff; } .btn-outline-secondary { --bs-btn-bg: #fff; --bs-btn-color: var(--murekkep); --bs-btn-border-color: #d6e0df; --bs-btn-hover-bg: var(--t-gri-z); --bs-btn-hover-color: var(--murekkep); --bs-btn-hover-border-color: #b9c8c7; --bs-btn-active-bg: var(--t-yesil-z); --bs-btn-active-color: var(--t-yesil-k); --bs-btn-active-border-color: color-mix(in srgb, var(--t-yesil) 40%, #fff); } .btn-group > .btn-outline-secondary.active { background: var(--t-yesil-z); color: var(--t-yesil-k); border-color: color-mix(in srgb, var(--t-yesil) 40%, #fff); z-index: 1; } /* ---------------------------------------------------------------- tablolar */ .table > thead.table-light > tr > th, .table > thead > tr > th { background: linear-gradient(180deg, #f6faf9, #f1f6f5); color: #5d7076; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--t-yesil) 6%, #fff); } .table > tbody > tr > td > a:not(.btn):first-child { font-weight: 600; } /* ---------------------------------------------------------------- rozetler */ .badge { border-radius: 99px; font-weight: 600; padding: .38em .72em; letter-spacing: .01em; } .badge.bg-primary { background-color: var(--t-mavi) !important; } .badge.bg-success { background-color: #4aa775 !important; } .badge.bg-danger { background-color: var(--t-kirmizi) !important; } .badge.bg-warning { background-color: #f1c36b !important; color: #5c4210 !important; } .badge.bg-info { background-color: #a9d3ef !important; color: #1d4a66 !important; } .badge.bg-secondary { background-color: var(--t-gri) !important; } .badge.bg-dark { background-color: #3d5961 !important; } /* ---------------------------------------------------------------- sekmeler */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: linear-gradient(135deg, var(--t-yesil), var(--t-yesil-k)) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(63, 174, 156, .25); } .nav-pills .nav-link { border-radius: 10px 10px 0 0; } .nav-pills .nav-link:hover:not(.active) { background: var(--t-yesil-z); } .nav-pills .nav-link.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff !important; } /* ---------------------------------------------------------------- uyarılar */ .alert { border-left-width: 4px; box-shadow: var(--t-golge); } .alert-success { --bs-alert-border-color: #bfe5d2; border-left-color: #4aa775; } .alert-danger { --bs-alert-bg: var(--t-kirmizi-z); border-left-color: var(--t-kirmizi); } .alert-info { border-left-color: var(--t-mavi); --bs-alert-bg: var(--t-mavi-z); --bs-alert-border-color: #cddcf1; --bs-alert-color: #2c4f7c; } .alert-warning { border-left-color: var(--t-amber); --bs-alert-bg: var(--t-amber-z); --bs-alert-border-color: #f1dcae; --bs-alert-color: #6b4b10; } .alert-secondary { border-left-color: var(--t-gri); } /* ---------------------------------------------------------------- formlar */ .form-control, .form-select { border-radius: 10px; } .form-control-sm, .form-select-sm { border-radius: 8px; } .form-control:focus, .form-select:focus { border-color: var(--t-yesil); box-shadow: 0 0 0 .22rem rgba(63, 174, 156, .16); } .form-check-input:checked { background-color: var(--t-yesil); border-color: var(--t-yesil); } .input-group > .input-group-text { border-radius: 10px; background: var(--t-gri-z); } .input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ---------------------------------------------------------------- listeler */ .list-group-item-action:hover, a.list-group-item:hover { background: color-mix(in srgb, var(--t-yesil) 6%, #fff); } .list-group-flush > .list-group-item { border-color: #e8eeed; } /* ---------------------------------------------------------------- sol menü */ .menu-oge.aktif { background: linear-gradient(90deg, rgba(63, 174, 156, .22), rgba(63, 174, 156, .06)); } .menu-oge .sayi { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); } /* ---------------------------------------------------------------- pencereler */ .modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(12, 35, 43, .2); overflow: hidden; } .modal-header { background: linear-gradient(180deg, var(--t-yesil-z), #fff); border-top: 3px solid var(--t-yesil); } .dropdown-menu { border-radius: 12px; border-color: #e1e8e7; box-shadow: var(--t-golge-hover); } /* ---------------------------------------------------------------- yazdırma: renkleri sadeleştir */ @media print { .card, .bk-kart { box-shadow: none !important; border-top-width: 1px !important; } .card > .card-header, .bk-kart > .bk-kart-ust { background: #fff !important; } .btn { box-shadow: none !important; background-image: none !important; } .icerik h1::before { display: none; } } /* ---------------------------------------------------------------- form bölüm başlığı */ .form-bolum { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed #d6e0df; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t-mor-k); } .form-bolum i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--t-mor) 85%, #fff); color: #fff; font-size: .75rem; } /* ---------------------------------------------------------------- müşteri paneli bilgisi */ .panel-bilgi { border: 1px solid color-mix(in srgb, var(--t-mor) 25%, var(--cizgi)); border-radius: 12px; background: linear-gradient(135deg, var(--t-mor-z), #fff); padding: 10px 12px; } .panel-bilgi-baslik { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t-mor-k); margin-bottom: 6px; } .panel-bilgi-satir { display: grid; grid-template-columns: 70px 1fr auto auto; align-items: center; gap: 6px; padding: 3px 0; } /* ========================================================================== Pano: daha yumuşak (pastel) görünüm Ana düğmeler dolu renk yerine açık pastel zemin + renkli simge. ========================================================================== */ .pano .pn-islemler .pn-islem { background: linear-gradient(135deg, color-mix(in srgb, var(--r) 16%, #fff) 0%, color-mix(in srgb, var(--r) 7%, #fff) 100%); border: 1px solid color-mix(in srgb, var(--r) 22%, #fff); color: var(--murekkep); box-shadow: 0 2px 10px color-mix(in srgb, var(--r) 10%, transparent); } .pano .pn-islem.r-sinyal:first-child { background: linear-gradient(135deg, color-mix(in srgb, var(--r) 20%, #fff), color-mix(in srgb, var(--r) 8%, #fff)); } .pano .pn-islemler .pn-islem::before { background: color-mix(in srgb, var(--r) 10%, transparent); } .pano .pn-islemler .pn-islem::after { background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .6), transparent 60%); } .pano .pn-islemler .pn-islem:hover { color: var(--murekkep); border-color: color-mix(in srgb, var(--r) 45%, #fff); box-shadow: 0 8px 20px color-mix(in srgb, var(--r) 16%, transparent); } .pano .pn-islemler .pn-islem-ikon { background: color-mix(in srgb, var(--r) 80%, #fff); color: #fff; box-shadow: 0 3px 8px color-mix(in srgb, var(--r) 22%, transparent); } .pano .pn-islemler .pn-islem:hover .pn-islem-ikon { background: var(--r); color: #fff; } .pano .pn-islemler .pn-islem-metin strong { color: color-mix(in srgb, var(--r) 55%, #1b2b30); } .pano .pn-islemler .pn-islem-metin small, .pano .pn-islem.r-sinyal:first-child small { color: var(--soluk); } .pano .pn-islemler .pn-islem-arti { color: color-mix(in srgb, var(--r) 45%, #fff); } .pano .pn-islemler .pn-islem:hover .pn-islem-arti { color: var(--r); } /* diğer kayıt çipleri: beyaz zemin, renk yalnızca simgede */ .pano .pn-cip { background: #fff; color: var(--murekkep); font-weight: 500; border-color: color-mix(in srgb, var(--r) 18%, var(--cizgi)); } .pano .pn-cip i { background: color-mix(in srgb, var(--r) 18%, #fff); color: var(--r); } .pano .pn-cip:hover { background: color-mix(in srgb, var(--r) 8%, #fff); color: var(--murekkep); border-color: color-mix(in srgb, var(--r) 35%, #fff); box-shadow: none; } .pano .pn-cip:hover i { background: color-mix(in srgb, var(--r) 75%, #fff); color: #fff; } /* grup başlıkları ve göstergeler: daha açık */ .pano .pn-grup-baslik { background: linear-gradient(90deg, color-mix(in srgb, var(--gr) 8%, #fff), #fff); } .pano .pn-grup-ikon, .pano .pn-grup-toplam { background: color-mix(in srgb, var(--gr) 70%, #fff); } .pano .pn-gosterge:not(.sifir) { background: linear-gradient(135deg, color-mix(in srgb, var(--g) 7%, #fff), #fff); border-color: color-mix(in srgb, var(--g) 16%, var(--cizgi)); } .pano .pn-gosterge:not(.sifir) .pn-g-ikon { background: color-mix(in srgb, var(--g) 18%, #fff); color: color-mix(in srgb, var(--g) 90%, #1b2b30); box-shadow: none; } .pano .pn-gosterge:not(.sifir)::before { background: color-mix(in srgb, var(--g) 60%, #fff); } .pano .pn-gosterge.kirmizi:not(.sifir) { animation: none; } /* alt kartlar */ .pano .pn-kart { border-top-color: color-mix(in srgb, var(--k) 60%, #fff); } .pano .bk-kart.pn-kart > .bk-kart-ust { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 6%, #fff), #fff); } .pano .bk-kart.pn-kart > .bk-kart-ust h2 i { background: color-mix(in srgb, var(--k) 18%, #fff); color: color-mix(in srgb, var(--k) 90%, #1b2b30); } .pano .pn-ziyaret.bugun .pn-z-tarih { background: color-mix(in srgb, var(--t-yesil) 20%, #fff); color: var(--t-yesil-k); } .pano .pn-ziyaret.bugun .pn-z-tarih small { color: var(--t-yesil-k); } .pano .pn-selam { background: none; color: var(--murekkep); } .pano .pn-islem.r-sinyal:first-child .pn-islem-ikon { background: color-mix(in srgb, var(--r) 80%, #fff); } .pano .pn-islem.r-sinyal:first-child .pn-islem-arti { color: color-mix(in srgb, var(--r) 45%, #fff); } .pano .pn-islem.r-sinyal:first-child:hover { color: var(--murekkep); } /* ========================================================================== Sol menü: açılır / kapanır gruplar ========================================================================== */ .menu-grup { margin-top: .35rem; } .menu-grup > summary.grup-baslik { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; padding: .6rem .75rem .45rem; margin: 0 0 .1rem; border-radius: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #7f9ba1; transition: color .15s, background .15s; } .menu-grup > summary.grup-baslik::-webkit-details-marker { display: none; } .menu-grup > summary.grup-baslik:hover { color: #d9e6e8; background: rgba(255, 255, 255, .04); } .menu-grup > summary.grup-baslik > i:first-child { font-size: .85rem; width: 1.2rem; text-align: center; color: #5fd3bf; opacity: .75; } .menu-grup > summary.grup-baslik > span:not(.grup-isaret) { flex: 1; } .menu-grup .grup-ok { font-size: .7rem; transition: transform .2s; opacity: .7; } .menu-grup:not([open]) .grup-ok { transform: rotate(-90deg); } /* kapalı grupta bekleyen iş varsa küçük nokta */ .grup-isaret { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #5fd3bf; box-shadow: 0 0 0 3px rgba(95, 211, 191, .18); } .grup-isaret.uyari { background: var(--amber); box-shadow: 0 0 0 3px rgba(224, 165, 38, .2); } .menu-grup:not([open]) .grup-isaret { display: inline-block; } /* grup içi öğeler hafif içeride, sol kılavuz çizgisiyle */ .menu-grup > .menu-oge { margin-left: .55rem; } .menu-grup[open] { position: relative; } .menu-grup[open]::before { content: ""; position: absolute; left: 1.15rem; top: 2.3rem; bottom: .35rem; width: 1px; background: rgba(255, 255, 255, .07); } .menu-grup[open] > .menu-oge { animation: menu-ac .18s ease-out; } @keyframes menu-ac { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .menu-grup[open] > .menu-oge { animation: none; } .menu-grup .grup-ok { transition: none; } } .menu-grup > summary.grup-baslik:focus-visible { outline: 2px solid #5fd3bf; outline-offset: -2px; } /* ---------------------------------------------------------------- WhatsApp düğmesi */ .btn-whatsapp { --bs-btn-color: #128c4a; --bs-btn-bg: #e8f8ee; --bs-btn-border-color: #bfe8cf; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #25b864; --bs-btn-hover-border-color: #25b864; --bs-btn-active-color: #fff; --bs-btn-active-bg: #1fa257; --bs-btn-active-border-color: #1fa257; font-weight: 600; } .btn-whatsapp i { font-size: 1em; } .btn-whatsapp.pasif { --bs-btn-color: #8fa3a8; --bs-btn-bg: #f3f6f6; --bs-btn-border-color: #dde5e4; --bs-btn-hover-bg: #eef2f2; --bs-btn-hover-color: #5d7076; --bs-btn-hover-border-color: #cfd9d8; font-weight: 500; } .wa-numara { color: #128c4a; font-weight: 600; } /* ---------------------------------------------------------------- görüşmeler (3CX) */ .gr-liste { display: flex; flex-direction: column; } .gr-satir { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #e8eeed; } .gr-satir:last-child { border-bottom: 0; } .gr-satir.acik { background: linear-gradient(90deg, var(--t-kirmizi-z), #fff 40%); box-shadow: inset 3px 0 0 var(--t-kirmizi); } .gr-ikon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 1.05rem; } .gr-gelen { background: var(--t-yesil-z); color: var(--t-yesil-k); } .gr-giden { background: var(--t-mavi-z); color: var(--t-mavi-k); } .gr-cevapsiz { background: var(--t-kirmizi-z); color: var(--t-kirmizi-k); } .gr-ulasilamadi { background: var(--t-amber-z); color: var(--t-amber-k); } .gr-ana { flex: 1; min-width: 0; } .gr-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .gr-numara { font-family: var(--bs-font-monospace); font-size: .85rem; color: var(--soluk); } a.gr-numara:hover { color: var(--t-yesil-k); } .gr-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .78rem; color: var(--soluk); margin-top: 2px; } .gr-islem { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } @media (max-width: 575.98px) { .gr-satir { flex-wrap: wrap; } .gr-islem { width: 100%; justify-content: flex-start; padding-left: 52px; } } /* telefon bağlantısı (3CX ile ara) */ .tel-link { white-space: nowrap; } .tel-link i { font-size: .8em; margin-left: 3px; opacity: .65; } .tel-link:hover i { opacity: 1; } /* ---------------------------------------------------------------- gelen arama (3CX açılır sayfa) */ .ga-ust { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .ga-zil { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--t-yesil), var(--t-yesil-k)); box-shadow: 0 0 0 6px rgba(63, 174, 156, .15); animation: ga-cal 1.6s ease-in-out 3; } @keyframes ga-cal { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 50% { transform: rotate(0); } } @media (prefers-reduced-motion: reduce) { .ga-zil { animation: none; } } .ga-etiket { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t-yesil-k); } .ga-numara { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; } .ga-numara a { color: var(--murekkep); } .ga-ad { color: var(--soluk); } .ga-musteri { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--cizgi); border-top: 3px solid var(--t-yesil); border-radius: 14px; box-shadow: var(--t-golge); } .ga-avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--petrol-900); color: #fff; font-weight: 700; font-size: 1.05rem; } .ga-bilgi { flex: 1; min-width: 240px; } .ga-unvan { font-size: 1.3rem; font-weight: 700; color: var(--murekkep); } .ga-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .ga-not { margin-top: 8px; font-size: .82rem; color: var(--soluk); max-height: 4.5em; overflow: hidden; } .ga-islemler { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------------------------------------------------------------- masraflar */ .ms-ozet { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767.98px) { .ms-ozet { grid-template-columns: 1fr; } } .ms-toplu { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--t-yesil); border-radius: 12px; box-shadow: var(--t-golge-hover); } .ms-durum-kart { border-radius: 14px; padding: 16px 18px; border: 1px solid var(--cizgi); background: #fff; } .ms-tutar { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .ms-kategoriler { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .ms-kategori { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; margin: 0; cursor: pointer; border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; font-size: .78rem; text-align: center; color: var(--soluk); transition: border-color .15s, background .15s, color .15s; } .ms-kategori i { font-size: 1.3rem; color: var(--t-mavi); } .ms-kategori:hover { border-color: color-mix(in srgb, var(--t-yesil) 45%, #fff); color: var(--murekkep); } .btn-check:checked + .ms-kategori { border-color: var(--t-yesil); background: var(--t-yesil-z); color: var(--t-yesil-k); font-weight: 600; box-shadow: inset 0 0 0 1px var(--t-yesil); } .btn-check:checked + .ms-kategori i { color: var(--t-yesil-k); } .btn-check:focus-visible + .ms-kategori { outline: 2px solid var(--t-yesil); outline-offset: 2px; } .ms-cubuk-satir { margin-bottom: 10px; } .ms-cubuk { height: 8px; border-radius: 99px; background: #eef2f2; overflow: hidden; margin-top: 3px; } .ms-cubuk > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--t-mavi), var(--t-yesil)); } @media print { .ms-cubuk > div { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ========================================================================== Canlı bildirim: yeni ticket açılır penceresi (sağ alt) ========================================================================== */ .sayi[hidden], .grup-isaret[hidden] { display: none !important; } .sayac-parla { animation: sayac-parla 1.2s ease-out; } @keyframes sayac-parla { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(95, 211, 191, .7); } 30% { transform: scale(1.25); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(95, 211, 191, 0); } } .canli-alan { position: fixed; right: 18px; bottom: 18px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; } .canli-kart { pointer-events: auto; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t-mavi) 30%, var(--cizgi)); border-left: 5px solid var(--t-mavi); box-shadow: 0 14px 40px rgba(12, 35, 43, .22); transform: translateX(30px); opacity: 0; transition: transform .25s ease, opacity .25s ease; } .canli-kart.acik { transform: none; opacity: 1; } .canli-kart.acil { border-left-color: var(--t-kirmizi); border-color: color-mix(in srgb, var(--t-kirmizi) 30%, var(--cizgi)); } .canli-ust { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; } .canli-zil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: .8rem; background: linear-gradient(135deg, var(--t-mavi), var(--t-mavi-k)); animation: canli-zil 1s ease-in-out 2; } .canli-kart.acil .canli-zil { background: linear-gradient(135deg, var(--t-kirmizi), var(--t-kirmizi-k)); } @keyframes canli-zil { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-15deg); } 40%, 80% { transform: rotate(15deg); } } .canli-etiket { flex: 1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t-mavi-k); } .canli-kart.acil .canli-etiket { color: var(--t-kirmizi-k); } .canli-kapat { border: 0; background: none; color: var(--soluk); padding: 2px 4px; border-radius: 6px; } .canli-kapat:hover { background: var(--zemin); color: var(--murekkep); } .canli-govde { display: flex; flex-direction: column; gap: 2px; padding: 0 14px 10px; color: var(--murekkep); } .canli-govde:hover { text-decoration: none; color: var(--murekkep); } .canli-no { font-size: .78rem; color: var(--soluk); font-weight: 600; } .canli-baslik { font-size: .98rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .canli-alt { font-size: .76rem; color: var(--soluk); } .canli-alt-cubuk { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; border-top: 1px solid #eef2f2; background: #fbfcfc; } .canli-izin { border: 0; background: none; padding: 0; font-size: .75rem; color: var(--t-mavi-k); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .canli-kart, .canli-zil, .sayac-parla { transition: none; animation: none; } } @media print { .canli-alan { display: none !important; } } .canli-kart.alindi { border-left-color: #9aabaa !important; opacity: .85; } .canli-kart.alindi .canli-zil { background: #9aabaa; animation: none; } .canli-kart.alindi .canli-alt { color: var(--t-yesil-k); } /* Atanmamış ticket hatırlatması */ .canli-kart.hatirlat { border-left-color: var(--t-amber); border-color: color-mix(in srgb, var(--t-amber) 35%, var(--cizgi)); } .canli-kart.hatirlat .canli-zil { background: linear-gradient(135deg, var(--t-amber), var(--t-amber-k)); } .canli-kart.hatirlat .canli-etiket { color: var(--t-amber-k); } .canli-kart.hatirlat.acil { border-left-color: var(--t-kirmizi); } .canli-liste { list-style: none; margin: 0; padding: 0 8px 6px; max-height: 46vh; overflow-y: auto; } .canli-satir { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 10px; transition: background .2s, opacity .3s; } .canli-satir + .canli-satir { border-top: 1px dashed #e6ecec; } .canli-satir:hover { background: var(--zemin); } .canli-satir-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--murekkep); } .canli-satir-govde:hover { text-decoration: none; color: var(--murekkep); } .canli-satir-baslik { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .canli-satir .badge { font-size: .62rem; vertical-align: 1px; margin-left: 4px; } .canli-bakan { color: var(--t-turuncu-k); font-weight: 600; } .canli-al { white-space: nowrap; font-size: .74rem; padding: 3px 8px; } .canli-satir.alindi { opacity: .6; } .canli-satir.alindi .canli-alt { color: var(--t-yesil-k); } .canli-not { font-size: .72rem; color: var(--soluk); margin-left: auto; } /* ========================================================================== Ticket listesi (tl-*) ========================================================================== */ .tl-ozet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .tl-ozet .bk-kpi { color: inherit; transition: transform .15s, box-shadow .15s; } .tl-ozet .bk-kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(12, 35, 43, .1); } .bk-kpi.mor { --k: var(--t-mor); --k-zemin: var(--t-mor-z); } .bk-kpi.mor:not(.sifir) { border-color: color-mix(in srgb, var(--t-mor) 30%, var(--cizgi)); } .tl-kart { border-top-color: var(--t-mavi); } .tl-kart > .bk-kart-ust { background: linear-gradient(180deg, var(--t-mavi-z), #fff); } .tl-arac { align-items: center; } .tl-sekmeler a i { font-size: .8rem; opacity: .75; } .tl-sekmeler a b { font-size: .7rem; font-weight: 700; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #e3eaea; color: var(--murekkep); text-align: center; } .tl-sekmeler a.aktif b { background: var(--t-mavi); color: #fff; } .tl-sekmeler a b.uyari { background: var(--t-kirmizi-z); color: var(--t-kirmizi-k); } .tl-sekmeler a.aktif b.uyari { background: var(--t-kirmizi); color: #fff; } .tl-suzgec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tl-suzgec .form-select { width: auto; min-width: 130px; border-radius: 10px; font-size: .82rem; } .tl-temizle { font-size: .8rem; color: var(--soluk); white-space: nowrap; } .tl-temizle:hover { color: var(--t-kirmizi-k); text-decoration: none; } .tl-liste { --tl-kolon: 4px minmax(0, 1fr) 150px 250px 92px 120px; } .tl-baslik, .tl-satir { display: grid; grid-template-columns: var(--tl-kolon); align-items: center; column-gap: 16px; } .tl-baslik { padding: 8px 18px 8px 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); background: #fbfcfc; border-bottom: 1px solid var(--cizgi); } .tl-grup { display: flex; align-items: center; gap: 8px; padding: 10px 18px 6px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tl-k); background: linear-gradient(90deg, var(--tl-z), #fff 60%); border-bottom: 1px solid #eef2f2; } .tl-grup b { font-weight: 700; padding: 0 7px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--tl-k) 25%, transparent); } .tl-grup-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--tl-k); } .tl-satir { position: relative; padding: 12px 18px 12px 0; border-bottom: 1px solid #eef2f2; transition: background .15s; } .tl-satir:hover { background: #f7fafb; } .tl-satir.bana { background: linear-gradient(90deg, color-mix(in srgb, var(--t-yesil-z) 70%, #fff), #fff 40%); } .tl-satir.kapali { opacity: .72; } .tl-satir.kapali .tl-konu { font-weight: 600; } .tl-serit { align-self: stretch; margin: -12px 0; background: var(--tl-k); opacity: .85; } .tl-satir.tl-dusuk .tl-serit, .tl-satir.tl-normal .tl-serit { opacity: .45; } /* öncelik renkleri */ .tl-kritik { --tl-k: var(--t-kirmizi); --tl-z: var(--t-kirmizi-z); } .tl-yuksek { --tl-k: var(--t-turuncu); --tl-z: var(--t-turuncu-z); } .tl-normal { --tl-k: var(--t-mavi); --tl-z: var(--t-mavi-z); } .tl-dusuk { --tl-k: #9aabaa; --tl-z: #f3f6f6; } .tl-ana { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tl-ust-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tl-no { font-size: .74rem; font-weight: 700; color: var(--soluk); font-variant-numeric: tabular-nums; } .tl-oncelik { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; color: color-mix(in srgb, var(--tl-k) 85%, #1d3a40); background: var(--tl-z); } .tl-normal .tl-oncelik, .tl-dusuk .tl-oncelik { display: none; } .tl-etiket { font-size: .68rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; } .tl-etiket.yeni { background: var(--t-yesil-z); color: var(--t-yesil-k); animation: tl-nabiz 2s ease-in-out infinite; } .tl-etiket.duzeltme { background: var(--t-amber-z); color: var(--t-amber-k); } @keyframes tl-nabiz { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-yesil) 18%, transparent); } } .tl-konu { font-size: .95rem; font-weight: 700; color: var(--murekkep); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-konu:hover { color: var(--t-mavi-k); text-decoration: none; } .tl-konu::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* tüm satır tıklanır */ .tl-musteri { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8rem; color: var(--soluk); } .tl-musteri > .bi-building { opacity: .6; } .tl-anlasmali { color: var(--t-yesil); } .tl-kategori { padding: 0 7px; border-radius: 6px; background: var(--zemin); font-size: .72rem; } .tl-mesaj { font-size: .74rem; } .tl-durum-cip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; color: var(--d-k); background: var(--d-z); } .td-acik { --d-k: var(--t-mavi-k); --d-z: var(--t-mavi-z); } .td-islemde { --d-k: var(--t-mor-k); --d-z: var(--t-mor-z); } .td-islemde i { animation: tl-don 3s linear infinite; } @keyframes tl-don { to { transform: rotate(360deg); } } .td-bekliyor { --d-k: var(--t-amber-k); --d-z: var(--t-amber-z); } .td-cozuldu { --d-k: var(--t-yesil-k); --d-z: var(--t-yesil-z); } .td-kapandi { --d-k: #6b7c7c; --d-z: #eef2f2; } .tl-atanan { display: flex; align-items: center; gap: 8px; min-width: 0; } .tl-kisi { font-size: .84rem; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .tl-bos-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--t-amber) 60%, #fff); color: var(--t-amber-k); background: var(--t-amber-z); } .tl-atanmamis { color: var(--t-amber-k); } .tl-al { position: relative; z-index: 2; margin: 0 0 0 auto; } .tl-al .btn { padding: 2px 8px; font-size: .74rem; border-radius: 8px; white-space: nowrap; } .tl-zaman { display: flex; flex-direction: column; line-height: 1.2; } .tl-zaman strong { font-size: .86rem; font-variant-numeric: tabular-nums; } .tl-zaman span { font-size: .7rem; color: var(--soluk); } .tl-sla-cip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 8px; font-size: .74rem; font-weight: 600; white-space: nowrap; } .tl-sla-cip.normal { background: #f1f5f5; color: #50666a; } .tl-sla-cip.yakin { background: var(--t-amber-z); color: var(--t-amber-k); } .tl-sla-cip.gecti { background: var(--t-kirmizi-z); color: var(--t-kirmizi-k); } .tl-sla-cip.tamam { background: var(--t-yesil-z); color: var(--t-yesil-k); } .tl-alt { padding: 10px 18px; font-size: .78rem; color: var(--soluk); background: #fbfcfc; } .tl-bos { padding: 48px 20px; } @media (max-width: 1199.98px) { .tl-ozet { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tl-liste { --tl-kolon: 4px minmax(0, 1fr) 140px 180px 110px; } .tl-baslik span:nth-child(5), .tl-zaman { display: none; } } @media (max-width: 767.98px) { .tl-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-ozet .bk-kpi:last-child { grid-column: span 2; } .tl-baslik { display: none; } .tl-satir { grid-template-columns: 4px minmax(0, 1fr) auto; grid-template-areas: "s a a" "s d sla" "s k k"; row-gap: 8px; padding: 12px 14px 12px 0; } .tl-serit { grid-area: s; } .tl-ana { grid-area: a; } .tl-durum { grid-area: d; } .tl-sla { grid-area: sla; justify-self: end; } .tl-atanan { grid-area: k; } .tl-konu { white-space: normal; } .tl-suzgec, .tl-suzgec .bk-ara, .tl-suzgec .bk-ara input { width: 100%; } .tl-suzgec .form-select { flex: 1; min-width: 0; } .tl-sekmeler { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .tl-sekmeler a { white-space: nowrap; } } .tl-kart .bk-bos { border: 0; border-radius: 0; } /* Sol menü sayıları: gri yerine belirgin renk (uyarılar amber kalır) */ .menu-oge .sayi:not(.uyari) { background: linear-gradient(135deg, #4fa3e0, var(--t-mavi)); color: #fff; font-weight: 700; box-shadow: 0 2px 8px color-mix(in srgb, var(--t-mavi) 45%, transparent); } .menu-oge.aktif .sayi:not(.uyari) { background: #fff; color: var(--t-mavi-k); } /* ========================================================================== Uzak bağlantılar (uz-*) ========================================================================== */ .uz-teklik { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #f1f5f5; color: var(--soluk); border: 1px solid var(--cizgi); } .uz-teklik:hover { text-decoration: none; color: var(--murekkep); } .uz-teklik-nokta { width: 8px; height: 8px; border-radius: 50%; background: #b9c6c6; } .uz-teklik.acik { background: var(--t-yesil-z); color: var(--t-yesil-k); border-color: color-mix(in srgb, var(--t-yesil) 35%, var(--cizgi)); } .uz-teklik.acik .uz-teklik-nokta { background: var(--t-yesil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-yesil) 25%, transparent); } .uz-yol { cursor: pointer; } .uz-yol.acik { background: var(--t-mavi-z); color: var(--t-mavi-k); border-color: color-mix(in srgb, var(--t-mavi) 35%, var(--cizgi)); } .uz-yol.uyari { background: var(--t-amber-z); color: var(--t-amber-k); border-color: color-mix(in srgb, var(--t-amber) 40%, var(--cizgi)); } .uz-yol-menu { min-width: 300px; } .uz-yol-menu .dropdown-item { display: flex; gap: 10px; align-items: flex-start; white-space: normal; padding: 8px 14px; } .uz-yol-menu .dropdown-item > i { margin-top: 2px; } .uz-yol-menu .dropdown-item span { display: flex; flex-direction: column; } .uz-yol-menu .dropdown-item small { color: var(--soluk); font-size: .76rem; } .uz-yol-menu .dropdown-item.active { background: var(--t-mavi-z); color: var(--t-mavi-k); } .uz-arac { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .uz-arac .form-select { width: auto; min-width: 200px; border-radius: 12px; } .uz-ara { position: relative; flex: 1; min-width: 260px; margin: 0; } .uz-ara > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk); } .uz-ara input { width: 100%; border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px 44px 10px 40px; font-size: .95rem; background: #fff; box-shadow: var(--t-golge); } .uz-ara input:focus { outline: none; border-color: var(--t-mavi); box-shadow: 0 0 0 4px var(--t-mavi-z); } .uz-ara kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: #f1f5f5; color: var(--soluk); border: 1px solid var(--cizgi); font-size: .7rem; padding: 1px 6px; } .uz-son { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; } .uz-son-baslik { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); margin-right: 4px; } .uz-son-cip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--t-mavi) 25%, var(--cizgi)); background: #fff; box-shadow: var(--t-golge); font-size: .82rem; color: var(--murekkep); transition: transform .15s, box-shadow .15s; } .uz-son-cip > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--t-mavi-z); color: var(--t-mavi-k); } .uz-son-cip small { color: var(--soluk); margin-left: 2px; } .uz-son-cip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(12, 35, 43, .1); border-color: var(--t-mavi); } .uz-son-cip:disabled { opacity: .6; } .uz-musteri { margin-bottom: 22px; } .uz-musteri[hidden], .uz-kart[hidden] { display: none !important; } .uz-musteri-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .uz-musteri-ad { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .uz-musteri-ad a { font-weight: 700; font-size: 1rem; color: var(--murekkep); } .uz-musteri-ad small { color: var(--soluk); font-size: .76rem; } .uz-musteri-link { font-size: .78rem; color: var(--soluk); padding: 4px 8px; border-radius: 8px; } .uz-musteri-link:hover { background: #fff; color: var(--t-mavi-k); text-decoration: none; } .uz-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .uz-kart { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; border-top: 3px solid var(--uz-k, var(--t-mavi)); box-shadow: var(--t-golge); transition: box-shadow .15s, transform .15s; } .uz-kart:hover { box-shadow: 0 10px 26px rgba(12, 35, 43, .1); transform: translateY(-1px); } .uz-kart.uz-rdp { --uz-k: var(--t-mavi); --uz-z: var(--t-mavi-z); } .uz-kart.uz-id { --uz-k: var(--t-mor); --uz-z: var(--t-mor-z); } .uz-kart.uz-diger { --uz-k: #9aabaa; --uz-z: #f1f5f5; } .uz-kart-ust { display: flex; align-items: center; gap: 10px; } .uz-ikon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--uz-z); color: var(--uz-k); font-size: 1.05rem; } .uz-kart-ad { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .uz-kart-ad a { font-weight: 700; color: var(--murekkep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uz-kart-ad a:hover { color: var(--t-mavi-k); text-decoration: none; } .uz-yontem { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--uz-k) 85%, #1d3a40); } .uz-adres { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: #f6f9f9; font-size: .86rem; min-width: 0; } .uz-adres .font-monospace { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uz-mini { border: 0; background: none; padding: 0 2px; color: var(--soluk); margin-left: auto; } .uz-mini:hover { color: var(--t-mavi-k); } .uz-kullanicilar { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: #50666a; } .uz-kullanicilar i { opacity: .6; } .uz-not { font-size: .76rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uz-vpn { color: var(--t-amber-k); background: var(--t-amber-z); padding: 3px 8px; border-radius: 7px; white-space: normal; } .uz-kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed #e6ecec; } .uz-son-kim { font-size: .74rem; color: var(--soluk); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uzak-bildirim { position: fixed; left: 50%; bottom: 24px; z-index: 1090; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: #1d3a40; color: #fff; font-size: .9rem; box-shadow: 0 14px 40px rgba(12, 35, 43, .3); transition: opacity .2s, transform .2s; } .uzak-bildirim.goster { opacity: 1; transform: translate(-50%, 0); } .uzak-bildirim small { display: block; opacity: .8; font-size: .78rem; margin-top: 2px; } .uzak-bildirim.basari { background: #1f6f63; } .uzak-bildirim.uyari { background: #8a5a12; } .uzak-bildirim.hata { background: #a2443b; } .uz-adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .uz-adim { display: flex; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--t-golge); } .uz-adim h2 { font-size: 1rem; font-weight: 700; margin: 2px 0 6px; } .uz-adim p { font-size: .84rem; color: #50666a; } .uz-adim-no { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; background: linear-gradient(135deg, #4fa3e0, var(--t-mavi)); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--t-mavi) 35%, transparent); } @media (max-width: 991.98px) { .uz-adimlar { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .uz-kartlar { grid-template-columns: 1fr; } .uz-arac .form-select { width: 100%; } } /* Uzak bağlantılar: solda müşteriler, sağda seçili müşterinin sunucuları */ .uz-duzen { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; } .uz-sol { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 32px); } .uz-sol .uz-ara { flex: none; min-width: 0; } .uz-mlist { display: flex; flex-direction: column; overflow-y: auto; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--t-golge); border-top: 3px solid var(--t-mavi); } .uz-moge { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef2f2; background: none; text-align: left; color: var(--murekkep); transition: background .12s; position: relative; } .uz-moge[hidden] { display: none; } .uz-moge:hover { background: #f6f9fa; } .uz-moge.aktif { background: var(--t-mavi-z); } .uz-moge.aktif::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t-mavi); } .uz-moge .hk-avatar { flex: none; } .uz-moge-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .uz-moge-metin b { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uz-moge.aktif .uz-moge-metin b { font-weight: 700; color: var(--t-mavi-k); } .uz-moge-metin small { font-size: .74rem; color: var(--soluk); } .uz-moge-ok { color: #b9c6c6; font-size: .8rem; } .uz-moge.aktif .uz-moge-ok { color: var(--t-mavi); } .uz-mlist-bos { padding: 18px; text-align: center; font-size: .84rem; color: var(--soluk); } .uz-sag { min-width: 0; } .uz-sag .uz-musteri { margin: 0; } .uz-sag .uz-musteri-ust { background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; box-shadow: var(--t-golge); margin-bottom: 12px; } .uz-sag .uz-musteri-ad a { font-size: 1.1rem; } .uz-sag .uz-kartlar { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .uz-geri { display: none; border: 0; background: var(--zemin); width: 32px; height: 32px; border-radius: 50%; color: var(--murekkep); flex: none; } .uz-bekle { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 24px; background: #fff; border: 1px dashed #c5d3d1; border-radius: 14px; color: var(--soluk); } .uz-bekle[hidden] { display: none; } .uz-bekle strong { color: var(--murekkep); font-size: 1.05rem; } .uz-bekle-ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--t-mavi-z); color: var(--t-mavi); font-size: 1.6rem; margin-bottom: 4px; } .uz-bekle .uz-son { justify-content: center; margin: 18px 0 0; } .uz-bekle .uz-son-baslik { width: 100%; text-align: center; margin: 0 0 4px; } @media (max-width: 991.98px) { .uz-duzen { grid-template-columns: 1fr; } .uz-sol { position: static; max-height: none; } .uz-mlist { max-height: none; } .uz-duzen.secili .uz-sol { display: none; } .uz-duzen:not(.secili) .uz-bekle { display: none; } .uz-geri { display: grid; place-items: center; } } @media (max-width: 575.98px) { .uz-sag .uz-musteri-ust { flex-wrap: wrap; } .uz-sag .uz-musteri-ad { flex-basis: calc(100% - 90px); } .uz-sag .uz-musteri-link { margin-left: 42px; } .uz-sag .uz-musteri-link + .uz-musteri-link { margin-left: 0; } } /* Sol menünün en altındaki Masraflar: gruplardan ince bir çizgiyle ayrılır */ .menu-oge.menu-alt { margin-top: 10px; position: relative; } /* ayırıcı ::after ile: ::before etkin sayfanın sol ışığına ayrılmış */ .menu-oge.menu-alt::after { content: ""; position: absolute; left: 10px; right: 10px; top: -6px; border-top: 1px solid rgba(255, 255, 255, .08); } /* ========================================================================== Müşteri paneli (pt-*) ve hizmet raporu (pr-*) ========================================================================== */ .panel-bilgi-baslik { display: flex; align-items: center; gap: 6px; } .menu-oge.menu-vurgu:not(.aktif) { background: color-mix(in srgb, var(--t-yesil) 22%, transparent); color: #fff; } .menu-oge.menu-vurgu:not(.aktif):hover { background: color-mix(in srgb, var(--t-yesil) 34%, transparent); } .pt-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; margin-bottom: 16px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #2f8f80 0%, #3fae9c 45%, #5b8fd0 100%); box-shadow: 0 14px 34px color-mix(in srgb, var(--t-yesil) 28%, transparent); position: relative; overflow: hidden; } .pt-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; } .pt-hero-metin { min-width: 0; position: relative; z-index: 1; } .pt-selam { font-size: .9rem; opacity: .9; } .pt-hero h1 { font-size: 1.6rem; font-weight: 700; margin: 2px 0 10px; } .pt-hero-alt { display: flex; flex-wrap: wrap; gap: 8px; } .pt-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .8rem; font-weight: 500; } .pt-rozet.yesil { background: rgba(255, 255, 255, .26); } .pt-hero-dugmeler { display: flex; flex-direction: column; gap: 8px; align-items: stretch; position: relative; z-index: 1; } .pt-ana-dugme { font-weight: 700; color: #2f8f80 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } .pt-ana-dugme i { margin-right: 4px; } .pt-ikincil { flex: 1; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); font-size: .86rem; } .pt-ikincil:hover { color: #fff; background: rgba(255, 255, 255, .24); } .pt-uyari { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; margin-bottom: 10px; border: 1px solid; } .pt-uyari > i { font-size: 1.2rem; margin-top: 1px; } .pt-uyari > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pt-uyari span { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84rem; } .pt-uyari a { font-weight: 600; } .pt-uyari.amber { background: var(--t-amber-z); border-color: color-mix(in srgb, var(--t-amber) 35%, transparent); color: var(--t-amber-k); } .pt-uyari.mavi { background: var(--t-mavi-z); border-color: color-mix(in srgb, var(--t-mavi) 30%, transparent); color: var(--t-mavi-k); } .pt-uyari.yesil { background: var(--t-yesil-z); border-color: color-mix(in srgb, var(--t-yesil) 30%, transparent); color: var(--t-yesil-k); } .pt-uyari strong { color: var(--murekkep); } .pt-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px; } .pt-ozet .bk-kpi { color: inherit; transition: transform .15s, box-shadow .15s; } .pt-ozet .bk-kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--t-golge-hover); } .pt-kart > .bk-kart-ust { padding: 12px 16px; } .pt-kart > .bk-kart-ust h2 { font-size: .95rem; } .pt-bos { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 34px 20px; color: var(--soluk); } .pt-bos i { font-size: 1.8rem; color: var(--t-yesil); } .pt-bos strong { color: var(--murekkep); } .pt-bos.kucuk { padding: 18px; font-size: .86rem; } .pt-talepler { display: flex; flex-direction: column; } .pt-talep { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef2f2; color: var(--murekkep); } .pt-talep:last-child { border-bottom: 0; } .pt-talep:hover { background: #f7fafb; text-decoration: none; color: var(--murekkep); } .pt-talep-ana { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pt-talep-no { font-size: .74rem; color: var(--soluk); font-weight: 600; } .pt-talep-konu { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-talep-kim { font-size: .76rem; color: var(--t-yesil-k); } .pt-liste { display: flex; flex-direction: column; } .pt-satir { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #eef2f2; color: var(--murekkep); } .pt-satir:last-child { border-bottom: 0; } .pt-satir:hover { background: #f7fafb; text-decoration: none; color: var(--murekkep); } .pt-satir-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .pt-satir-metin b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-satir-metin small { color: var(--soluk); font-size: .76rem; } .pt-kisalt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-liste.genis .pt-satir { padding: 12px 18px; } .pt-takvim { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--t-yesil-z); color: var(--t-yesil-k); line-height: 1; } .pt-takvim b { font-size: 1.1rem; } .pt-takvim small { font-size: .62rem; text-transform: uppercase; font-weight: 700; margin-top: 2px; } .pt-takvim.planli { background: var(--t-mavi-z); color: var(--t-mavi-k); } .pt-ikon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--t-mavi-z); color: var(--t-mavi-k); } .pt-ikon.mor { background: var(--t-mor-z); color: var(--t-mor-k); } .pt-tutar { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .pt-bakim { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .pt-bakim-sayi { font-size: .9rem; } .pt-bakim-sayi strong { font-size: 1.4rem; color: var(--t-yesil-k); } .pt-bar { height: 10px; border-radius: 999px; background: #e9efef; overflow: hidden; } .pt-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-yesil), #6cc7b6); } .pt-iletisim { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px dashed #c5d3d1; font-size: .84rem; color: var(--soluk); } .pt-iletisim > i { font-size: 1.5rem; color: var(--t-mavi); } .pt-iletisim b { display: block; color: var(--murekkep); } /* Taleplerim listesi: personel listesindeki görünümün sade hali */ .tl-liste.pt-tl { --tl-kolon: 4px minmax(0, 1fr) 170px 190px 120px; } .pt-yildizlar { color: #e5a33a; font-size: .8rem; letter-spacing: 1px; } .pt-yildizlar span { color: #d9e2e2; } /* Yeni talep formu */ .pt-form-sahne { max-width: 980px; } .pt-form { display: flex; flex-direction: column; gap: 14px; } .pt-adim { background: #fff; border: 1px solid var(--cizgi); border-radius: 16px; padding: 18px 20px; box-shadow: var(--t-golge); } .pt-adim h2 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; margin: 0 0 14px; } .pt-adim h2 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; color: #fff; background: linear-gradient(135deg, var(--t-yesil), #2f8f80); } .pt-kategoriler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .pt-kategori, .pt-acil { margin: 0; cursor: pointer; } .pt-kategori input, .pt-acil input { position: absolute; opacity: 0; pointer-events: none; } .pt-kategori-kutu { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border: 1.5px solid var(--cizgi); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s; } .pt-kategori-kutu i { font-size: 1.3rem; color: var(--t-mavi); margin-bottom: 4px; } .pt-kategori-kutu b { font-size: .88rem; } .pt-kategori-kutu small { font-size: .72rem; color: var(--soluk); line-height: 1.3; } .pt-kategori:hover .pt-kategori-kutu { border-color: color-mix(in srgb, var(--t-mavi) 50%, var(--cizgi)); } .pt-kategori input:checked + .pt-kategori-kutu { border-color: var(--t-mavi); background: var(--t-mavi-z); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-mavi) 18%, transparent); } .pt-kategori input:focus-visible + .pt-kategori-kutu, .pt-acil input:focus-visible + span { outline: 2px solid var(--t-mavi); outline-offset: 2px; } .pt-aciliyet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .pt-acil > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border: 1.5px solid var(--cizgi); border-radius: 12px; transition: all .15s; --a: var(--t-mavi); --az: var(--t-mavi-z); } .pt-acil-dusuk > span { --a: #8aa0a0; --az: #f1f5f5; } .pt-acil-yuksek > span { --a: var(--t-turuncu); --az: var(--t-turuncu-z); } .pt-acil-kritik > span { --a: var(--t-kirmizi); --az: var(--t-kirmizi-z); } .pt-acil i { color: var(--a); font-size: 1.15rem; } .pt-acil b { font-size: .9rem; } .pt-acil small { font-size: .72rem; color: var(--soluk); line-height: 1.3; } .pt-acil input:checked + span { border-color: var(--a); background: var(--az); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 18%, transparent); } .pt-gonder { display: flex; align-items: center; gap: 10px; padding: 4px 0 20px; } /* Talep detayı */ .pt-detay-ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 6px 0 14px; } .pt-ilgilenen { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--t-golge); } .pt-ilgilenen i { font-size: 1.3rem; color: var(--t-yesil); } .pt-ilgilenen span { display: flex; flex-direction: column; line-height: 1.2; } .pt-ilgilenen small { font-size: .7rem; color: var(--soluk); } .pt-adimlar-cizgi { display: flex; list-style: none; padding: 16px 20px; margin: 0 0 16px; background: #fff; border: 1px solid var(--cizgi); border-radius: 16px; box-shadow: var(--t-golge); counter-reset: a; } .pt-adimlar-cizgi li { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; position: relative; color: var(--soluk); font-size: .84rem; } .pt-adimlar-cizgi li + li::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 3px; background: #e3eaea; z-index: 0; } .pt-adimlar-cizgi li.tamam + li.tamam::before { background: var(--t-yesil); } .pt-adimlar-cizgi li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #eef3f3; color: #9aabaa; font-size: 1rem; } .pt-adimlar-cizgi li.tamam > span { background: var(--t-yesil); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--t-yesil) 35%, transparent); } .pt-adimlar-cizgi li.bekliyor > span { background: var(--t-amber); } .pt-adimlar-cizgi li.tamam b { color: var(--murekkep); } .pt-adimlar-cizgi small { font-size: .72rem; min-height: 1em; } .pt-mesajlar { display: flex; flex-direction: column; gap: 10px; } .pt-mesaj { max-width: 88%; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--t-golge); } .pt-mesaj.musteri { align-self: flex-end; background: var(--t-mavi-z); border-color: color-mix(in srgb, var(--t-mavi) 25%, var(--cizgi)); border-bottom-right-radius: 4px; } .pt-mesaj.ekip { align-self: flex-start; border-bottom-left-radius: 4px; border-left: 3px solid var(--t-yesil); } .pt-mesaj-ust { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; margin-bottom: 4px; } .pt-mesaj-ust small { color: var(--soluk); } .pt-yanit { margin-top: 14px; padding: 16px; } .pt-bilgi { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 14px 16px; margin: 0; font-size: .86rem; } .pt-bilgi dt { color: var(--soluk); font-weight: 500; } .pt-bilgi dd { margin: 0; } .pt-puan { padding: 16px 18px; margin-bottom: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--t-golge); } .pt-puan.yeni { background: linear-gradient(135deg, #fff8ea, #fff); border-color: color-mix(in srgb, #e5a33a 40%, var(--cizgi)); } .pt-puan-baslik { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .pt-puan-baslik > i { font-size: 1.5rem; color: #e5a33a; } .pt-puan-baslik small { display: block; color: var(--soluk); font-size: .8rem; } .pt-puan-form { display: flex; flex-direction: column; gap: 8px; } .pt-yildiz-sec { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .pt-yildiz-sec input { position: absolute; opacity: 0; pointer-events: none; } .pt-yildiz-sec label { font-size: 2rem; line-height: 1; color: #d9e2e2; cursor: pointer; transition: color .1s, transform .1s; } .pt-yildiz-sec label:hover, .pt-yildiz-sec label:hover ~ label, .pt-yildiz-sec input:checked ~ label { color: #e5a33a; } .pt-yildiz-sec label:hover { transform: scale(1.12); } .pt-yildiz-sec input:focus-visible + label { outline: 2px solid var(--t-mavi); border-radius: 4px; } .pt-puan-etiket { font-size: .82rem; color: var(--soluk); } /* Personel ticket detayında müşteri puanı */ .musteri-puani { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--t-golge); } .musteri-puani.iyi { background: var(--t-yesil-z); border-color: color-mix(in srgb, var(--t-yesil) 30%, transparent); } .musteri-puani.dusuk { background: var(--t-kirmizi-z); border-color: color-mix(in srgb, var(--t-kirmizi) 35%, transparent); } .musteri-puani-yildiz { color: #e5a33a; font-size: 1.1rem; letter-spacing: 1px; } .musteri-puani-yildiz span { color: #d9e2e2; } /* Rapor */ .pr-donem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .pr-ozel { display: flex; align-items: center; gap: 6px; margin-left: auto; } .pr-ozel .form-control { width: auto; border-radius: 10px; } .pr-ozet { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; } .pr-ozet .bk-kpi strong { font-size: 1.35rem; } .pr-lejant { display: flex; gap: 12px; font-size: .74rem; color: var(--soluk); } .pr-lejant span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--t-mavi); } .pr-lejant .yesil::before { background: var(--t-yesil); } .pr-grafik { display: flex; align-items: flex-end; gap: 8px; height: 220px; padding: 18px 16px 10px; } .pr-ay { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; } .pr-ay small { font-size: .7rem; color: var(--soluk); white-space: nowrap; } .pr-cubuklar { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; } .pr-cubuklar span { position: relative; width: min(18px, 40%); min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--t-mavi); } .pr-cubuklar span.yesil { background: var(--t-yesil); } .pr-cubuklar b { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: .66rem; color: var(--soluk); } .pr-yatay { display: flex; flex-direction: column; gap: 10px; padding: 16px; } .pr-yatay-satir { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 32px; align-items: center; gap: 10px; font-size: .84rem; } .pr-yatay-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-yatay-ad i { color: var(--soluk); margin-right: 4px; } .pr-yatay-bar { height: 10px; border-radius: 999px; background: #eef3f3; overflow: hidden; } .pr-yatay-bar span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--t-mavi); } .pr-yatay-bar span.yesil { background: var(--t-yesil); } .pr-yatay-bar span.mor { background: var(--t-mor); } .pr-yatay-bar span.turuncu { background: var(--t-turuncu); } .pr-yatay-satir b { text-align: right; font-variant-numeric: tabular-nums; } .pr-tablo { font-size: .84rem; } .pr-tablo thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); background: #fbfcfc; padding: 8px 12px; } .pr-tablo td { padding: 7px 12px; vertical-align: top; } .pr-puan { color: #e5a33a; } .pr-not { font-size: .74rem; color: var(--soluk); margin: 14px 2px 0; } .pr-baski-ust { display: none; } @media (max-width: 991.98px) { .pt-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-kategoriler, .pt-aciliyet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-liste.pt-tl { --tl-kolon: 4px minmax(0, 1fr) 150px 120px; } .tl-liste.pt-tl .tl-atanan, .tl-liste.pt-tl .tl-baslik span:nth-child(4) { display: none; } .tl-liste.pt-tl .tl-zaman { display: flex; } .pr-ozel { margin-left: 0; } } @media (max-width: 767.98px) { .pt-hero { padding: 20px; } .pt-hero h1 { font-size: 1.3rem; } .pt-hero-dugmeler { width: 100%; } .pt-mesaj { max-width: 100%; } .tl-liste.pt-tl .tl-satir { grid-template-areas: "s a a" "s d d"; } .tl-liste.pt-tl .tl-zaman { display: none; } .pr-grafik { gap: 3px; padding: 18px 8px 8px; } .pr-yatay-satir { grid-template-columns: 110px 1fr 28px; } } @media print { .pr-baski-ust { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid #3fae9c; } .pr-baski-ust img { height: 44px; } .pr-baski-ust div { display: flex; flex-direction: column; font-size: .8rem; } .pr-donem, .bk-ust .btn { display: none !important; } .bk-kart, .bk-kpi { box-shadow: none !important; break-inside: avoid; } .pr-ozet { grid-template-columns: repeat(4, 1fr); } .pr-tablo a { color: inherit; text-decoration: none; } .pr-grafik span, .pr-yatay-bar span, .bk-kpi > i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .col-lg-7, .col-lg-5, .col-lg-6 { width: 50% !important; flex: 0 0 auto; } } @media (min-width: 768px) and (max-width: 1199.98px) { .tl-liste.pt-tl .tl-zaman { display: flex; } .tl-liste.pt-tl .tl-baslik span:nth-child(5) { display: inline; } } .pt-ozet .bk-kpi span, .pr-ozet .bk-kpi span { white-space: normal; line-height: 1.25; } .pt-ozet .bk-kpi > div, .pr-ozet .bk-kpi > div { min-width: 0; } /* ========================================================================== Sol menü: biraz daha geniş, ferah dikey boşluklar, koyu ince kaydırma çubuğu ========================================================================== */ :root { --yan-genislik: 300px; } .yan-ust { padding: 1.15rem 1.1rem .85rem 1.2rem; } .yan-gezinti { padding: .3rem .85rem 1rem; } .menu-oge { padding: .44rem .8rem; margin-bottom: 1px; } /* dikey boşluk sıkı, yatay aynı */ .menu-oge.aktif::before { left: -.85rem; } .menu-grup { margin-top: .3rem; } .menu-grup > summary.grup-baslik { padding: .55rem .8rem .35rem; margin-bottom: .1rem; } .menu-grup[open]::before { top: 2.2rem; } .menu-oge.menu-alt { margin-top: 10px; } .menu-oge.menu-alt::after { top: -6px; } /* Kaydırma çubuğu: beyaz şerit yerine menüyle uyumlu, ince ve yalnızca üzerine gelince belirgin */ .yan-menu, .yan-gezinti { scrollbar-width: thin; scrollbar-color: transparent transparent; } .yan-menu:hover, .yan-gezinti:hover, .yan-gezinti:focus-within { scrollbar-color: rgba(255, 255, 255, .18) transparent; } .yan-menu::-webkit-scrollbar, .yan-gezinti::-webkit-scrollbar { width: 6px; background: transparent; } .yan-menu::-webkit-scrollbar-track, .yan-gezinti::-webkit-scrollbar-track { background: transparent; } .yan-menu::-webkit-scrollbar-thumb, .yan-gezinti::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; } .yan-menu:hover::-webkit-scrollbar-thumb, .yan-gezinti:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); } .yan-menu::-webkit-scrollbar-thumb:hover, .yan-gezinti::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); } .yan-menu::-webkit-scrollbar-button, .yan-gezinti::-webkit-scrollbar-button { display: none; height: 0; } /* ========================================================================== Çözüm arşivi (cz-*) ========================================================================== */ .cz-arama { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .cz-kutu { position: relative; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; background: #fff; border: 1.5px solid var(--cizgi); border-radius: 16px; box-shadow: var(--t-golge); transition: border-color .15s, box-shadow .15s; } .cz-kutu:focus-within { border-color: var(--t-mavi); box-shadow: 0 0 0 4px var(--t-mavi-z); } .cz-kutu > i { color: var(--soluk); font-size: 1.1rem; } .cz-kutu input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 1.05rem; padding: 8px 4px; background: transparent; } .cz-kutu .btn { border-radius: 12px; padding: 8px 22px; } .cz-suzgec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cz-suzgec .form-select { width: auto; min-width: 160px; border-radius: 10px; } .cz-tur { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; font-size: .82rem; color: var(--soluk); font-weight: 500; cursor: pointer; margin: 0; } .cz-tur input { position: absolute; opacity: 0; pointer-events: none; } .cz-tur:hover { color: var(--murekkep); } .cz-tur.aktif { background: #fff; color: var(--murekkep); box-shadow: 0 1px 3px rgba(12, 35, 43, .12); } .cz-tur b { font-size: .7rem; padding: 0 6px; border-radius: 999px; background: #e3eaea; } .cz-tur.aktif b { background: var(--t-mavi); color: #fff; } .cz-ipucu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; background: var(--t-amber-z); border: 1px solid color-mix(in srgb, var(--t-amber) 25%, transparent); font-size: .84rem; } .cz-ipucu > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 4px; } .cz-ipucu b { color: var(--t-amber-k); } .cz-oneriler { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-width: 460px; } .cz-oneriler a { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); color: var(--murekkep); font-size: .78rem; } .cz-oneriler a:hover { border-color: var(--t-mavi); color: var(--t-mavi-k); text-decoration: none; } .cz-alt-baslik { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); margin: 0 2px 10px; } .cz-gevsek { padding: 8px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--t-mavi-z); color: var(--t-mavi-k); font-size: .84rem; } .cz-sonuclar { display: flex; flex-direction: column; gap: 12px; } .cz-kart { background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--cz-k, var(--t-mavi)); border-radius: 14px; box-shadow: var(--t-golge); overflow: hidden; } .cz-kart.cz-ticket { --cz-k: var(--t-mavi); --cz-z: var(--t-mavi-z); } .cz-kart.cz-destek { --cz-k: var(--t-yesil); --cz-z: var(--t-yesil-z); } .cz-kart.cz-servis { --cz-k: var(--t-mor); --cz-z: var(--t-mor-z); } .cz-kart-ust { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 6px; } .cz-ac { flex: none; white-space: nowrap; margin-left: auto; } .cz-ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cz-z); color: var(--cz-k); } .cz-kart-baslik { min-width: 0; flex: 1; } .cz-baslik { font-size: 1rem; font-weight: 700; color: var(--murekkep); } .cz-baslik:hover { color: var(--t-mavi-k); } .cz-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: .76rem; color: var(--soluk); } .cz-meta a { color: inherit; } .cz-meta a:hover { color: var(--t-mavi-k); } .cz-tur-etiket { font-weight: 700; color: color-mix(in srgb, var(--cz-k) 85%, #1d3a40); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; align-self: center; } .cz-etiket { padding: 0 8px; border-radius: 6px; background: var(--zemin); } .cz-yildiz { color: #e5a33a; } .cz-govde { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 6px 16px 14px 64px; } .cz-bolum { padding: 10px 12px; border-radius: 10px; } .cz-bolum.sorun { background: #fbf6f4; } .cz-bolum.cozum { background: var(--t-yesil-z); } .cz-bolum-ad { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .cz-bolum.sorun .cz-bolum-ad { color: var(--t-kirmizi-k); } .cz-bolum.cozum .cz-bolum-ad { color: var(--t-yesil-k); } .cz-bolum p { margin: 0; font-size: .86rem; line-height: 1.5; color: #2c4449; } .cz-kart mark { padding: 0 2px; border-radius: 3px; background: #ffe79a; color: inherit; } .cz-kart-alt { display: flex; justify-content: flex-end; padding: 0 16px 12px; } @media (max-width: 991.98px) { .cz-govde { grid-template-columns: 1fr; padding-left: 16px; } .cz-kutu input { font-size: .95rem; } } /* ========================================================================== Kısayollar (ks-*) ========================================================================== */ .ks-yesil { --ks: var(--t-yesil); --ks-z: var(--t-yesil-z); } .ks-mavi { --ks: var(--t-mavi); --ks-z: var(--t-mavi-z); } .ks-mor { --ks: var(--t-mor); --ks-z: var(--t-mor-z); } .ks-turuncu { --ks: var(--t-turuncu); --ks-z: var(--t-turuncu-z); } .ks-amber { --ks: var(--t-amber); --ks-z: var(--t-amber-z); } .ks-kirmizi { --ks: var(--t-kirmizi); --ks-z: var(--t-kirmizi-z); } .ks-gri { --ks: #6f8488; --ks-z: #eef2f2; } .ks-ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ks-z, #eef2f2); color: var(--ks, #6f8488); font-size: 1.05rem; } /* sol menü */ .menu-kisayol .menu-oge i[class*="ks-menu-"] { opacity: .95; } .ks-menu-yesil { color: #6fd1bf !important; } .ks-menu-mavi { color: #8db6ea !important; } .ks-menu-mor { color: #b9a5ec !important; } .ks-menu-turuncu { color: #f0a883 !important; } .ks-menu-amber { color: #e8c06e !important; } .ks-menu-kirmizi { color: #ee9d95 !important; } .ks-menu-gri { color: #a9bcbf !important; } button.menu-oge { width: 100%; border: 0; background: none; text-align: left; font: inherit; } .menu-oge.menu-kisayol-islem { color: #86a2a8; font-size: .84rem; padding-top: .4rem; padding-bottom: .4rem; } .menu-oge.menu-kisayol-islem i { font-size: .9rem; } .menu-oge.menu-kisayol-islem:hover { color: #fff; } /* pano şeridi */ .pn-kisayollar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; } .pn-ks { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--t-golge); color: var(--murekkep); transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; } .pn-ks:hover { text-decoration: none; color: var(--murekkep); transform: translateY(-2px); box-shadow: var(--t-golge-hover); border-color: color-mix(in srgb, var(--ks, var(--t-yesil)) 40%, var(--cizgi)); } .pn-ks-ad { font-size: .86rem; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pn-ks-duzenle { border-style: dashed; background: transparent; box-shadow: none; color: var(--soluk); } .pn-ks-duzenle .ks-ikon { background: transparent; border: 1px dashed #c5d3d1; } .pn-ks-ipucu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 18px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--t-amber) 45%, var(--cizgi)); background: color-mix(in srgb, var(--t-amber-z) 60%, #fff); color: var(--murekkep); font-size: .86rem; } .pn-ks-ipucu:hover { text-decoration: none; color: var(--murekkep); border-style: solid; } .pn-ks-ipucu > i { color: var(--t-amber); font-size: 1.1rem; } .pn-ks-ipucu-dugme { margin-left: auto; font-weight: 600; color: var(--t-amber-k); white-space: nowrap; } /* yönetim ekranı */ .ks-kart > .bk-kart-ust h2 i { color: var(--t-amber); } .ks-bos { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; color: var(--soluk); font-size: .88rem; } .ks-bos > i { font-size: 1.8rem; color: var(--t-amber); } .ks-bos strong { color: var(--murekkep); } .ks-liste { list-style: none; margin: 0; padding: 6px 8px; } .ks-oge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 10px; border-bottom: 1px solid #eef2f2; background: #fff; } .ks-oge:last-child { border-bottom: 0; } .ks-oge:hover { background: #f8fafa; } .ks-oge.tasiniyor { opacity: .5; background: var(--t-mavi-z); } .ks-tut { cursor: grab; color: #b3c2c2; padding: 0 2px; } .ks-tut:active { cursor: grabbing; } .ks-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; color: var(--murekkep); } .ks-ad:hover { text-decoration: none; color: var(--t-mavi-k); } .ks-ad b { font-weight: 600; font-size: .9rem; } .ks-ad small { color: var(--soluk); font-size: .72rem; font-family: var(--bs-font-monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ks-duzenle { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 4px 34px; } .ks-duzenle[hidden] { display: none; } .ks-secim { display: flex; flex-wrap: wrap; gap: 6px; } .ks-secim input { position: absolute; opacity: 0; pointer-events: none; } .ks-renk { margin: 0; cursor: pointer; } .ks-renk span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--ks); box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent; transition: box-shadow .12s; } .ks-renk input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ks); } .ks-ikon-sec { margin: 0; cursor: pointer; } .ks-ikon-sec span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--cizgi); color: var(--soluk); } .ks-ikon-sec input:checked + span { border-color: var(--t-mavi); background: var(--t-mavi-z); color: var(--t-mavi-k); } .ks-ozel { padding: 14px 16px; } .ks-katalog { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; } .ks-grup-ad { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); margin-bottom: 6px; } .ks-grup-ogeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .ks-hazir { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--cizgi); background: #fff; text-align: left; color: var(--murekkep); transition: border-color .12s, background .12s; } .ks-hazir:hover:not(:disabled) { border-color: var(--t-mavi); background: #f8fbfd; } .ks-hazir .ks-ikon { width: 32px; height: 32px; font-size: .95rem; } .ks-hazir-ad { flex: 1; font-size: .86rem; font-weight: 500; line-height: 1.25; } .ks-hazir-arti { color: var(--t-mavi); } .ks-hazir.ekli { opacity: .55; } .ks-hazir.ekli .ks-hazir-arti { color: var(--t-yesil); } .ks-hazir:disabled { cursor: default; } /* "Kısayollarım" başlığının sağındaki düzenle simgesi */ .menu-grup > summary.grup-baslik .grup-duzenle { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 6px; color: #7f9ba1; font-size: .8rem; text-decoration: none; transition: background .12s, color .12s; } .menu-grup > summary.grup-baslik .grup-duzenle:hover, .menu-grup > summary.grup-baslik .grup-duzenle.aktif { background: rgba(255, 255, 255, .1); color: #5fd3bf; } .menu-grup > summary.grup-baslik .grup-duzenle + .grup-ok { margin-left: 2px; } /* ========================================================================== Tarayıcıda uzak masaüstü: doğrulama, iki adım kurulumu, kayıt oynatıcı (ek-*, oy-*) ========================================================================== */ .ek-dogrula { max-width: 440px; margin: 6vh auto 0; } .ek-dogrula-ikon { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 1.6rem; background: var(--t-mavi-z); color: var(--t-mavi-k); flex: 0 0 auto; } .ek-kod { font-family: "IBM Plex Mono", Consolas, monospace; letter-spacing: .35em; font-size: 1.5rem; } .ek-onay .ek-kod { font-size: 1.1rem; max-width: 200px; } .ek-adimlar { padding-left: 1.2rem; margin: 0; } .ek-adimlar > li { margin-bottom: 18px; } .ek-adimlar > li:last-child { margin-bottom: 0; } .ek-qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 10px; } .ek-qr img { border: 1px solid var(--cizgi); border-radius: 12px; padding: 6px; background: #fff; image-rendering: pixelated; } .ek-anahtar { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: #f1f5f5; font-size: .95rem; letter-spacing: .04em; } .oy-kutu { background: #0f1a20; border-radius: 14px; overflow: hidden; border: 1px solid #24363f; } .oy-ekran { position: relative; min-height: 360px; display: flex; justify-content: center; align-items: flex-start; background: #000; } .oy-perde { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #cfdcdf; z-index: 2; background: #0f1a20; } .oy-perde[hidden] { display: none; } .oy-cubuk { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #16252d; color: #e6eef0; } .oy-cubuk input[type=range] { flex: 1; accent-color: var(--t-yesil); } .oy-zaman { font: .8rem "IBM Plex Mono", Consolas, monospace; min-width: 48px; text-align: center; } /* ---- Doğrulama kodu ekranı (dg-*) */ .dg { max-width: 460px; margin: 5vh auto 0; padding: 0 4px; } .dg-kart { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(12, 35, 43, .06), 0 18px 48px -12px rgba(12, 35, 43, .22); border: 1px solid var(--cizgi); } .dg-ust { position: relative; text-align: center; padding: 34px 28px 26px; color: #e8f1f2; background: radial-gradient(120% 140% at 50% 0%, #1d4a55 0%, var(--petrol-900) 62%); } .dg-ust::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--t-yesil), var(--t-mavi)); } .dg-kalkan { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; font-size: 1.75rem; color: #fff; background: linear-gradient(145deg, var(--t-yesil), #2c7f78); box-shadow: 0 0 0 6px rgba(63, 174, 156, .16), 0 10px 24px -6px rgba(63, 174, 156, .6); } .dg-ust h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px; color: #fff; letter-spacing: -.01em; } .dg-ust p { margin: 0; font-size: .86rem; color: #a9c1c5; } .dg-ust p b { color: #e8f1f2; font-weight: 600; } .dg-govde { padding: 22px 28px 24px; } .dg-hedef { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #f4f8f8; border: 1px solid var(--cizgi); } .dg-hedef-ikon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--t-mavi-z); color: var(--t-mavi-k); font-size: 1.05rem; } .dg-hedef-metin { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; } .dg-hedef-metin b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dg-hedef-metin span { font-size: .78rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dg-hedef-kullanici { flex: none; font: 500 .74rem "IBM Plex Mono", Consolas, monospace; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); color: var(--murekkep); } .dg-hata { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 12px; font-size: .84rem; background: var(--t-kirmizi-z, #fdf1f0); color: var(--t-kirmizi-k, #b2443d); border: 1px solid color-mix(in srgb, var(--t-kirmizi, #d9625a) 30%, transparent); } .dg-hata i { margin-top: 1px; } .dg-kutular { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 22px 0 14px; } .dg-ayrac { width: 10px; height: 2px; border-radius: 2px; background: var(--cizgi); margin: 0 2px; } .dg-hane { width: 50px; height: 60px; text-align: center; font: 600 1.6rem/1 "IBM Plex Mono", Consolas, monospace; color: var(--murekkep); border: 1.5px solid var(--cizgi); border-radius: 13px; background: #fbfcfc; outline: none; caret-color: var(--t-yesil); transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; } .dg-hane:focus { border-color: var(--t-yesil); background: #fff; box-shadow: 0 0 0 4px rgba(63, 174, 156, .15); transform: translateY(-1px); } .dg-hane.dolu { border-color: color-mix(in srgb, var(--t-yesil) 55%, var(--cizgi)); background: #fff; } .dg-kutular.hata .dg-hane { border-color: color-mix(in srgb, var(--t-kirmizi, #d9625a) 60%, #fff); animation: dg-salla .35s; } @keyframes dg-salla { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @media (max-width: 420px) { .dg-hane { width: 40px; height: 52px; font-size: 1.35rem; } .dg-kutular { gap: 6px; } .dg-govde, .dg-ust { padding-left: 18px; padding-right: 18px; } } .dg-sayac { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .8rem; color: var(--soluk); margin-bottom: 18px; } .dg-sayac svg { width: 22px; height: 22px; transform: rotate(-90deg); } .dg-sayac circle { fill: none; stroke-width: 3.5; } .dg-sayac .iz { stroke: #e6eeee; } .dg-sayac .dolu { stroke: var(--t-yesil); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; } .dg-sayac.az .dolu { stroke: var(--t-amber); } .dg-sayac.az b { color: var(--t-amber-k); } .dg-dugme { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border: 0; border-radius: 13px; font-weight: 600; font-size: .95rem; color: #fff; background: linear-gradient(180deg, #45b5a3, #2f8e86); box-shadow: 0 8px 18px -8px rgba(47, 142, 134, .7); transition: filter .15s, opacity .15s; } .dg-dugme:hover:not(:disabled) { filter: brightness(1.05); } .dg-dugme:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; } .dg-dugme.bekliyor { opacity: .8; cursor: progress; } .dg-alt { padding: 14px 28px 18px; background: #f7fafa; border-top: 1px solid var(--cizgi); display: grid; gap: 6px; font-size: .78rem; color: var(--soluk); } .dg-alt div { display: flex; gap: 8px; align-items: flex-start; } .dg-alt i { color: var(--t-yesil-k); margin-top: 1px; } .dg-geri { display: inline-flex; gap: 6px; align-items: center; margin: 14px auto 0; font-size: .82rem; color: var(--soluk); text-decoration: none; width: 100%; justify-content: center; } .dg-geri:hover { color: var(--murekkep); } /* giriş ekranındaki ikinci adım */ .dg-giris { margin: 0 auto; width: 100%; max-width: 440px; } .dg-kurulum { margin: 0 0 12px; padding-left: 1.2rem; font-size: .86rem; } .dg-kurulum li { margin-bottom: 4px; } .dg-qr { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--cizgi); border-radius: 14px; background: #f7fafa; } .dg-qr img { flex: none; border-radius: 10px; background: #fff; padding: 4px; border: 1px solid var(--cizgi); image-rendering: pixelated; width: 150px; height: 150px; } .dg-qr div { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--soluk); min-width: 0; } .dg-qr code { font-size: .82rem; color: var(--murekkep); background: #fff; border: 1px solid var(--cizgi); padding: 5px 8px; border-radius: 8px; word-break: break-all; } .dg-adim3 { margin-top: 14px; font-size: .86rem; font-weight: 600; } .dg-hatirla { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .84rem; cursor: pointer; } .dg-hatirla input { margin-top: 2px; flex: none; } .dg-hatirla small { display: block; color: var(--soluk); } @media (max-width: 420px) { .dg-qr { flex-direction: column; text-align: center; } } /* ---- Ticket: yapılan işler (ti-*) */ .ti-toplam { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; padding: 3px 10px; border-radius: 999px; background: var(--t-yesil-z); color: var(--t-yesil-k); border: 1px solid color-mix(in srgb, var(--t-yesil) 30%, transparent); } .ti-is { padding: 12px 16px; background: #fff; } .ti-is-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .8rem; color: var(--soluk); } .ti-is-kim { font-weight: 600; color: var(--murekkep); } .ti-is-ust .ti-sure { margin-left: auto; font-weight: 700; font-size: .8rem; color: var(--t-mavi-k); background: var(--t-mavi-z); border: 1px solid color-mix(in srgb, var(--t-mavi) 30%, transparent); padding: 2px 10px; border-radius: 999px; white-space: nowrap; } .ti-sil { line-height: 1; } .ti-sil:hover { color: var(--t-kirmizi-k) !important; } .ti-is-tespit { margin-top: 6px; font-size: .84rem; color: var(--soluk); white-space: pre-line; } .ti-is-tespit b { color: var(--murekkep); font-weight: 600; } .ti-is-metin { margin-top: 4px; font-size: .9rem; white-space: pre-line; } .ti-is-form { background: #fafcfc; border-top: 1px solid var(--cizgi); } .ti-is-form .form-label { font-size: .8rem; margin-bottom: 2px; } /* ========================================================================== Giriş ekranı sol panel ve form kartı (gs-*, gk-*) ========================================================================== */ .giris-sahne { grid-template-columns: minmax(360px, 46%) 1fr; } .giris-sol { justify-content: space-between; gap: 2.5rem; padding: 3rem 3.5rem 2rem; color: #c9d6d8; isolation: isolate; background: radial-gradient(60% 50% at 0% 0%, rgba(63, 174, 156, .22), transparent 70%), radial-gradient(55% 45% at 100% 100%, rgba(91, 143, 208, .20), transparent 70%), radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--petrol-900); } .gs-desen { position: absolute; z-index: -1; right: -180px; top: 50%; transform: translateY(-50%); width: 72%; max-width: 560px; color: rgba(126, 196, 186, .11); pointer-events: none; } .giris-logo { width: min(320px, 80%); margin-top: 0; } .gs-orta { max-width: 470px; } .giris-sol .gs-orta h1 { font-size: clamp(1.7rem, 2.4vw, 2.35rem); line-height: 1.18; max-width: 18ch; letter-spacing: -.01em; margin-bottom: .8rem; } .giris-sol .gs-orta > p { color: #9fb6bb; font-size: 1rem; margin-bottom: 1.75rem; } .gs-ozellik { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .gs-ozellik li { display: flex; gap: 14px; align-items: center; } .gs-ozellik li > span { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); } .gs-ozellik li > span.yesil i { color: #6fd3c1; } .gs-ozellik li > span.mavi i { color: #8db7ea; } .gs-ozellik li > span.mor i { color: #b9a3e6; } .gs-ozellik li > span.turuncu i { color: #f0b27a; } .gs-ozellik b { display: block; color: #eef5f6; font-weight: 600; font-size: .95rem; } .gs-ozellik small { color: #8fa8ad; font-size: .82rem; } .gs-alt { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: #7f989d; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1rem; } .gs-alt i { margin-right: 4px; } .giris-sag { background: radial-gradient(70% 60% at 50% 40%, #fff 0%, transparent 75%), var(--zemin); } .gk-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: 20px; padding: 2.25rem 2rem 1.75rem; max-width: 420px; box-shadow: 0 1px 2px rgba(12, 35, 43, .05), 0 22px 50px -18px rgba(12, 35, 43, .25); } .gk-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.25rem; color: #fff; background: linear-gradient(145deg, var(--t-yesil), #2c7f78); box-shadow: 0 8px 18px -8px rgba(47, 142, 134, .7); } @media (max-width: 991.98px) { .giris-sol { padding: 2.25rem 2rem 1.5rem; } .gs-desen { display: none; } } @media (max-width: 767.98px) { .giris-sol { padding: 1.5rem; gap: 1rem; } .gs-orta, .gs-alt { display: none; } .giris-logo { width: 200px; margin: 0 auto; } .gk-kart { padding: 1.5rem 1.25rem; border-radius: 16px; } } /* ========================================================================== Raporlar (rp-*) ========================================================================== */ .rp-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .rp-kart { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--cizgi); color: inherit; text-decoration: none; box-shadow: var(--t-golge); transition: transform .12s, box-shadow .12s, border-color .12s; } .rp-kart:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--t-yesil) 45%, var(--cizgi)); color: inherit; } .rp-ikon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; background: var(--ks-z, #eef2f2); color: var(--ks, #6f8488); } .rp-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rp-metin b { font-size: .95rem; } .rp-metin small { color: var(--soluk); font-size: .8rem; } .rp-bicim { display: flex; gap: 4px; color: var(--soluk); font-size: 1.05rem; } .rp-bicim i:first-child { color: #1d7044; } .rp-bicim i:last-child { color: #c0392b; } .rp-suzgec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding: 10px; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; } .rp-suzgec .form-select { width: auto; min-width: 190px; } .rp-donemler { display: inline-flex; padding: 3px; background: #f1f5f5; border-radius: 10px; gap: 2px; } .rp-donem { border: 0; background: transparent; padding: 4px 11px; border-radius: 8px; font-size: .82rem; color: var(--soluk); } .rp-donem:hover { color: var(--murekkep); } .rp-donem.aktif { background: #fff; color: var(--murekkep); font-weight: 600; box-shadow: 0 1px 2px rgba(12, 35, 43, .12); } .rp-tarih { display: inline-flex; align-items: center; gap: 6px; } .rp-tarih input { width: 150px; } .rp-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; } .rp-ozet div { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; } .rp-ozet span { font-size: .76rem; color: var(--soluk); } .rp-ozet b { font-size: 1.2rem; color: var(--murekkep); } .rp-tablo { font-size: .84rem; } .rp-tablo thead th { background: var(--petrol-900); color: #fff; font-weight: 600; font-size: .78rem; white-space: nowrap; position: sticky; top: 0; border: 0; } .rp-tablo th.rp-uzun { min-width: 280px; } .rp-tablo tfoot td { background: var(--t-yesil-z); font-weight: 700; border-top: 2px solid var(--t-yesil); } .rp-tablo-kart .table-responsive { max-height: 70vh; } /* ========================================================================== Muhasebe (mh-*) ========================================================================== */ .mh-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .mh-firma { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; flex-wrap: wrap; } .mh-firma-ikon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--t-amber-z); color: var(--t-amber-k); font-size: 1.1rem; } .mh-firma small { display: block; font-size: .72rem; color: var(--soluk); } .mh-firma b { font-size: .92rem; } .mh-firma-sec .form-select { min-width: 300px; } .mh-sekmeler { margin: 0; } .mh-yakinda { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .85rem; color: var(--soluk); opacity: .7; } .mh-yakinda small { font-size: .68rem; background: var(--t-amber-z); color: var(--t-amber-k); padding: 1px 6px; border-radius: 999px; } .mh-arac { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; } .mh-tablo td { font-size: .84rem; } .mh-alicilar { display: grid; gap: 8px; max-height: 50vh; overflow: auto; } .mh-alici { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1.2fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fafcfc; } .mh-alici-ad { min-width: 0; display: flex; flex-direction: column; } .mh-alici-ad b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mh-alici-ad small { color: var(--soluk); font-size: .74rem; } @media (max-width: 640px) { .mh-alici { grid-template-columns: 1fr; } } /* ===== Muhasebe › Banka aktarımı ===== */ .ba-ust { display: grid; gap: 10px; margin-bottom: 14px; } .ba-yukle { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px dashed #b9cfcc; border-radius: 14px; } .ba-yukle-ikon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--t-yesil-z); color: var(--t-yesil-k); font-size: 1.2rem; flex: none; } .ba-yukle-metin { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; } .ba-yukle-metin small { color: var(--soluk); font-size: .76rem; } .ba-yukle input[type=file] { max-width: 300px; } .ba-hesaplar { background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 4px 14px; } .ba-hesaplar > summary { cursor: pointer; padding: 8px 0; font-size: .88rem; font-weight: 600; } .ba-hesap { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(120px, .8fr) minmax(220px, 1.4fr) minmax(150px, .9fr) auto; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--cizgi); } .ba-hesap label { font-size: .72rem; color: var(--soluk); display: flex; flex-direction: column; gap: 3px; margin: 0; } .ba-hesap-ad { display: flex; flex-direction: column; align-self: center; } .ba-hesap-ad b { font-size: .88rem; } .ba-hesap-ad small { color: var(--soluk); font-size: .74rem; } @media (max-width: 900px) { .ba-hesap { grid-template-columns: 1fr 1fr; } .ba-hesap-ad { grid-column: 1 / -1; } } .ba-sayi { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--t-gri-z); font-size: .72rem; font-weight: 600; text-align: center; } .rp-donem.aktif .ba-sayi { background: var(--t-amber-z); color: var(--t-amber-k); } .ba-tablo td { font-size: .84rem; vertical-align: top; padding-top: 9px; padding-bottom: 9px; } .ba-satir { border-left: 3px solid transparent; } .ba-soluk td { opacity: .62; } .ba-hareket { min-width: 260px; max-width: 520px; } .ba-hareket-ust { display: flex; align-items: baseline; gap: 7px; } .ba-hareket-ust b { font-weight: 600; } .ba-hareket small { line-height: 1.45; margin-top: 2px; } .ba-tur { flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; } .ba-tur-gelen { background: var(--t-yesil-z); color: var(--t-yesil-k); } .ba-tur-giden { background: var(--t-kirmizi-z); color: var(--t-kirmizi-k); } .ba-tur-fon { background: var(--t-mor-z); color: var(--t-mor-k); } .ba-tur-masraf { background: var(--t-amber-z); color: var(--t-amber-k); } .ba-tur-faiz { background: var(--t-mavi-z); color: var(--t-mavi-k); } .ba-not { display: inline-block; margin-left: 6px; color: var(--murekkep); } .ba-iban { display: inline-block; margin-left: 6px; font-family: Consolas, monospace; font-size: .72rem; color: var(--soluk); } .ba-cari { min-width: 230px; } .ba-cari code { font-size: .78rem; } .ba-oneri { display: flex; flex-direction: column; padding: 5px 9px; border-radius: 9px; background: var(--t-amber-z); border: 1px dashed #e2c27f; } .ba-oneri > small:first-child { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t-amber-k); } .ba-islem .btn { margin-left: 3px; } .ba-sonuc { display: grid; gap: 4px; margin-top: 10px; } .ba-sonuc-baslik { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); padding: 2px 4px; } .ba-sonuc-oge { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 8px 10px; background: #fff; border: 1px solid var(--cizgi); border-radius: 9px; font-size: .86rem; } .ba-sonuc-oge:hover { border-color: #3fae9c; background: #f3faf8; } .ba-sonuc-oge span { flex: 1; min-width: 0; } .ba-sonuc-oge small { color: var(--soluk); font-size: .72rem; } .ba-adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .ba-adimlar > div { display: flex; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; } .ba-adimlar span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #0c232b; color: #8fd9cb; font-size: .78rem; font-weight: 700; } .ba-adimlar p { margin: 0; font-size: .82rem; } @media (max-width: 800px) { .ba-adimlar { grid-template-columns: 1fr; } } .ba-cari b { font-weight: 600; } /* ===== Pano düzenleme (kişiye özel pano) ===== */ .pano .pn-kart.k-amber { --k: #c98a1b; --k-zemin: #fdf6e6; } .pn-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .pn-sayi-rozet { flex: none; min-width: 28px; text-align: center; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--t-gri-z); color: var(--murekkep); } .pn-sayi-rozet.uyari { background: #fdf3dc; color: #8a5d00; } /* Panomu düzenle penceresi */ .pd-sabit { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f3f7f7; border: 1px solid var(--cizgi); margin-bottom: 14px; font-size: .9rem; } .pd-sabit small { margin-left: auto; color: var(--soluk); font-size: .76rem; } .pd-bolge-baslik { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); margin: 14px 2px 8px; } .pd-liste { display: grid; gap: 8px; } .pd-oge { border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; padding: 9px 12px; transition: background .3s, opacity .2s, box-shadow .3s; } .pd-oge.tasindi { box-shadow: 0 0 0 3px rgba(63, 174, 156, .35); } .pd-oge-ust { display: flex; align-items: center; gap: 10px; } .pd-oge-ust .form-check-input { width: 2.3em; height: 1.2em; cursor: pointer; } .pd-oge-ikon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #e9f7f4; color: #0b6b5d; flex: none; } .pd-oge-ad { font-weight: 600; font-size: .9rem; cursor: pointer; margin: 0; } .pd-rozet { font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--t-amber-z); color: var(--t-amber-k); } .pd-oge-sira { margin-left: auto; display: flex; gap: 4px; } .pd-oge-sira button { width: 28px; height: 28px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; color: var(--murekkep); display: grid; place-items: center; } .pd-oge-sira button:hover { border-color: #3fae9c; color: #0b6b5d; } .pd-liste .pd-oge:first-child [data-yon="-1"], .pd-liste .pd-oge:last-child [data-yon="1"] { opacity: .35; pointer-events: none; } .pd-alt { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px 50px; } .pd-alt-grup { margin: 10px 0 0 50px; font-size: .72rem; font-weight: 700; color: var(--soluk); } .pd-alt-grup + .pd-alt { margin-top: 5px; } .pd-alt-not { margin: 6px 0 0 50px; font-size: .78rem; color: var(--soluk); } .pd-alt-not a { margin-left: 6px; font-weight: 600; } .pd-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--cizgi); border-radius: 99px; font-size: .8rem; cursor: pointer; background: #fafcfc; user-select: none; margin: 0; } .pd-cip .form-check-input { margin: 0; } .pd-cip:has(input:checked) { background: #e9f7f4; border-color: #9fd8cc; color: #0b5e52; } .pd-cip:has(input:not(:checked)) { color: var(--soluk); } .pd-oge.kapali { background: #f6f8f8; } .pd-oge.kapali .pd-oge-ikon, .pd-oge.kapali .pd-oge-ad { opacity: .5; } .pd-oge.kapali .pd-alt, .pd-oge.kapali .pd-alt-grup, .pd-oge.kapali .pd-alt-not { opacity: .4; pointer-events: none; } @media (max-width: 576px) { .pd-alt, .pd-alt-grup, .pd-alt-not { margin-left: 0; } } /* Bugün benim işlerim + yenilenme göstergesi */ .pn-ust-sag { display: flex; align-items: center; gap: 10px; } .pn-yenilendi { font-size: .74rem; color: var(--soluk); display: inline-flex; align-items: center; gap: 4px; } .pn-yenilendi.donuyor i { animation: pnDon 1s linear infinite; } @keyframes pnDon { to { transform: rotate(360deg); } } .pn-benim-baslik { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); padding: 8px 4px 3px; } .pn-benim-baslik:first-child { padding-top: 0; } .pn-benim-baslik.uyari { color: #8a5d00; } .pn-benim-saat { flex: none; min-width: 46px; text-align: center; font-size: .74rem; font-weight: 700; padding: 3px 6px; border-radius: 8px; background: #e8f1fb; color: #2f5f97; } .pn-benim-saat.gecti { background: #fdf3dc; color: #8a5d00; } .pn-benim .pn-is-oncelik { align-self: stretch; } /* Servis: dış serviste */ .bg-purple { background-color: #7c4fd0 !important; color: #fff !important; } .ds-kutu { border: 1px dashed #c6b3ee; background: #f7f3fe; border-radius: 10px; padding: 8px 10px; } .ds-baslik { font-size: .78rem; font-weight: 700; color: #5b3aa8; margin-bottom: 6px; } .ba-bas { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .7rem; color: var(--soluk); } .ba-bas input { width: 150px; } .ba-hedef { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: var(--t-mor-z); color: var(--t-mor-k); margin-right: 4px; vertical-align: 1px; } .ba-logo { display: block; margin-top: 2px; font-size: .72rem; color: #0b6b5d; font-family: Consolas, monospace; } .ba-hedef-sekme { display: inline-flex; } /* Muhasebe PIN */ .pn-pin { display: block; width: 100%; max-width: 260px; margin: 0 auto; text-align: center; font-size: 1.6rem; letter-spacing: .5em; padding: 10px 12px; border: 1.5px solid var(--cizgi); border-radius: 14px; font-family: Consolas, monospace; } .pn-pin:focus { outline: none; border-color: #3fae9c; box-shadow: 0 0 0 4px rgba(63, 174, 156, .18); } .pn-kod { letter-spacing: .25em; font-size: 1.3rem; } .pn-etiket { display: block; text-align: center; font-size: .78rem; color: var(--soluk); margin: 12px 0 4px; } .pn-pin-not { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: .8rem; color: var(--soluk); } .dg-kalkan.kilit { background: #fdecea; color: #c8443a; } .mh-kilit-alani { display: flex; align-items: center; gap: 6px; margin-left: auto; } .mh-kilitle { border: 1px solid var(--cizgi); background: #fff; padding: 7px 14px; border-radius: 10px; font-size: .85rem; font-weight: 600; color: #4a5560; } .mh-kilitle:hover { color: #c8443a; border-color: #e7b3ae; background: #fdf3f2; } .mh-pin { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--soluk); text-decoration: none; } .mh-pin:hover { color: #2b7f8e; border-color: #9fd3cb; } /* ---- PIN açılır penceresi (pin.js) ---- */ .pin-arka { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 30, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); } .pin-pencere { background: #fff; border-radius: 18px; width: 100%; max-width: 360px; padding: 26px 24px 20px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); } .pin-pencere .pin-ikon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, #3fae9c, #2b7f8e); } .pin-pencere h2 { font-size: 1.15rem; margin: 0 0 4px; } .pin-pencere p { font-size: .85rem; color: var(--soluk); margin: 0 0 14px; } .pin-pencere .pin-hata { margin-top: 10px; font-size: .82rem; color: #c8443a; } .pin-pencere .pin-dugmeler { display: flex; gap: 8px; justify-content: center; margin-top: 16px; } /* ---- Banka: dövizli kapama ---- */ .ba-doviz { display: block; margin-top: 3px; font-size: .78rem; color: #1f6f8b; font-weight: 600; } .ba-dv-toplam { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--zemin, #f6f8f9); border-radius: 10px; font-size: .9rem; } .ba-dv-ozet { margin-top: 12px; display: grid; gap: 4px; } .ba-dv-ozet > div { display: flex; justify-content: space-between; font-size: .88rem; padding: 6px 10px; border: 1px dashed var(--cizgi); border-radius: 8px; } .ba-dv-ozet span { color: var(--soluk); } .ba-dv-hesap { background: #f2f8f7 !important; color: #1f6f8b; font-weight: 600; } .ba-yuklemeler { margin-top: 10px; } .ba-yuklemeler .ba-dosya { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Servis durumu: küçük seçim düğmeleri ---- */ .sd-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; } .sd-dugme { --r: #5b8db8; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--r) 35%, #fff); color: color-mix(in srgb, var(--r) 85%, #000); background: #fff; user-select: none; transition: .12s; } .sd-dugme:hover { background: color-mix(in srgb, var(--r) 10%, #fff); } .btn-check:checked + .sd-dugme { background: var(--r); border-color: var(--r); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--r) 35%, transparent); } .btn-check:focus-visible + .sd-dugme { outline: 2px solid var(--r); outline-offset: 2px; } .sd-teslimalindi { --r: #2f6fdb; } .sd-arizatespiti, .sd-onarimda { --r: #1f8fa8; } .sd-onaybekleniyor, .sd-parcabekleniyor { --r: #c98a0b; } .sd-hazir { --r: #2e9d5b; } .sd-teslimedildi { --r: #6c757d; } .sd-iade { --r: #343a40; } .sd-disserviste { --r: #7b4fc9; } /* ---- Sol menü: kişisel düzen ---- */ .menu-sik { margin: .1rem 0 .25rem; padding-bottom: .25rem; border-bottom: 1px solid rgba(255, 255, 255, .07); } .menu-sik-baslik { display: flex; align-items: center; gap: .55rem; padding: .5rem .8rem .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #7f9ba1; } .menu-sik-baslik i { color: #e0b44a; font-size: .8rem; width: 1.2rem; text-align: center; } .menu-sik > .menu-oge { margin-left: .55rem; } .menu-duzenle { display: grid; place-items: center; width: 32px; height: 32px; margin: 10px 0 0 auto; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; background: transparent; color: #7f9ba1; font-size: .9rem; } .menu-duzenle:hover { color: #d9e6e8; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04); } .md-grup { border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; padding: 6px 8px; transition: box-shadow .3s; } .md-grup.tasindi, .md-oge.tasindi { box-shadow: 0 0 0 3px rgba(63, 174, 156, .35); border-radius: 10px; } .md-oge { display: flex; align-items: center; gap: 9px; padding: 5px 4px; } .md-oge .md-goster { width: 2.3em; height: 1.2em; margin: 0; cursor: pointer; flex: none; } .md-ikon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #e9f7f4; color: #0b6b5d; flex: none; font-size: .85rem; } .md-ad { font-weight: 600; font-size: .9rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-alt-liste { margin: 2px 0 2px 26px; border-left: 2px solid #eef2f3; padding-left: 8px; } .md-oge.md-alt .md-ad { font-weight: 500; font-size: .86rem; } .md-oge.md-alt .md-ikon { width: 22px; height: 22px; background: #f3f6f7; color: #5a6b73; } .md-oge.kapali .md-ikon, .md-oge.kapali .md-ad { opacity: .45; } .md-grup:has(> .md-oge.kapali) .md-alt-liste { opacity: .45; pointer-events: none; } .md-yildiz { border: 0; background: transparent; color: #b8c2c7; padding: 2px 4px; } .md-yildiz.secili, .md-yildiz:hover { color: #e0a526; } .md-sira { display: flex; gap: 3px; } .md-sira button { width: 26px; height: 26px; border: 1px solid var(--cizgi); border-radius: 7px; background: #fff; color: var(--murekkep); display: grid; place-items: center; font-size: .75rem; } .md-sira button:hover { border-color: #3fae9c; color: #0b6b5d; } #mdListe { display: grid; gap: 8px; } /* ---- Müşteri envanteri: müşteri seçiliyken üst bölüm ---- */ .env-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 16px 18px; background: linear-gradient(135deg, #fff 60%, #eef8f6); border: 1px solid var(--cizgi); border-radius: 16px; } .env-musteri { display: flex; align-items: center; gap: 14px; min-width: 0; } .env-avatar { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #3fae9c, #2b7f8e); box-shadow: 0 4px 12px -4px rgba(43, 127, 142, .5); } .env-musteri-bilgi { min-width: 0; } .env-musteri-bilgi small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); } .env-musteri-bilgi h1 { font-size: 1.3rem; margin: 1px 0 6px; line-height: 1.25; } .env-musteri-bilgi h1 a { color: var(--murekkep); text-decoration: none; } .env-musteri-bilgi h1 a:hover { color: #0b6b5d; } .env-ozet { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: #4a5a62; } .env-ozet > * { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: inherit; } .env-ozet i { color: #3fae9c; } .env-ozet .uyari { color: #9a6a00; } .env-ozet .uyari i { color: #c98a0b; } .env-ozet .gecti { color: #b3372d; } .env-ozet .gecti i { color: #c8443a; } .env-ozet .soluk { color: var(--soluk); } .env-ozet .soluk i { color: var(--soluk); } .env-ozet a:hover { text-decoration: underline; } .env-eylemler { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .env-eylemler .btn { white-space: nowrap; } .env-musteri-sec { min-width: 180px; max-width: 240px; } @media (max-width: 992px) { .env-eylemler { flex-wrap: wrap; } } .env-arac { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 8px 0; background: var(--zemin, #f4f6f7); } .env-cipler { display: flex; flex-wrap: wrap; gap: 6px; } .env-cipler a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); color: var(--murekkep); font-size: .8rem; text-decoration: none; transition: .12s; } .env-cipler a span { color: var(--soluk); font-variant-numeric: tabular-nums; font-size: .75rem; } .env-cipler a i { color: #3fae9c; } .env-cipler a:hover { border-color: #9fd3cb; } .env-cipler a.aktif { background: #2b7f8e; border-color: #2b7f8e; color: #fff; } .env-cipler a.aktif i, .env-cipler a.aktif span { color: rgba(255, 255, 255, .85); } .env-ara { display: flex; align-items: center; gap: 10px; margin: 0; } .env-ara-kutu { position: relative; } .env-ara-kutu i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--soluk); font-size: .85rem; } .env-ara-kutu input { padding-left: 30px; width: 230px; border-radius: 999px; } .env-pasif { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #4a5a62; margin: 0; white-space: nowrap; cursor: pointer; } .env-pasif .form-check-input { margin: 0; } @media (max-width: 768px) { .env-ara { width: 100%; } .env-ara-kutu { flex: 1; } .env-ara-kutu input { width: 100%; } .env-musteri-sec { min-width: 0; max-width: 100%; } } /* Sol menü yazıları bir tık büyük (sayfa .925rem → menü .98rem; başlıklar .72 → .76rem) */ .yan-gezinti .menu-oge { font-size: 14.7px; } /* .98rem (15.7px) − 1px */ .yan-gezinti .menu-oge i { font-size: 16.6px; } .yan-gezinti .menu-grup > summary.grup-baslik, .yan-gezinti .menu-sik-baslik { font-size: .86rem; letter-spacing: .05em; color: #9db6bb; } .yan-gezinti .menu-grup > summary.grup-baslik > i:first-child, .yan-gezinti .menu-sik-baslik i { font-size: 1rem; opacity: .9; } .yan-gezinti .menu-grup .grup-ok { font-size: 11.8px; } /* ---- Sol menü tipografisi: Inter, sade başlıklar ---- */ .yan-gezinti { font-family: "Inter", "IBM Plex Sans", system-ui, "Segoe UI", sans-serif; font-feature-settings: "cv11", "ss01"; } .yan-gezinti .menu-oge { font-weight: 500; letter-spacing: -.011em; color: #d3e0e2; } .yan-gezinti .menu-oge.aktif { font-weight: 600; color: #fff; } .yan-gezinti .menu-oge .sayi { font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: 0; } .yan-gezinti .menu-grup > summary.grup-baslik, .yan-gezinti .menu-sik-baslik { text-transform: none; font-weight: 700; font-size: 15.6px; letter-spacing: -.012em; color: #a9c8cd; } .yan-gezinti .menu-grup > summary.grup-baslik > i:first-child { font-size: 16.9px; } .yan-gezinti .menu-grup[open] > summary.grup-baslik { color: #d5e7ea; } .yan-gezinti .menu-grup > summary.grup-baslik:hover { color: #e3eef0; }