yapıp tıklanabilir kısma imleci geri kazandırmak için.
-------------------------------------------------------------------------- */
.hibrit-tiklanabilir {
cursor: pointer;
}
/* =====================================================================
UYGULAMA GUNLUGU EKRANI (Sistem -> Uygulama Gunlugu, 2026-09-29)
---------------------------------------------------------------------
Log satirlari METINDIR: esit genislikli yazi tipi olmadan zaman damgalari
alt alta hizalanmaz ve goz bir satirdan digerine gecerken kayar.
Yukseklik BURADA YAZILMAZ - hibritWidgets.ekranaOturt olcup yaziyor (D10);
buradaki tek is, artan yerin nasil paylasilacagini soylemek.
===================================================================== */
.log-icerik {
overflow: auto;
background-color: var(--vz-light);
/* JS calismazsa (dar ekran, hata) kap yine de kullanilabilir kalmali. */
max-height: 70vh;
}
.log-satiri {
font-family: var(--vz-font-monospace, SFMono-Regular, Menlo, Consolas, monospace);
font-size: 11.5px;
line-height: 1.55;
/* Uzun satir KIRPILMAZ, sarilir: bir istisna yigini kirpilirsa en kritik
kisim (en ictek mesaj) gorunmez olur. */
white-space: pre-wrap;
word-break: break-word;
}
/* ==========================================================================
DataTables "Dışa Aktar" düğmesi (2026-10-01, KULLANICI İSTEĞİ)
==========================================================================
Düğmeyi DataTables Buttons üretiyor, işaretlemesi bizim elimizde değil; bu yüzden
sınıfları `hibritWidgets.initDataTable` içindeki `className` ile veriliyor
(`btn btn-success btn-sm material-shadow-none dropdown-toggle`) ve KALANI burada.
İKİ OK PROBLEMİ: `dropdown-toggle` temanın Material Design Icons okunu (\f0140)
`::after` ile getiriyor, ama DataTables kendi okunu da `.dt-button-down-arrow`
ile basıyor. İkisi birden görünmesin diye DataTables'ınki gizleniyor - tema
okunu tercih ediyoruz çünkü yanındaki "Toplu İşlemler" düğmesi de onu kullanıyor
ve ikisi aynı hizada durmalı.
Kapsam bilerek DARALTILMADI: DataTables'ın okunu hiçbir yerde istemiyoruz ve
sınıf adı sürümle değişiyor (Buttons 2.x'te `.dt-down-arrow`, 3.0.1'de
`.dt-button-down-arrow`) - ikisi de yazılı ki yükseltmede sessizce iki ok
görünmesin. */
.dt-button-down-arrow,
.dt-down-arrow {
display: none;
}
/* ==========================================================================
DATATABLES KAYDIRMA ÇUBUĞU - SOL MENÜYLE AYNI GÖRÜNÜM
==========================================================================
`initDataTable` her tabloya `scrollY` veriyor, yani gövde kendi kabında kayıyor
ve tarayıcının kalın gri çubuğu çıkıyordu. Sol menüdeki çubuk (yukarıdaki
"SOL MENÜ" bölümü) ince ve primary tonluydu; aynı uygulamada iki farklı
kaydırma çubuğu görünmesin diye ölçüler ORADAN kopyalandı (6px, %35 primary,
tam yuvarlak) - değiştirilecekse ikisi birlikte değişir.
SİMPLEBAR KULLANILMADI, bilerek: SimpleBar kabın çocuklarını kendi
sarmalayıcılarına TAŞIYOR, DataTables ise kaydırma gövdesinin DOM'unu kendisi
yönetiyor (başlık genişliği eşitleme, sayfa değişiminde yeniden çizim). İkisi
aynı düğümlere dokunduğu için kasa ekranındaki Blazor/SimpleBar çakışmasının
aynısı çıkardı. Salt CSS çözümü hiçbir DOM'a dokunmuyor.
Sürüm güvenliği: DataTables 2.x kabı `.dt-scroll-body`, 1.x
`.dataTables_scrollBody` diyor; paketimizde ikisi de geçiyor, bu yüzden ikisi
de yazılı. Yatay kaydırma (`scrollX`) da aynı kabı kullanır. */
.dt-scroll-body,
.dataTables_scrollBody {
scrollbar-width: thin;
scrollbar-color: rgba(var(--vz-primary-rgb, 37, 160, 226), .35) transparent;
}
.dt-scroll-body::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.dt-scroll-body::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track {
background: transparent;
}
.dt-scroll-body::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
background: rgba(var(--vz-primary-rgb, 37, 160, 226), .35);
border-radius: 50rem;
}
/* ==========================================================================
D13 - SAYFANIN AÇTIĞI KAYAN KAPLAR İÇİN İNCE ÇUBUK: `.ince-kaydirma`
(2026-10-09)
NEDEN GEREKLİ: D13 "yeni bir kayan kap eklendiğinde ince/primary çubuk
yazılır" diyordu, ama bu ölçüler YALNIZ sol menüye (`#scrollbar`) ve
DataTables gövdesine bağlıydı - sayfanın uygulayabileceği yeniden
kullanılabilir bir sınıf YOKTU. Sonucu: `max-height + overflow-y:auto` ile
açılan her kap (arama sonuç listeleri, uzun seçim panelleri) tarayıcının
varsayılan KALIN GRİ çubuğunu gösteriyordu ve bu desen depoda 11 yerde
tekrarlanıyordu. Sayfaya CSS yazmak yasak olduğu için çözüm ortak bir
yardımcı sınıf olmak zorunda.
⚠ ÖLÇÜLER DataTables KURALINDAN KOPYALANDI, yeniden seçilmedi - iki kayan
kap aynı uygulamada farklı görünmesin. Değişirse ikisi birlikte değişir.
Kullanımı: kabın kendi `max-height` + `overflow-y` değeri sayfada kalır
(içeriğe göre değişiyor), çubuğun GÖRÜNÜMÜ buradan gelir.
⚠ 2026-10-11 GÜNCELLEMESİ - ARTIK GLOBAL (KULLANICI KARARI: "bütün scrollbarlar
navbardaki ince çubuk olsun"). Sınıf yaklaşımı ikinci kez delik verdi: popup
gövdesi (`.modal-dialog-custom .card-body`, D4) sınıfı hiç almamıştı ve İçe
Aktarılan Faturalar detayında kalın gri çubuk göründü; 11 eski kap da hâlâ
dönüştürülmemişti. "Her yeni kapta hatırla" kuralı hatırlanmadığı yerde
delik bırakıyor - kural tek yerde, istisnasız uygulanıyor. `.ince-kaydirma`
zararsız bir eş anlamlı olarak kalıyor (mevcut kullanımlar bozulmasın).
`*` özgüllüğü 0: Chrome/Edge 121+ `scrollbar-width`/`scrollbar-color`
tanımlı öğede `::-webkit-scrollbar*` kurallarını HİÇ uygulamadığı için
temanın eklenti kuralları (gridjs, multi-wrapper - bizde kullanılmıyor) da
aynı görünüme iner; webkit kuralları yalnız Safari içindir. */
*,
.ince-kaydirma {
scrollbar-width: thin;
scrollbar-color: rgba(var(--vz-primary-rgb, 37, 160, 226), .35) transparent;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(var(--vz-primary-rgb, 37, 160, 226), .35);
border-radius: 50rem;
}
/* SimpleBar (kasa ekranı) yerel çubuk değil, kendi çizdiği bir öğe - global kural ona
ULAŞMAZ. Aynı görünüme eşitlenir: 6px, primary %35, tam yuvarlak, hep görünür. */
.simplebar-track.simplebar-vertical {
width: 8px;
}
.simplebar-scrollbar:before {
background: rgb(var(--vz-primary-rgb, 37, 160, 226));
border-radius: 50rem;
}
.simplebar-scrollbar.simplebar-visible:before {
opacity: .35;
}
/* ==========================================================================
D19 - BÖLÜM KARTI: `.bolum-karti` (KULLANICI KARARI, 2026-10-11)
Bir sayfa kartının İÇİNDE alanları gruplayan alt kartlar (ilk kullanım: ürün
kartının Genel sekmesi). Düz `card border` ile yazıldıklarında açık temada
kenarlık `#e9ebec` ve başlık zemini kartla AYNI beyaz olduğu için bölümler
zeminden seçilmiyordu ("zeminle aynı renk, belirgin değiller").
Görünüm ürün kartının Satış Kanalları sekmesindeki kanal kartlarından
alındı (KULLANICI SEÇİMİ: gri başlık; primary tonlu bir deneme reddedildi):
başlık ve alt bilgi zemini `--vz-light`, kenarlık temanın kendi rengi.
Değişkenler tema değişkeni olduğu için koyu temada da doğru görünür. D5'in
"normal sayfa kartının başlığı zeminsiz" kuralı SAYFA kartı içindir; bölüm
kartı o kartın içinde durur ve ayrışması zaten amacı. */
/* Gölge BİLEREK kapatılmaz: Velzon kartının kendi gölgesi (`--vz-card-box-shadow`)
kenarlıkla birlikte bölümü zeminden ayıran şeyin yarısı. */
.card.bolum-karti {
border: 1px solid var(--vz-border-color);
}
.card.bolum-karti > .card-header,
.card.bolum-karti > .card-footer {
background-color: var(--vz-light);
}
.card.bolum-karti > .card-header {
border-bottom: 1px solid var(--vz-border-color);
}
/* ==========================================================================
BANKA KARTI LOGOSU (KULLANICI İSTEĞİ, 2026-10-21: "logolar çok küçük")
Banka logoları geniş yazı logolarıdır (≈ 8:1); kare `avatar-xs` (32px) kutuda
genişliğe sıkışıp okunmuyordu. Başlıkta ortalı, SABİT YÜKSEKLİKLİ bir bant:
logo yüksekliği doldurur, genişlik bandı aşmaz (`object-fit: contain`), yani
kare ikon (generic-bank) da geniş yazı logosu da aynı satırda hizalı durur.
Zemin BEYAZ ve temadan bağımsızdır - logolar beyaz zemine göre tasarlanmış,
gri başlıkta ve koyu temada renkleri bozuluyordu.
========================================================================== */
.banka-karti-baslik .banka-logo-alani {
height: 56px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius);
display: flex;
align-items: center;
justify-content: center;
}
/* BANKA PANOSU (FIN.021) - banka satırı tıklanınca hesapları altında açılır. Logo kutusu beyaz zeminli (logolar koyu
temada da okunsun), satır seçilebilir görünür, ok açıkken döner. */
.banka-pano-logo {
width: 96px;
height: 40px;
padding: 5px 8px;
flex-shrink: 0;
background-color: #fff;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius);
display: flex;
align-items: center;
justify-content: center;
}
.banka-pano-logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.banka-pano-tablo .banka-pano-satir {
cursor: pointer;
border-top: 1px solid var(--vz-border-color);
}
.banka-pano-tablo .banka-pano-satir:hover > td,
.banka-pano-tablo .banka-pano-satir.acik > td {
background-color: rgba(var(--vz-primary-rgb), 0.04);
}
.banka-pano-tablo .banka-pano-ok {
display: inline-block;
transition: transform 0.2s ease;
}
.banka-pano-tablo .banka-pano-satir.acik .banka-pano-ok {
transform: rotate(180deg);
}
.banka-pano-hesap + .banka-pano-hesap {
border-top: 1px dashed var(--vz-border-color);
}
/* Metindeki satır sonunu korur ("Ad\nKod" → iki satır). HTML'li tooltip AÇILMAZ - içerik veriden gelir. */
.tooltip.tooltip-cok-satir .tooltip-inner {
white-space: pre-line;
}
.banka-karti-baslik .banka-logo-alani img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* ==========================================================================
D14 - KART BAŞLIĞINDAKİ ROZET, DÜĞMEYLE AYNI YÜKSEKLİKTE DURUR
(KULLANICI KARARI, 2026-10-04)
Kart başlıklarında rozetler ve `btn-sm` düğmeler aynı satırda yan yana
duruyor; rozetin kendi ölçüleri (line-height: 1, padding .35em) düğmeden
belirgin biçimde kısa olduğu için satır tırtıklı görünüyordu.
YÜKSEKLİK SABİT SAYIYLA YAZILMIYOR, TEMANIN KENDİ DEĞİŞKENLERİNDEN
TÜRETİLİYOR: `--vz-font-base` tema/yoğunluk ayarına göre 0.8125rem ile
0.875rem arasında değişiyor (dört farklı değer ölçüldü). Sabit bir px
yazılsaydı tema değiştiğinde rozet ile düğme yeniden ayrışır ve bunu kimse
fark etmezdi. Hesap `btn-sm`in kendisiyle birebir aynı: içerik yüksekliği
(font × satır yüksekliği) + dikey dolgu (2 × .25rem) + kenarlıklar.
`top: 0` ŞART: temanın `.badge` kuralı `position: relative; top: -1px`
veriyor ve bu, esnek kutuda ortalanmış rozeti bir piksel yukarı kaydırıyor.
========================================================================== */
.card-header .badge {
display: inline-flex;
align-items: center;
min-height: calc(var(--vz-font-base, 0.8125rem) * 0.875 * var(--vz-btn-line-height, 1.5)
+ 0.5rem + 2 * var(--vz-border-width, 1px));
padding-block: 0;
top: 0;
}
/* =======================================================================
TEDARİKÇİ KATALOĞU — ÜRÜN GÖRSELİ KABI (2026-10-10)
Tedarikçiden gelen görsel adresi KIRIK olabilir: panel dosyayı silmiş,
adres değişmiş ya da kaynak tanımında görsel kökü yanlış girilmiş olabilir.
Kırık bir
![]()
tarayıcıda çirkin bir ikon bırakır.
ÇÖZÜM JS'SİZ: yer tutucu ikon kabın ARKA PLANINDA duruyor,
![]()
onun
üstünde. Görsel yüklenemezse altındaki yer tutucu görünür - `onerror`
ile satır içi JS yazmaya gerek kalmıyor (denetçi kuralı K6: sayfa içinde
script yok).
Yükseklik SABİT: ızgarada kartların aynı hizada bitmesi için. İçerik
kadar uzamasına izin verilse, farklı oranlı görseller satırı bozardı.
======================================================================= */
.tedarikci-gorsel-kabi {
position: relative;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-bottom: 1px solid var(--vz-border-color);
/* ZEMİN BEYAZ (KULLANICI KARARI, 2026-10-10): tedarikçi görsellerinin neredeyse
tamamı beyaz zeminli PNG/JPG; gri bir kap (`--vz-light`) görselin kendi beyaz
zeminini kutu gibi ortaya çıkarıyor ve ürün kirli görünüyordu. */
background-color: #fff;
/* Yer tutucu: gömülü SVG - dış adresten varlık yüklenmiyor
(uygulama internetten bağımsız çalışır kuralı). */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.tedarikci-gorsel-kabi img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
/* GENİŞ EKRANDA KART DARALIR, GÖRSEL DE KISALIR (2026-10-10). Izgara xxl'de satırda
ALTI kart gösteriyor, yani kart ~190 px'e iniyor; 180 px'lik kap o genişlikte
neredeyse kare oluyor ve kartın yarısını görsel kaplıyor. Kısaltma yalnız altılı
düzenin geçerli olduğu kırılımda yapılır - xl ve altında kart zaten geniş. */
@media (min-width: 1400px) {
.tedarikci-gorsel-kabi {
height: 150px;
}
}
/* IZGARANIN OLUĞU YARIM (KULLANICI KARARI, 2026-10-10): varsayılan 1,5 rem, burada
0,75 rem. Satırda altı kart varken kartlar arasındaki boşluk ürün görselinden geniş
kalıyordu. Hazır `gx-*` sınıflarının hiçbiri tam yarısını vermiyor (gx-3 = 1 rem,
gx-2 = 0,5 rem), o yüzden oluk değişkeni doğrudan yazılıyor. DİKEY boşluk ayrı:
kolonlardaki `mb-3`. */
.row.tedarikci-izgara {
--vz-gutter-x: 0.75rem;
}
/* ÜRÜN KARTININ KENARLIĞI 2 PX (KULLANICI KARARI, 2026-10-10).
Izgarada kartlar yan yana duruyor ve görsel kabının zemini artık kartın kendi
zeminiyle aynı (beyaz); 1 px'lik varsayılan kenarlıkla kartın nerede bittiği
belirsizdi. Kural SINIFA bağlı, `.card`'a genel olarak verilmiyor - üç uygulamadaki
bütün kartların kenarlığını kalınlaştırmak istenen şey değil.
Bootstrap'in `border-2` yardımcı sınıfı bu temada DERLENMEMİŞ (ölçüldü: app.min.css
ve bootstrap.min.css'te `.border-2` yok), o yüzden sınıf burada tanımlanıyor. */
.tedarikci-urun-karti {
border: 2px solid var(--vz-border-color, #e9ebec);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* ODAKTAKİ KART BELLİ OLUR: 25 kartlık bir ızgarada fare hangi kartın üzerindeyse
onun kenarlığı birincil renge geçer. "Ürün Olarak Al" düğmesi kartın en altında
duruyor ve kartlar yan yana; vurgu olmadan bir kartın düğmesine basarken gözle
komşu kartın adını okumak kolaydı. */
.tedarikci-urun-karti:hover {
border-color: var(--vz-primary, #25a0e2);
box-shadow: 0 3px 10px rgba(30, 32, 37, .08);
}
/* GÖRSEL ÜZERİNE GELİNCE HAFİF BÜYÜR. Kırtasiye gibi binlerce benzer adlı üründe
doğru ürünü ayırt etmenin en hızlı yolu görsel; 180 px'lik kapta etiket yazısı
okunmuyor ve tedarikçinin sayfasını açmak tek yol kalıyordu. Kap `overflow:
hidden` olduğu için büyüyen görsel komşu kartın üzerine taşmaz. */
.tedarikci-urun-karti .tedarikci-gorsel-kabi img {
transition: transform .2s ease-in-out;
}
.tedarikci-urun-karti:hover .tedarikci-gorsel-kabi img {
transform: scale(1.06);
}
/* BARKOD LİSTESİ POPOVER'I (KULLANICI KARARI, 2026-10-10; Velzon `ui-general` deseni).
Bootstrap'in varsayılan popover'ı bu ızgarada iki yerde yanlış duruyordu: gövde yazısı
kart yazısından büyük ve genişliği serbest, yani 7 barkodluk liste kartın iki katı
genişliğe yayılıyordu. Ölçüler kartın tipografisine hizalandı - rozet 12 px, liste
11 px, barkod sütunu monospace (rakamlar hizalı okunsun).
`data-bs-custom-class` ile SINIFLA sınırlandı: `.popover`a genel kural yazmak, üç
uygulamadaki bütün popover'ları değiştirmek olurdu. */
.popover.tedarikci-barkod-popover {
max-width: 260px;
border-color: var(--vz-border-color, #e9ebec);
box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
}
.popover.tedarikci-barkod-popover .popover-header {
font-size: 12px;
font-weight: 600;
padding: 0.4rem 0.75rem;
background-color: var(--vz-light, #f3f6f9);
border-bottom-color: var(--vz-border-color, #e9ebec);
}
.popover.tedarikci-barkod-popover .popover-body {
font-size: 11px;
line-height: 1.7;
padding: 0.4rem 0.75rem 0.5rem;
}
/* Satırlar arasında ince ayraç: 7 barkodluk listede göz satırı kaybediyor. */
.popover.tedarikci-barkod-popover .popover-body > div + div {
border-top: 1px dashed var(--vz-border-color, #e9ebec);
}
.popover.tedarikci-barkod-popover .popover-body .font-monospace {
font-variant-numeric: tabular-nums;
}
/* Birimin TÜRETİLDİĞİNİ söyleyen not: ayracı yok (satır değil, dipnot) ve daha soluk. */
.popover.tedarikci-barkod-popover .popover-body .tedarikci-barkod-notu {
border-top: 1px solid var(--vz-border-color, #e9ebec);
margin-top: 0.35rem;
padding-top: 0.3rem;
font-size: 10px;
line-height: 1.4;
color: var(--vz-secondary-color, #878a99);
}
/* Rozetin tetikleyici olduğu ELLE BELLİ OLMALI: imleç yardım işaretine dönüyor,
yoksa kullanıcı üstüne gelmeyi denemez ve liste keşfedilmez. */
.tedarikci-barkod-rozeti {
cursor: help;
}
/* FİYAT KIRILIMI (liste · iskonto · diğer esas · vade) — KULLANICI İSTEĞİ, 2026-10-10.
Tipografi bilinçli olarak küçük ve soluk: kararı net fiyat verdiriyor, bu satırlar
BAĞLAM. Aynı boyutta basılsalar göz her kartta hangisinin ödenecek tutar olduğunu
yeniden arardı - kartın fiyat vurgusu için yazılan kuralın aynı gerekçesi.
Etiket solda, değer sağda (satırlar sayfada `d-flex justify-content-between`); sayılar
hizalı dursun diye değer sütunu `tabular-nums` kullanıyor - orantılı rakamlarda
"1.234,56" ile "999,00" farklı genişlikte çizilir ve sütun tırtıklı görünür. */
.tedarikci-fiyat-kirilimi {
font-size: 11px;
line-height: 1.6;
color: var(--vz-secondary-color, #878a99);
border-top: 1px dashed var(--vz-border-color, #e9ebec);
padding-top: 0.35rem;
}
/* FİYAT SATIRININ ÜSTÜNDE DE AYNI AYRAÇ (KULLANICI İSTEĞİ, 2026-10-10): kırılımın
üstündeki kesikli çizgiyle AYNI bildirimler - aynı kalınlık, aynı desen, aynı renk
ve aynı `padding-top`. Böylece fiyat bloğu üstten ve alttan simetrik kapanıyor;
ölçüleri ayrı yazmak, ikisinden biri değiştiğinde sessizce ayrışmak demekti. */
.tedarikci-fiyat-ustu {
border-top: 1px dashed var(--vz-border-color, #e9ebec);
padding-top: 0.35rem;
}
.tedarikci-fiyat-kirilimi > div > span:last-child {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ÜRÜN ADI İKİ SATIR YÜKSEKLİĞİNDE DURUR (kesilmesi `KisaMetin`'in işi, burada
yalnız YER ayrılıyor). Izgarada kısa ve uzun adlar karışık geldiğinde fiyat
bloğu kartlar arasında farklı yükseklikte başlıyor ve satır boyunca göz hizası
kayıyordu. */
.tedarikci-urun-adi {
min-height: 2.6em;
}
/* ---------------------------------------------------------------------------
KENARDAN KENARA TABLO: `.tablo-kenardan-kenara` (KULLANICI İSTEĞİ, 2026-10-12;
ilk kullanım: Fatura Üretimi'nin iki liste kartı).
Tablonun kabı, içinde durduğu `card-body`'nin yatay iç boşluğu kadar dışarı taşar ve
kartın kenarına yapışır. Gövdeyi `p-0` yapmak yerine böyle: aynı gövdede tablonun
üstünde uyarı, rozet ve düğme satırı var - onlar boşluğunu korumalı. Ölçü GÖMÜLMEZ
(D10), Bootstrap'in kart değişkeninden okunur. Üst kenarlık, tablonun üstündeki
kontrol satırıyla başlığı ayırır.
--------------------------------------------------------------------------- */
.card-body .tablo-kenardan-kenara {
margin-left: calc(-1 * var(--vz-card-spacer-x, 1rem));
margin-right: calc(-1 * var(--vz-card-spacer-x, 1rem));
border-top: 1px solid var(--vz-border-color);
}
/* ---------------------------------------------------------------------------
PUANTAJ MATRİSİ ve TAKVİMİ (İK F2a, 2026-10-12; HibritERP Puantaj ekranı + personel
kartı Puantaj sekmesi).
- Hücre RENKLERİ burada YOK: Application'daki `PuantajHucreGorunumu` paletinden satır
içi stil olarak gelir (Excel de aynı paleti okur - iki kaynak ayrışmasın).
- Kap hem yatay hem dikey kayar: personel sütunu SOLDA, gün başlığı ÜSTTE yapışkan.
Dikey yapışkanlık ancak kabın kendisi dikey kaydığında çalışır; `max-height` bu yüzden
var ve bir tema ölçüsü değil, görünür alanın oranıdır (D10'un yasakladığı üst bar /
alt bilgi pikselleri gömülmüyor).
- `border-collapse: separate`: `collapse` iken yapışkan hücrenin kenarlığı kayarken
kaybolur (tarayıcıların bilinen davranışı).
--------------------------------------------------------------------------- */
.puantaj-matris-kap {
max-height: 70vh;
overflow: auto;
}
.puantaj-matris {
border-collapse: separate;
border-spacing: 0;
font-size: 11px;
margin-bottom: 0;
}
.puantaj-matris th,
.puantaj-matris td {
white-space: nowrap;
padding: 0.3rem 0.35rem;
border-right: 1px solid var(--vz-border-color);
border-bottom: 1px solid var(--vz-border-color);
vertical-align: middle;
}
.puantaj-matris thead th {
position: sticky;
top: 0;
z-index: 2;
background-color: var(--vz-card-bg);
text-align: center;
font-weight: 600;
}
.puantaj-matris .pm-sabit {
position: sticky;
left: 0;
z-index: 1;
background-color: var(--vz-card-bg);
min-width: 190px;
max-width: 230px;
text-align: start;
}
.puantaj-matris thead .pm-sabit {
z-index: 3;
}
.puantaj-matris .pm-haftasonu {
background-color: var(--vz-light);
}
.puantaj-matris .pm-hucre {
position: relative;
width: 34px;
min-width: 34px;
text-align: center;
font-weight: 600;
cursor: pointer;
}
.puantaj-matris .pm-hucre:hover {
outline: 2px solid var(--vz-primary);
outline-offset: -2px;
}
.puantaj-matris .pm-gelecek {
opacity: 0.4;
}
.puantaj-matris .pm-kilit,
.puantaj-takvim .pm-kilit {
position: absolute;
top: 0;
right: 1px;
font-size: 8px;
opacity: 0.75;
}
.puantaj-matris .pm-bayat {
position: absolute;
bottom: 0;
right: 1px;
font-size: 8px;
}
/* İK F2b (2026-10-13): ONAYSIZ FAZLA MESAİ - puantajda fazla mesai var ama onaylı talep
yok/yetmiyor. Hücrenin sol üst köşesinde küçük nokta (kilit sağ üstte, bayat sağ altta). */
.puantaj-matris .pm-onaysiz-fm {
position: absolute;
top: 2px;
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--vz-danger);
}
.pm-onaysiz-fm-nokta {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--vz-danger);
vertical-align: middle;
margin-left: 0.15rem;
}
.puantaj-matris .pm-ozet {
text-align: end;
min-width: 56px;
}
.puantaj-lejant-ogesi {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-right: 0.9rem;
margin-bottom: 0.35rem;
font-size: 12px;
}
.puantaj-lejant-ogesi .pm-ornek {
display: inline-block;
min-width: 28px;
padding: 0.05rem 0.3rem;
border-radius: 0.2rem;
text-align: center;
font-weight: 600;
font-size: 11px;
border: 1px solid var(--vz-border-color);
}
/* Kart takvimi: 7 sütunlu ay ızgarası. */
.puantaj-takvim {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.35rem;
}
.puantaj-takvim .pt-baslik {
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--vz-secondary-color);
}
.puantaj-takvim .pt-gun {
position: relative;
min-height: 58px;
padding: 0.3rem;
border: 1px solid var(--vz-border-color);
border-radius: 0.3rem;
cursor: pointer;
text-align: center;
}
.puantaj-takvim .pt-gun:hover {
outline: 2px solid var(--vz-primary);
outline-offset: -2px;
}
.puantaj-takvim .pt-gun.pt-bos {
border-style: dashed;
cursor: default;
opacity: 0.4;
}
.puantaj-takvim .pt-gun.pt-bos:hover {
outline: none;
}
.puantaj-takvim .pt-no {
position: absolute;
top: 2px;
left: 5px;
font-size: 11px;
}
.puantaj-takvim .pt-kod {
display: block;
margin-top: 0.9rem;
font-weight: 700;
font-size: 14px;
}
.puantaj-takvim .pm-gelecek {
opacity: 0.45;
}
/* ===== Ürün görselleri (HibritHESAP ürün kartı + Ürünler listesi, 2026-10-12) =====
Görsel dış adresten gelir ve boyutu belirsizdir; kap oranı sabitlenir, görsel
kırpılmadan sığdırılır (object-fit: contain). */
.urun-gorsel-onizleme {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.urun-gorsel-onizleme img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.urun-gorsel-kucuk {
width: 3rem;
height: 3rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.urun-gorsel-kucuk img,
.urun-gorsel-avatar {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ─────────── İŞE ALIM (İK F5a-1, 2026-10-13) ───────────
Aday kartı (Velzon candidate grid) ve aday profil başlığı (ProfileSimple deseni).
Profil başlığında ARKA PLAN GÖRSELİ YOK (dış varlık yüklenmez, şartname §5.1) - tema
rengi degradesi kullanılır; koyu temada da --vz-primary üzerinden okunur. */
.aday-kart {
transition: transform .15s ease, box-shadow .15s ease;
}
.aday-kart:hover {
transform: translateY(-2px);
box-shadow: 0 .5rem 1rem rgba(var(--vz-primary-rgb), .12);
}
.aday-profil-bant {
background: linear-gradient(135deg, rgba(var(--vz-primary-rgb), 1) 0%, rgba(var(--vz-primary-rgb), .75) 55%, rgba(var(--vz-info-rgb), .85) 100%);
border-radius: var(--vz-card-border-radius, .25rem) var(--vz-card-border-radius, .25rem) 0 0;
}
.aday-profil-bant .avatar-xl .avatar-title {
border: 3px solid rgba(255, 255, 255, .6);
}
/* Özgeçmiş zaman çizelgesi - deneyim satırlarının solundaki çizgi ve nokta. */
.aday-zaman-cizelgesi {
position: relative;
padding-left: 1.5rem;
}
.aday-zaman-cizelgesi::before {
content: "";
position: absolute;
left: .45rem;
top: .35rem;
bottom: .35rem;
width: 2px;
background: var(--vz-border-color);
}
.aday-zaman-cizelgesi .aday-zaman-ogesi {
position: relative;
padding-bottom: 1rem;
}
.aday-zaman-cizelgesi .aday-zaman-ogesi::before {
content: "";
position: absolute;
left: -1.32rem;
top: .3rem;
width: .75rem;
height: .75rem;
border-radius: 50%;
background: var(--vz-primary);
box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .2);
}
/* ─────────── PERFORMANS (İK F5b-1, 2026-10-13) ───────────
Dönem aşama şeridi: Velzon `progress-nav` görünümünün etiketli hâli (adım dairesi + ad + plan
tarihi; tamamlanan success, güncel primary halkalı, gelecek soluk). JS YOK - durum Blazor'dan. */
.prf-asama-seridi {
display: flex;
justify-content: space-between;
position: relative;
gap: .5rem;
}
.prf-asama-seridi .prf-asama {
flex: 1 1 0;
min-width: 0;
position: relative;
text-align: center;
}
/* Adımlar arası çizgi - bir önceki adımın dairesinden bu adımın dairesine. */
.prf-asama-seridi .prf-asama + .prf-asama::before {
content: "";
position: absolute;
top: 1.25rem;
right: calc(50% + 1.5rem);
width: calc(100% - 3rem + .5rem);
height: 2px;
background: var(--vz-border-color);
}
.prf-asama-seridi .prf-asama.tamam + .prf-asama::before,
.prf-asama-seridi .prf-asama.tamam + .prf-asama.guncel::before {
background: var(--vz-success);
}
.prf-asama-seridi .prf-asama-daire {
width: 2.5rem;
height: 2.5rem;
margin: 0 auto .5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
background: var(--vz-light);
color: var(--vz-secondary-color);
position: relative;
z-index: 1;
}
.prf-asama-seridi .prf-asama.tamam .prf-asama-daire {
background: var(--vz-success);
color: #fff;
}
.prf-asama-seridi .prf-asama.guncel .prf-asama-daire {
background: var(--vz-primary);
color: #fff;
box-shadow: 0 0 0 5px rgba(var(--vz-primary-rgb), .18);
}
.prf-asama-seridi .prf-asama-ad {
font-size: .8125rem;
font-weight: var(--vz-font-weight-medium, 500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prf-asama-seridi .prf-asama:not(.tamam):not(.guncel) .prf-asama-ad {
color: var(--vz-secondary-color);
}
@media (max-width: 767.98px) {
.prf-asama-seridi .prf-asama-ad,
.prf-asama-seridi .prf-asama-tarih {
display: none;
}
}
/* Hedef kartı: trafik ışığı rengi solda kalın şerit (border-start + border-{renk}). */
.prf-hedef-karti {
border-left-width: 4px !important;
}
.prf-hedef-karti.iptal {
opacity: .6;
}
/* ─────────── PERFORMANS F5b-2 (2026-10-13): değerlendirme formu ve yetkinlik modeli ───────────
Kalibrasyonu atlanan dönemde şeritteki adım soluk ve kesikli görünür. */
.prf-asama-seridi .prf-asama.atlandi .prf-asama-daire {
background: transparent;
border: 2px dashed var(--vz-border-color);
}
.prf-asama-seridi .prf-asama.atlandi .prf-asama-ad {
text-decoration: line-through;
}
/* BARS seviye seçici: beş eşit düğme, altında seviye adı. Seçim Blazor durumudur (btn-check). */
.prf-seviye-secici {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .375rem;
}
.prf-seviye-secici .btn {
display: flex;
flex-direction: column;
align-items: center;
padding: .4rem .25rem;
line-height: 1.15;
position: relative;
}
.prf-seviye-secici .btn .prf-seviye-puan {
font-size: 1.1rem;
font-weight: 600;
}
.prf-seviye-secici .btn .prf-seviye-ad {
font-size: .6875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Beklenen seviye işareti - düğmenin üst köşesinde küçük bayrak. */
.prf-seviye-secici .btn .prf-beklenen {
position: absolute;
top: -.45rem;
right: -.3rem;
font-size: .75rem;
line-height: 1;
color: var(--vz-warning);
}
/* Seçili seviyenin davranış göstergeleri - kartın İÇİNDE (ipucu değil). */
.prf-gosterge-kutusu {
border-left: 3px solid var(--vz-primary);
background: rgba(var(--vz-primary-rgb), .05);
border-radius: 0 .25rem .25rem 0;
padding: .5rem .75rem;
}
.prf-gosterge-kutusu ul {
margin: 0;
padding-left: 1rem;
}
/* Canlı toplam göstergesi: grafik kabı BOŞ (ApexCharts), değer üstüne bindirilen Blazor metnidir. */
.prf-toplam-gosterge {
position: relative;
}
.prf-toplam-gosterge .prf-toplam-deger {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* ─────────── İŞE ALIM F5a-2 (2026-10-13): kadro talebi ve ilan ───────────
Liste satırı / ilan kartı: üzerine gelince hafif kalkış (Velzon Job List hissi). Kart DEĞİL (D19
bölüm kartı kuralına girmez) - kenarlıklı satır. */
.kadro-talep-satiri,
.ilan-karti {
transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}
.kadro-talep-satiri:hover,
.ilan-karti:hover {
border-color: rgba(var(--vz-primary-rgb), .45) !important;
box-shadow: 0 .25rem .75rem rgba(var(--vz-primary-rgb), .08);
}
/* Temizlenmiş Quill HTML'inin okunur basımı (ilan önizlemesi ve salt okunur ilan). */
.ilan-onizleme p {
margin-bottom: .5rem;
}
.ilan-onizleme ul,
.ilan-onizleme ol {
padding-left: 1.25rem;
margin-bottom: .5rem;
}
.ilan-onizleme h2,
.ilan-onizleme h3 {
font-size: 1rem;
font-weight: var(--vz-font-weight-semibold, 600);
margin: .75rem 0 .375rem;
}
/* ─────────── İŞE ALIM F5a-3 (2026-10-13): başvuru hattı (Kanban), mülakat takvimi ───────────
HAT KABI `tasks-board` DEĞİL: Velzon'un o sınıfı kendi `::-webkit-scrollbar` kurallarını taşıyor
ve D13'ün global ince çubuğunu (özgüllükle) eziyordu. Düzen aynı: yatay akan sütunlar. Yükseklik
`hibritWidgets.ekranaOturt` ile ÖLÇÜLÜR (D10) - burada yalnız artan yerin paylaşımı var; yükseklik
yazılmazsa (dar ekran, JS yok) sütunlar içerikleri kadar uzar, sayfa normal kayar. */
.isa-hat {
display: flex;
align-items: stretch;
gap: 1rem;
overflow-x: auto;
padding-bottom: .5rem;
}
.isa-hat-sutun {
flex: 0 0 300px;
display: flex;
flex-direction: column;
min-height: 0;
border-radius: var(--vz-border-radius);
background: rgba(var(--vz-light-rgb), .6);
border: 1px dashed transparent;
transition: border-color .12s ease-in-out, background-color .12s ease-in-out;
}
/* Bırakma hedefi - sınıfı YALNIZ hibritWidgets.kanbanKur ekler/kaldırır (sütun kabının class'ı Blazor'da sabit). */
.isa-hat [data-kanban-sutun].kanban-hedef {
outline: 2px dashed var(--vz-primary);
outline-offset: -2px;
}
.isa-hat-sutun.kanban-hedef {
border-color: var(--vz-primary);
background: rgba(var(--vz-primary-rgb), .07);
}
.isa-hat-sutun > .isa-hat-baslik {
flex: 0 0 auto;
}
.isa-hat-sutun > .isa-hat-liste {
flex: 1 1 auto;
min-height: 4rem;
overflow-y: auto;
padding: .5rem;
}
/* Uç aşamalar sağda DARALTILMIŞ tek sütun (sayılarla) - "Kapananları göster" ile açılır. */
.isa-hat-uc {
flex: 0 0 200px;
}
.isa-hat-kart {
cursor: grab;
transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.isa-hat-kart:hover {
box-shadow: 0 .25rem .75rem rgba(var(--vz-primary-rgb), .12);
}
.isa-hat-kart:active {
cursor: grabbing;
}
/* "Taşınıyor" - komut sonucu gelene kadar kart soluk + spinner (iyimser güncelleme YOK). */
.isa-hat-kart.isa-tasiniyor {
opacity: .55;
pointer-events: none;
}
/* Haftalık mülakat takvimi - 7 sütun ızgara (FullCalendar YOK, onaylı listede değil). Dar ekranda alt alta. */
.isa-takvim {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: .5rem;
}
@media (max-width: 991.98px) {
.isa-takvim {
grid-template-columns: minmax(0, 1fr);
}
}
.isa-takvim-gun {
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius);
min-height: 9rem;
background: var(--vz-card-bg);
}
.isa-takvim-gun.bugun {
border-color: var(--vz-primary);
box-shadow: inset 0 3px 0 var(--vz-primary);
}
.isa-takvim-ogesi {
border-left: 3px solid var(--vz-primary);
background: rgba(var(--vz-primary-rgb), .05);
border-radius: 0 .25rem .25rem 0;
}
.isa-takvim-ogesi.iptal {
border-left-color: var(--vz-danger);
background: rgba(var(--vz-danger-rgb), .04);
text-decoration: line-through;
}
.isa-takvim-ogesi.yapildi {
border-left-color: var(--vz-success);
background: rgba(var(--vz-success-rgb), .05);
}
/* Puanlama kartı: solda yapışkan aday özeti (geniş ekranda). */
@media (min-width: 992px) {
.isa-yapiskan {
position: sticky;
/* Üst bar sabit (fixed); değişken yoksa tema varsayılanı. Kayma payı küçük: ölçü değil eşik (D10 dışı). */
top: calc(var(--vz-header-height, 70px) + 1.5rem);
}
}
/* BARS seviye tanımları - küçük üç sütun. */
.isa-bars {
font-size: .75rem;
}
.isa-bars .isa-bars-seviye {
border-top: 2px solid var(--vz-border-color);
padding-top: .25rem;
}
/* ─────────── PERFORMANS F5b-3 (2026-10-13): 9-kutu, kalibrasyon, 360° ───────────
9-KUTU HTML IZGARASIDIR (ApexCharts değil - kişiyi görüp tıklamak gerekiyor, şartname §5.1). Renk Velzon
subtle zemin + aynı renkte kenarlık; sol alt danger → sağ üst success. Dar ekranda eksen etiketleri gizlenir. */
.prf-dokuz-kutu {
display: grid;
grid-template-columns: 2rem repeat(3, minmax(0, 1fr));
gap: .75rem;
}
.prf-dokuz-kutu .prf-eksen-y {
grid-row: 1 / span 3;
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--vz-secondary-color);
}
.prf-dokuz-kutu .prf-eksen-x {
grid-column: 2 / span 3;
text-align: center;
font-weight: 600;
color: var(--vz-secondary-color);
}
.prf-kutu {
display: flex;
flex-direction: column;
min-height: 9rem;
padding: .75rem;
border: 1px solid;
border-radius: .5rem;
color: inherit;
cursor: pointer;
transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.prf-kutu:hover,
.prf-kutu:focus-visible {
box-shadow: 0 .25rem .75rem rgba(var(--vz-dark-rgb), .12);
transform: translateY(-1px);
}
.prf-kutu.secili {
box-shadow: 0 0 0 .2rem rgba(var(--vz-primary-rgb), .35);
}
.prf-kutu .prf-kutu-sayi {
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
}
.prf-kutu .prf-kutu-aciklama {
flex-grow: 1;
}
@media (max-width: 767.98px) {
.prf-dokuz-kutu {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem;
}
.prf-dokuz-kutu .prf-eksen-y,
.prf-kutu .prf-kutu-aciklama {
display: none;
}
.prf-dokuz-kutu .prf-eksen-x {
grid-column: 1 / span 3;
}
}
/* Panodaki küçük 9-kutu özeti - yalnız sayılar. */
.prf-dokuz-kutu-mini {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem;
}
.prf-kutu-mini {
padding: .5rem .75rem;
border: 1px solid;
border-radius: .375rem;
min-width: 0;
}
/* 360° atama popup'ında satır içi tür seçicisi (statik 3 seçenek - Select2 istisnası) ve rozet içindeki kaldır düğmesi. */
.prf-tur-secici {
flex: 0 0 9.5rem;
max-width: 9.5rem;
}
.prf-rozet-kapat {
width: .5rem;
height: .5rem;
padding: .1rem;
background-size: .5rem;
}
/* ─────────── PERFORMANS F5b-4 (2026-10-13): gelişim planı, geri bildirim, 1:1 ───────────
Zaman çizelgesi noktasının renk çeşitleri (aday-zaman-cizelgesi'nin ÜSTÜNE - ikinci bir çizelge yazılmadı),
geri bildirim kartının sol şeridi (takdir yeşil, gelişim mavi) ve konuşulan gündem maddesinin üstü çizili hâli. */
.aday-zaman-cizelgesi .aday-zaman-ogesi.prf-nokta-success::before { background: var(--vz-success); box-shadow: 0 0 0 3px rgba(var(--vz-success-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.prf-nokta-info::before { background: var(--vz-info); box-shadow: 0 0 0 3px rgba(var(--vz-info-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.prf-nokta-warning::before { background: var(--vz-warning); box-shadow: 0 0 0 3px rgba(var(--vz-warning-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.prf-nokta-danger::before { background: var(--vz-danger); box-shadow: 0 0 0 3px rgba(var(--vz-danger-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.prf-nokta-secondary::before { background: var(--vz-secondary); box-shadow: 0 0 0 3px rgba(var(--vz-secondary-rgb), .2); }
/* Bootstrap .border !important taşıdığı için şerit de !important ister. */
.prf-geri-bildirim {
border-left-width: 3px !important;
}
.prf-geri-bildirim.takdir {
border-left-color: var(--vz-success) !important;
}
.prf-geri-bildirim.gelisim {
border-left-color: var(--vz-info) !important;
}
.prf-gundem-maddesi.konusuldu .prf-gundem-metin {
text-decoration: line-through;
color: var(--vz-secondary-color);
}
/* Takdir rozeti seçici - btn-check düğmeleri satıra sarılır. */
.prf-rozet-secici {
display: flex;
flex-wrap: wrap;
gap: .375rem;
}
/* ─────────── BENİM İK'M (İK F4, 2026-10-13) ───────────
Çalışan portalı + yönetici "Ekibim". Profil şeridi `aday-profil-bant`, zaman çizelgesi
`aday-zaman-cizelgesi`, ekip takvimi `puantaj-matris` ile ORTAK - burada yalnız portala özgü
parçalar var. Telefondan açılabildiği için sekme şeridi sarılmaz, YATAY KAYAR. */
.bik-avatar {
border: 3px solid rgba(255, 255, 255, .6);
}
.bik-sekmeler .nav-link {
white-space: nowrap;
}
/* Son 7 gün şeridi - kart takvimiyle aynı palet (hücre rengi satır içi stil). */
.bik-hafta {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: .5rem;
}
.bik-hafta-gun {
border: 1px solid var(--vz-border-color);
border-radius: .4rem;
padding: .5rem .25rem;
text-align: center;
line-height: 1.35;
}
@media (max-width: 575.98px) {
.bik-hafta {
gap: .25rem;
}
.bik-hafta-gun {
padding: .35rem .1rem;
}
}
/* Takvim yaprağı (resmî tatil listesi). */
.bik-takvim-yapragi {
width: 46px;
border: 1px solid var(--vz-border-color);
border-radius: .35rem;
overflow: hidden;
text-align: center;
line-height: 1.1;
}
.bik-takvim-yapragi .bik-ay {
display: block;
background-color: var(--vz-primary);
color: #fff;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
padding: .15rem 0;
}
.bik-takvim-yapragi .bik-gun {
display: block;
font-size: 17px;
font-weight: 700;
padding: .2rem 0;
}
/* Ekip takvimi: ONAY BEKLEYEN izin - taranmış hücre (onaylı izin puantaj paletinden "İzinli"). */
.puantaj-matris .bik-bekleyen {
background-image: repeating-linear-gradient(45deg, rgba(var(--vz-warning-rgb), .28) 0, rgba(var(--vz-warning-rgb), .28) 4px, transparent 4px, transparent 8px);
}
.bik-bekleyen-ornek {
display: inline-block;
width: 28px;
height: 16px;
border: 1px solid var(--vz-border-color);
border-radius: .2rem;
vertical-align: middle;
background-image: repeating-linear-gradient(45deg, rgba(var(--vz-warning-rgb), .45) 0, rgba(var(--vz-warning-rgb), .45) 4px, transparent 4px, transparent 8px);
}
/* Ekip üyesi kartı: bugünkü durum şeridi kartın solunda. */
.bik-uye-karti {
border-left: 3px solid var(--vz-border-color);
}
.bik-uye-karti.bik-durum-success { border-left-color: var(--vz-success); }
.bik-uye-karti.bik-durum-primary { border-left-color: var(--vz-primary); }
.bik-uye-karti.bik-durum-info { border-left-color: var(--vz-info); }
.bik-uye-karti.bik-durum-warning { border-left-color: var(--vz-warning); }
.bik-uye-karti.bik-durum-danger { border-left-color: var(--vz-danger); }
.bik-uye-karti.bik-durum-secondary { border-left-color: var(--vz-secondary); }
/* ─────────── İK ORTAK KPI + ÖZLÜK (İK F5c, 2026-10-13) ───────────
`IkKpiKarti` (İşe Alım/Performans KPI dili): tıklanabilir kart imleci ve seçili süzgeç çerçevesi.
Özlük: Velzon File Manager dili - dosya kutusu, grup ilerleme satırı, belge önizleme çerçevesi. Renkler TEMA
değişkenlerinden; koyu temada da doğru. */
.ik-kpi-tiklanir {
cursor: pointer;
}
.ik-kpi-tiklanir:focus-visible {
outline: 2px solid rgba(var(--vz-primary-rgb), .5);
outline-offset: 2px;
}
.ik-kpi-aktif {
border-width: 2px !important;
}
/* Belge kartı (personel özlük sekmesi, Belgelerim): File Manager'ın dosya satırı; bekleyen yükleme kesik çerçeveli. */
.ozl-belge {
border: 1px solid var(--vz-border-color);
border-radius: .4rem;
padding: .6rem .75rem;
background-color: var(--vz-secondary-bg);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ozl-belge:hover {
border-color: rgba(var(--vz-primary-rgb), .35);
box-shadow: 0 .25rem .75rem rgba(var(--vz-primary-rgb), .08);
}
.ozl-belge.bekliyor {
border-style: dashed;
border-color: var(--vz-info);
}
.ozl-belge .ozl-gecerlilik {
height: 4px;
}
/* Kuyruk / talep kartı: sol kenarda bekleme (SLA) şeridi - İşe Alım hat kartının hareketi. */
.ozl-kuyruk-karti {
border-left: 3px solid var(--vz-border-color) !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.ozl-kuyruk-karti:hover {
transform: translateY(-2px);
box-shadow: 0 .5rem 1rem rgba(var(--vz-primary-rgb), .12);
}
.ozl-kuyruk-karti.ozl-sla-success { border-left-color: var(--vz-success) !important; }
.ozl-kuyruk-karti.ozl-sla-warning { border-left-color: var(--vz-warning) !important; }
.ozl-kuyruk-karti.ozl-sla-danger { border-left-color: var(--vz-danger) !important; }
.ozl-kuyruk-karti.ozl-sla-info { border-left-color: var(--vz-info) !important; }
.ozl-kuyruk-karti.ozl-sla-primary { border-left-color: var(--vz-primary) !important; }
.ozl-kuyruk-karti.ozl-sla-secondary { border-left-color: var(--vz-secondary) !important; }
/* Karar popup'ında belge önizlemesi (PDF çerçevesi / görsel). */
.ozl-onizleme {
height: 62vh;
min-height: 320px;
border: 1px solid var(--vz-border-color);
border-radius: .4rem;
background-color: var(--vz-light);
overflow: hidden;
}
.ozl-onizleme iframe {
width: 100%;
height: 100%;
border: 0;
}
.ozl-onizleme img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 991.98px) {
.ozl-onizleme {
height: 45vh;
}
}
/* Belge türü kutusu (PER.023): tür başına küçük kart, grup kartının içinde ızgara. */
.ozl-tur-kutusu {
border: 1px solid var(--vz-border-color);
border-radius: .4rem;
padding: .75rem;
height: 100%;
background-color: var(--vz-secondary-bg);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ozl-tur-kutusu:hover {
border-color: rgba(var(--vz-primary-rgb), .35);
box-shadow: 0 .25rem .75rem rgba(var(--vz-primary-rgb), .08);
}
.ozl-tur-kutusu.pasif {
opacity: .6;
}
/* Özlük karar popup'ı: solda önizleme, sağda form - lg'den geniş. */
.modal-dialog-custom.ozl-karar-popup {
max-width: 1200px;
width: 94vw;
}
/* ─────────── GAYRİMENKUL (görsel geçiş, 2026-10-14) ───────────
İK İşe Alım/Özlük dilinin gayrimenkul karşılığı. Profil bandı (`aday-profil-bant`), zaman çizelgesi
(`aday-zaman-cizelgesi`), takvim yaprağı (`bik-takvim-yapragi`) ve dosya kutuları (`ozl-*`) ORTAK - burada
yalnız gayrimenkule özgü parçalar var: taşınmaz/proje kartı kapağı, renkli zaman noktası, daire ızgarası.
Renkler TEMA değişkenlerinden; koyu temada da doğru. Dış görsel YOK (kapak tema degradesi + ikon). */
.gym-kart {
transition: transform .15s ease, box-shadow .15s ease;
overflow: hidden;
}
.gym-kart:hover {
transform: translateY(-2px);
box-shadow: 0 .5rem 1rem rgba(var(--vz-primary-rgb), .12);
}
.gym-kart-kapak {
position: relative;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.6rem;
color: #fff;
background: linear-gradient(135deg, rgba(var(--vz-primary-rgb), 1) 0%, rgba(var(--vz-primary-rgb), .7) 100%);
}
.gym-kart-kapak > i {
opacity: .9;
}
.gym-kapak-success { background: linear-gradient(135deg, rgba(var(--vz-success-rgb), 1) 0%, rgba(var(--vz-success-rgb), .7) 100%); }
.gym-kapak-info { background: linear-gradient(135deg, rgba(var(--vz-info-rgb), 1) 0%, rgba(var(--vz-info-rgb), .7) 100%); }
.gym-kapak-warning { background: linear-gradient(135deg, rgba(var(--vz-warning-rgb), 1) 0%, rgba(var(--vz-warning-rgb), .7) 100%); }
.gym-kapak-secondary { background: linear-gradient(135deg, rgba(var(--vz-secondary-rgb), 1) 0%, rgba(var(--vz-secondary-rgb), .7) 100%); }
.gym-kapak-primary { background: linear-gradient(135deg, rgba(var(--vz-primary-rgb), 1) 0%, rgba(var(--vz-primary-rgb), .7) 100%); }
.gym-kart-rozet {
position: absolute;
top: .6rem;
right: .6rem;
font-size: .8rem;
}
.gym-kart-rozet .badge {
background-color: var(--vz-card-bg) !important;
}
/* Proje kartında kapak bölümünün baş harfi. */
.gym-kart-kapak .gym-bas-harf {
font-size: 2rem;
font-weight: 700;
letter-spacing: .05em;
}
/* Çok parçalı satış ilerleme çubuğu (satılan / rezerve / boş). */
.gym-ilerleme {
height: 8px;
}
/* Panodaki uzun listeler kartı uzatmasın. */
.gym-kaydirma {
max-height: 340px;
overflow-y: auto;
}
.gym-kaydirma-kisa {
max-height: 180px;
overflow-y: auto;
}
/* Zaman çizelgesi noktasının rengi (varsayılanı primary - `aday-zaman-cizelgesi`). */
.aday-zaman-cizelgesi .aday-zaman-ogesi.gym-nokta-success::before { background: var(--vz-success); box-shadow: 0 0 0 3px rgba(var(--vz-success-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.gym-nokta-info::before { background: var(--vz-info); box-shadow: 0 0 0 3px rgba(var(--vz-info-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.gym-nokta-warning::before { background: var(--vz-warning); box-shadow: 0 0 0 3px rgba(var(--vz-warning-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.gym-nokta-danger::before { background: var(--vz-danger); box-shadow: 0 0 0 3px rgba(var(--vz-danger-rgb), .2); }
.aday-zaman-cizelgesi .aday-zaman-ogesi.gym-nokta-secondary::before { background: var(--vz-secondary-color); box-shadow: 0 0 0 3px rgba(var(--vz-secondary-rgb), .15); }
/* Eksik zorunlu evrak kutusu. */
.ozl-tur-kutusu.gym-evrak-eksik {
border-color: rgba(var(--vz-danger-rgb), .45);
border-style: dashed;
}
/* ── Daire ızgarası (proje detayı): satırlar kat (üstte en yüksek), hücreler daire. ApexCharts heatmap
DEĞİL (analiz §10.5): hücre tıklanabilir ve çok satırlı içerik taşır. */
.gym-daire-izgara {
display: flex;
flex-direction: column;
gap: .4rem;
}
.gym-kat-satiri {
display: flex;
align-items: stretch;
gap: .4rem;
}
.gym-kat-etiketi {
flex: 0 0 64px;
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 600;
color: var(--vz-secondary-color);
background-color: var(--vz-light);
border-radius: .35rem;
}
.gym-kat-daireler {
display: flex;
flex-wrap: wrap;
gap: .4rem;
flex: 1 1 auto;
}
.gym-daire {
width: 108px;
min-height: 66px;
padding: .35rem .5rem;
border-radius: .4rem;
border: 1px solid transparent;
text-align: left;
line-height: 1.25;
font-size: .75rem;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.gym-daire:hover,
.gym-daire:focus-visible {
transform: translateY(-1px);
box-shadow: 0 .25rem .6rem rgba(var(--vz-dark-rgb), .12);
outline: none;
}
.gym-daire .gym-daire-no {
font-weight: 700;
font-size: .85rem;
}
.gym-daire-success { background-color: var(--vz-success-bg-subtle); border-color: rgba(var(--vz-success-rgb), .35); color: var(--vz-success-text-emphasis); }
.gym-daire-warning { background-color: var(--vz-warning-bg-subtle); border-color: rgba(var(--vz-warning-rgb), .45); color: var(--vz-warning-text-emphasis); }
.gym-daire-secondary { background-color: var(--vz-secondary-bg-subtle); border-color: rgba(var(--vz-secondary-rgb), .35); color: var(--vz-secondary-text-emphasis); }
.gym-daire-info { background-color: var(--vz-info-bg-subtle); border-color: rgba(var(--vz-info-rgb), .4); color: var(--vz-info-text-emphasis); }
.gym-daire-primary { background-color: var(--vz-primary-bg-subtle); border-color: rgba(var(--vz-primary-rgb), .4); color: var(--vz-primary-text-emphasis); }
.gym-daire-dark { background-color: var(--vz-dark-bg-subtle); border-color: rgba(var(--vz-dark-rgb), .3); color: var(--vz-dark-text-emphasis); }
/* GYM-0b: bize ait OLMAYAN bölüm (arsa sahibi / yüklenici / ortak payı) - satış hattı dışında, taralı zemin. */
.gym-daire.gym-daire-baskasi {
background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--vz-secondary-rgb), .12) 6px 12px);
border-style: dashed;
}
.gym-daire.secili {
box-shadow: 0 0 0 2px var(--vz-primary);
}
.gym-daire.soluk {
opacity: .3;
}
.gym-lejant-kutu {
display: inline-block;
width: 14px;
height: 14px;
border-radius: .2rem;
vertical-align: middle;
}
@media (max-width: 575.98px) {
.gym-kat-etiketi {
flex-basis: 44px;
}
.gym-daire {
width: calc(50% - .2rem);
}
}
/* ─────────── ONAY MERKEZİ (onay motoru v2, B-8, 2026-10-14) ───────────
Gelen kutusu: Velzon Mailbox'ın sol menüsü (`.mail-list`) + Tasks ListView satır dili; satırın sol kenarında
bekleme (SLA) şeridi (Özlük kuyruğunun hareketi). Detay: aşama şeridi (durum adımları) ve karar kartı.
Renkler TEMA değişkenlerinden; koyu temada da doğru. */
.ony-menu .mail-list a {
border-radius: .3rem;
padding: .45rem .6rem;
margin: 0 -.6rem .1rem;
transition: background-color .15s ease;
}
.ony-menu .mail-list a:hover {
background-color: rgba(var(--vz-primary-rgb), .06);
}
.ony-menu .mail-list a.active {
color: var(--vz-primary);
background-color: rgba(var(--vz-primary-rgb), .1);
}
.ony-menu .mail-list a.active i {
color: var(--vz-primary);
}
.ony-is-satiri {
display: flex;
align-items: center;
gap: .9rem;
padding: .85rem 1rem;
border: 1px solid var(--vz-border-color);
border-left: 3px solid var(--vz-border-color);
border-radius: .4rem;
margin-bottom: .6rem;
color: var(--vz-body-color);
background-color: var(--vz-secondary-bg);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ony-is-satiri:hover {
color: var(--vz-body-color);
transform: translateY(-1px);
box-shadow: 0 .4rem .9rem rgba(var(--vz-primary-rgb), .1);
border-color: rgba(var(--vz-primary-rgb), .35);
}
.ony-is-satiri.ony-sla-success { border-left-color: var(--vz-success); }
.ony-is-satiri.ony-sla-warning { border-left-color: var(--vz-warning); }
.ony-is-satiri.ony-sla-danger { border-left-color: var(--vz-danger); }
.ony-is-satiri.ony-sla-info { border-left-color: var(--vz-info); }
.ony-is-satiri.ony-sla-secondary { border-left-color: var(--vz-secondary); }
.ony-is-satiri.ony-sla-primary { border-left-color: var(--vz-primary); }
.ony-is-satiri .ony-is-sag {
flex: 0 0 auto;
text-align: end;
min-width: 9.5rem;
}
@media (max-width: 767.98px) {
.ony-is-satiri {
flex-wrap: wrap;
}
.ony-is-satiri .ony-is-sag {
flex: 1 1 100%;
text-align: start;
min-width: 0;
}
}
/* Aşama şeridi: yatay adımlar, bağlantı çizgisi tamamlanan adımda renkli. Dar ekranda alt alta. */
.ony-asama-seridi {
display: flex;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.ony-asama {
position: relative;
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 0 .4rem;
}
.ony-asama::before {
content: "";
position: absolute;
top: 17px;
left: calc(-50% + 20px);
right: calc(50% + 20px);
border-top: 2px dashed var(--vz-border-color);
}
.ony-asama:first-child::before {
display: none;
}
.ony-asama.gecildi::before {
border-top-style: solid;
border-top-color: var(--vz-success);
}
.ony-asama .ony-asama-nokta {
width: 36px;
height: 36px;
margin: 0 auto .4rem;
position: relative;
z-index: 1;
font-size: 18px;
}
.ony-asama.aktif .ony-asama-nokta {
box-shadow: 0 0 0 4px rgba(var(--vz-warning-rgb), .2);
}
@media (max-width: 575.98px) {
.ony-asama-seridi {
flex-direction: column;
gap: .75rem;
}
.ony-asama {
display: flex;
align-items: center;
gap: .6rem;
text-align: start;
}
.ony-asama::before {
display: none;
}
.ony-asama .ony-asama-nokta {
margin: 0;
flex-shrink: 0;
}
}
/* Karar kartı: üst kenarda birincil renk şeridi. */
.ony-karar-karti {
border-top: 3px solid var(--vz-primary) !important;
}
.ony-alan-tablosu th {
width: 38%;
color: var(--vz-secondary-color);
font-weight: var(--vz-font-weight-medium);
}
/* ═══════════════ ONAY v2 - AKIŞ YÖNETİMİ (B-11: ONY.005/006/010/011/012) ═══════════════
Form tabanlı düzenleyici: sürükle-bırak YOK (K10). Renkler tema değişkenlerinden; koyu temada da çalışır. */
/* Küçük adım şeridi (şablon kartı, tanım listesi). */
.ony-asama-seridi.kucuk .ony-asama .ony-asama-nokta {
width: 28px;
height: 28px;
font-size: 14px;
margin-bottom: .3rem;
}
.ony-asama-seridi.kucuk .ony-asama::before {
top: 13px;
left: calc(-50% + 16px);
right: calc(50% + 16px);
}
.ony-asama-nokta.ony-kosullu {
border-style: dashed !important;
}
/* Tanım kartı: sol kenarda durum rengi (Onay Merkezi satırıyla aynı dil). */
.ony-akis-karti {
border-left: 3px solid var(--vz-border-color) !important;
}
.ony-akis-karti.ony-sla-success { border-left-color: var(--vz-success) !important; }
.ony-akis-karti.ony-sla-warning { border-left-color: var(--vz-warning) !important; }
.ony-akis-karti.ony-sla-secondary { border-left-color: var(--vz-secondary) !important; }
/* Sihirbaz adım göstergesi. */
.ony-sihirbaz-adimlari {
display: flex;
gap: .5rem;
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
counter-reset: none;
}
.ony-sihirbaz-adimlari li {
flex: 1 1 0;
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem .75rem;
border-radius: var(--vz-border-radius);
background: var(--vz-light);
color: var(--vz-secondary-color);
font-size: .8125rem;
font-weight: 500;
}
.ony-sihirbaz-adimlari li.aktif {
background: var(--vz-primary-bg-subtle);
color: var(--vz-primary);
}
.ony-sihirbaz-adimlari li.tamam {
color: var(--vz-success);
}
.ony-sihirbaz-no {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--vz-card-bg);
border: 1px solid currentColor;
font-size: .75rem;
flex-shrink: 0;
}
/* Seçilebilir kartlar (belge türü, şablon). Düğme olarak basılır - klavyeyle de seçilebilir. */
.ony-secim-karti,
.ony-sablon-karti {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius-lg);
background: var(--vz-card-bg);
color: var(--vz-body-color);
text-align: start;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ony-sablon-karti {
display: block;
}
.ony-secim-karti:hover,
.ony-sablon-karti:hover {
border-color: var(--vz-primary-border-subtle);
box-shadow: var(--vz-box-shadow-sm);
}
.ony-secim-karti.secili,
.ony-sablon-karti.secili {
border-color: var(--vz-primary);
box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .15);
}
/* Düzenleyicideki aşama listesi. */
.ony-akis-asamalar {
display: flex;
flex-direction: column;
gap: .75rem;
}
.ony-akis-asama {
position: relative;
display: flex;
align-items: flex-start;
gap: .75rem;
padding: .75rem;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius-lg);
background: var(--vz-card-bg);
}
.ony-akis-asama + .ony-akis-asama::before {
content: "";
position: absolute;
left: calc(.75rem + 17px);
top: calc(-.75rem - 1px);
height: .75rem;
border-left: 2px dashed var(--vz-border-color);
}
.ony-akis-asama.hatali {
border-color: var(--vz-danger-border-subtle);
background: var(--vz-danger-bg-subtle);
}
.ony-akis-asama-no {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* Popup içindeki adım kartı ve koşul grupları. */
.ony-adim-karti {
padding: .75rem;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius);
margin-bottom: .5rem;
background: var(--vz-light-bg-subtle, var(--vz-light));
}
.ony-kosul-grubu {
padding: .75rem;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius);
background: var(--vz-card-bg);
}
.ony-kosul-veya {
text-align: center;
margin: .35rem 0;
}
/* Doğrulama bulgusu ve simülasyon çizelgesi. */
.ony-bulgu {
padding: .25rem 0 .25rem .5rem;
}
.ony-sim-cizelge {
position: relative;
}
.ony-sim-asama {
position: relative;
display: flex;
gap: .75rem;
padding-bottom: 1rem;
}
.ony-sim-asama:not(:last-child)::before {
content: "";
position: absolute;
left: 15px;
top: 32px;
bottom: 0;
border-left: 2px dashed var(--vz-border-color);
}
.ony-sim-asama.calisir:not(:last-child)::before {
border-left-style: solid;
border-left-color: var(--vz-success-border-subtle);
}
.ony-sim-nokta {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
@media (max-width: 575.98px) {
.ony-sihirbaz-adimlari {
flex-direction: column;
}
}
/* ── Onay İzleme (ONY.008, B-15) ── */
.ony-izleme-eylem {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: .35rem;
}
.ony-izleme-eylem .btn {
white-space: nowrap;
}
.ony-darbogaz + .ony-darbogaz {
border-top: 1px dashed var(--vz-border-color);
}
@media (max-width: 767.98px) {
.ony-izleme-eylem {
flex-direction: row;
flex: 1 1 100%;
}
}
/* ───────── BORDRO (2026-10-15) ───────── */
/* Dönem akış şeridi: tamamlanan adımlar dolu, etkin adım halkalı; adımlar arasında ince çizgi. */
.brd-akis-adim {
position: relative;
color: var(--vz-secondary-color);
}
.brd-akis-adim::before {
content: "";
position: absolute;
top: 18px;
left: -50%;
width: 100%;
height: 2px;
background: var(--vz-border-color);
z-index: 0;
}
.brd-akis .col:first-child .brd-akis-adim::before {
display: none;
}
.brd-akis-ikon {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 16px;
background: var(--vz-light);
border: 2px solid var(--vz-border-color);
}
.brd-akis-adim.tamam {
color: var(--vz-body-color);
}
.brd-akis-adim.tamam::before {
background: var(--vz-success);
}
.brd-akis-adim.tamam .brd-akis-ikon {
background: var(--vz-success);
border-color: var(--vz-success);
color: #fff;
}
.brd-akis-adim.etkin .brd-akis-ikon {
box-shadow: 0 0 0 4px rgba(var(--vz-success-rgb), .2);
}
/* Pusula: Velzon fatura detayının bandı. */
.brd-pusula-bant {
background: linear-gradient(135deg, var(--vz-primary) 0%, rgba(var(--vz-primary-rgb), .75) 100%);
}
/* Simülatör tablosunda dilim değişen ay vurgusu. */
.brd-dilim-degisti td {
background-color: rgba(var(--vz-warning-rgb), .08) !important;
}
/* ───────── ÇAY TASNİF TARTIM EKRANI (2026-10-15) - uzaktan okunur ağırlık göstergesi ───────── */
.tsn-agirlik {
font-size: clamp(3.5rem, 9vw, 6.5rem);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.tsn-agirlik .tsn-birim {
font-size: .35em;
font-weight: 500;
margin-left: .25em;
color: var(--vz-secondary-color);
}
/* ───────── KESİK KENARLIK: YALNIZ İSTENEN KENAR (2026-10-15, iki ekranda yaşandı) ─────────
Velzon'un .border-dashed sınıfı DÖRT kenarın stilini kesik yapar (border-style:dashed!important). Eleman yalnız
bir kenar taşıyorsa (border-bottom border-dashed - satır ayırıcı deseni) öbür üç kenar tarayıcı varsayılanıyla
(medium ≈ 3px, currentColor = SİYAH) çizilir: kalın siyah çerçeve. Tam çerçeve isteyen zaten .border ekler; onun
dışında kalınlık sıfırlanır, tek kenar sınıfları (!important) kendi kenarını geri getirir. Sayfada sınıf EKLENMEZ.
HARİÇ: çizgisini tarayıcı/bootstrap kuralından (border-top) alır, sıfırlansaydı kaybolurdu (Onay zaman çizelgesi). */
.border-dashed:not(.border):not(hr) {
border-width: 0;
}
/* ───────── KURUMSAL DUYURU (2026-10-15) - Velzon blog listesi / blog overview uyarlaması ─────────
Yalnız ölçü ve ayırıcı; renkler tema sınıflarından (bg-*-subtle) ve değişkenlerden gelir, koyu temada doğru.
Sayfa içine `style` yazılmasın diye burada. */
/* Akış satırı: tek kartın içinde kesik çizgiyle ayrılan satırlar (D18 - süzgeç ile liste aynı kartta). */
.dyr-akis-satiri {
padding: 1rem 0;
}
.dyr-akis-satiri + .dyr-akis-satiri {
border-top: 1px dashed var(--vz-border-color);
}
/* Kapak görseli / görselsiz duyurunun kategori renkli yer tutucusu - satırlar aynı hizada kalsın. */
.dyr-kapak {
width: 120px;
height: 90px;
object-fit: cover;
}
/* Yeni Duyuru popup'ı - iki sütunlu form; D4 için ortak .modal-dialog-custom kuralları geçerli (overflow YOK). */
.modal-dialog-custom.dyr-yeni-popup {
max-width: 1100px;
}
/* Çoklu ek yükleme kutusu: Velzon .dropzone görünümü ama form içinde 230px yer kaplamasın. */
.dropzone.dyr-dropzone {
min-height: 0;
padding: 1.25rem 1rem;
}
.dyr-dosya-girisi {
cursor: pointer;
}
/* Yönetim listesinde okuma/teyit oranının altındaki ince çubuk - sütun genişliği sabit kalsın. */
.dyr-oran-cubugu {
width: 72px;
}
/* Duyuru içeriği (temizlenmiş HTML) - Velzon blog overview okuma düzeni: görseller kaba sığar,
alıntı temanın custom-blockquote görünümünü alır. */
.dyr-icerik {
font-size: 0.9rem;
line-height: 1.7;
}
.dyr-icerik img {
max-width: 100%;
height: auto;
border-radius: var(--vz-border-radius);
}
.dyr-icerik > :last-child {
margin-bottom: 0;
}
.dyr-icerik blockquote {
padding: 0.75rem 1rem;
border-left: 3px solid var(--vz-primary);
background-color: var(--vz-light);
border-radius: var(--vz-border-radius);
}
/* ───────── YAZDIRMA (2026-10-15) - Terminaller ve Yazıcılar / Yazdırma Kuyruğu ─────────
Terminal listesi: Velzon Chat kişi listesi dili (avatar + durum noktası). Seçili satır Bootstrap'in dolu
`active` zemini yerine sol şerit + hafif primary ton alır - dolu zeminde durum rozetleri ve nokta okunmuyordu.
Renkler tema değişkenlerinden; koyu temada da doğru. */
.yzd-terminal {
border-left: 3px solid transparent;
transition: background-color .15s ease, border-color .15s ease;
}
.yzd-terminal.yzd-terminal-secili {
background-color: rgba(var(--vz-primary-rgb), .08);
border-left-color: var(--vz-primary);
}
/* Önizleme: fiş kâğıdı gibi içeriği kadar geniş ve ortalı; satırlar KIRILMAZ (sütun hizası yazıcıdaki gibi). */
.yzd-onizleme {
width: fit-content;
max-width: 100%;
white-space: pre;
overflow-x: auto;
}
/* ───────── min-w-0 (2026-10-15) ─────────
Bootstrap 5.3'te YOK ama ortak IkKpiKarti ve birkaç İK kartı kullanıyor: flex çocuğunun min-width'i varsayılan
auto olduğu için içindeki text-truncate KESMİYOR, uzun başlık kutuyu taşırıyordu. Sınıf burada tanımlanınca bileşen
değişmeden düzelir. */
.min-w-0 {
min-width: 0 !important;
}
/* ───────── İNŞAAT (INS-1, 2026-10-16) - proje kartı, kapak, durum çizelgesi ─────────
Kart dili Gayrimenkul ile ORTAK (`gym-kart`, `gym-kart-kapak`, `gym-kapak-*`, `gym-kart-rozet`, `aday-zaman-cizelgesi`);
burada yalnız inşaata özgü parçalar. Renkler tema değişkenlerinden, koyu temada da doğru. Dış görsel YOK: kapak ya
kullanıcının yüklediği dosyadır (yetki denetimli uç) ya da tema degradesi. */
/* Kapak görseli varsa kutuyu tam kaplar; rozetler üstünde kalsın diye görsel arkada. */
.ins-kart-kapak {
overflow: hidden;
}
/* Askıda / İptal Edildi durumlarının kapağı (InsaatGorunumu.KapakSinifi "danger" üretir; gym-kapak-* ailesinde yoktu -
kutuda primary'e düşüyor, proje kartının başlık bandında ise HİÇ zemin basılmıyordu). */
.gym-kapak-danger { background: linear-gradient(135deg, rgba(var(--vz-danger-rgb), 1) 0%, rgba(var(--vz-danger-rgb), .7) 100%); }
.ins-kart-kapak.ins-kapak-gorselli {
background: var(--vz-light);
}
.ins-kapak-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ins-kart-kapak .gym-kart-rozet,
.ins-kart-ornek {
z-index: 1;
}
.ins-kart-ornek {
position: absolute;
top: .6rem;
left: .6rem;
font-size: .75rem;
}
/* Proje kartı (INS.003) başlık bandı: görsel ya da degrade + büyük baş harf avatarı. */
.ins-baslik-bant {
position: relative;
height: 150px;
overflow: hidden;
border-radius: var(--vz-card-border-radius, .25rem) var(--vz-card-border-radius, .25rem) 0 0;
}
.ins-baslik-bant .ins-kapak-img {
filter: saturate(1.05);
}
.ins-baslik-bant::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%);
pointer-events: none;
}
.ins-baslik-avatar {
margin-top: -48px;
position: relative;
z-index: 2;
}
.ins-baslik-avatar .avatar-title {
border: 4px solid var(--vz-card-bg);
font-size: 1.75rem;
font-weight: 700;
}
/* Durum çizelgesi: ana akış basamakları yatay; tamamlanan success, mevcut primary halkalı, bekleyen soluk.
Dar ekranda yatay kayar (basamaklar ezilmesin). */
.ins-durum-adimlari {
display: flex;
gap: 0;
overflow-x: auto;
padding-bottom: .25rem;
}
.ins-adim {
flex: 1 0 96px;
position: relative;
text-align: center;
}
.ins-adim::before {
content: "";
position: absolute;
top: 15px;
left: -50%;
width: 100%;
height: 2px;
background: var(--vz-border-color);
}
.ins-adim:first-child::before {
display: none;
}
.ins-adim.tamam::before,
.ins-adim.simdi::before {
background: var(--vz-success);
}
.ins-adim-nokta {
position: relative;
z-index: 1;
width: 32px;
height: 32px;
margin: 0 auto .35rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
background: var(--vz-light);
color: var(--vz-secondary-color);
border: 2px solid var(--vz-border-color);
}
.ins-adim.tamam .ins-adim-nokta {
background: var(--vz-success);
border-color: var(--vz-success);
color: #fff;
}
.ins-adim.simdi .ins-adim-nokta {
background: var(--vz-primary);
border-color: var(--vz-primary);
color: #fff;
box-shadow: 0 0 0 4px rgba(var(--vz-primary-rgb), .2);
}
.ins-adim .ins-adim-ad {
font-size: .75rem;
font-weight: 500;
color: var(--vz-secondary-color);
}
.ins-adim.simdi .ins-adim-ad {
color: var(--vz-body-color);
font-weight: 600;
}
/* Sihirbazın seçilebilir tür kutuları (radio kart). */
.ins-secim-kutusu {
cursor: pointer;
border: 1px solid var(--vz-border-color);
border-radius: var(--vz-border-radius);
padding: .75rem;
height: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ins-secim-kutusu:hover {
border-color: rgba(var(--vz-primary-rgb), .5);
}
.ins-secim-kutusu.secili {
border-color: var(--vz-primary);
box-shadow: 0 0 0 3px rgba(var(--vz-primary-rgb), .15);
}
/* Emsal / kapasite oranı çubuğu - aşım kırmızı. */
.ins-kapasite-cubugu {
height: 10px;
}
/* ═══════════ INS-11 (2026-10-17): ŞANTİYE GÜNLÜĞÜ (INS.017) - tablet düzeni ═══════════
Yükseklik BURADA YAZILMAZ: `hibritWidgets.ekranaOturt` gerçek konumu ölçüp `.santiye-kap`'a yazar (D10). CSS yalnız artan yerin
paylaşımını söyler: iki sütun da kendi içinde kayar. Yükseklik yazılmazsa (dar ekran / JS yok) kaplar içerikleri kadar uzar ve sayfa
normal kayar - kurallar zararsız kalır. Dokunma hedefleri en az 44px (tablet). */
.santiye-kap {
display: flex;
flex-wrap: wrap;
gap: 1rem;
min-height: 0;
}
.santiye-kap > .santiye-sol,
.santiye-kap > .santiye-sag {
min-height: 0;
max-height: 100%;
overflow-y: auto;
}
.santiye-kap > .santiye-sol { flex: 0 0 auto; width: 100%; }
.santiye-kap > .santiye-sag { flex: 1 1 0; min-width: 0; width: 100%; }
@media (min-width: 1200px) {
.santiye-kap { flex-wrap: nowrap; }
.santiye-kap > .santiye-sol { width: 360px; }
}
.santiye-takvim {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.santiye-takvim-baslik {
text-align: center;
font-size: 11px;
color: var(--vz-secondary-color);
padding-bottom: 2px;
}
.santiye-gun {
min-height: 52px;
border: 1px solid var(--vz-border-color);
border-radius: 6px;
background: var(--vz-card-bg);
padding: 3px 4px;
text-align: left;
font-size: 11px;
line-height: 1.2;
color: var(--vz-body-color);
}
.santiye-gun:disabled { opacity: .45; }
.santiye-gun .santiye-gun-no { font-weight: 600; font-size: 12px; }
.santiye-gun.secili { outline: 2px solid var(--vz-primary); outline-offset: -1px; }
.santiye-gun.bugun .santiye-gun-no { color: var(--vz-primary); }
.santiye-gun.kapali { background: var(--vz-success-bg-subtle); }
.santiye-gun.acik { background: var(--vz-warning-bg-subtle); }
.santiye-gun.durdu { background: var(--vz-danger-bg-subtle); }
.santiye-dokun { min-height: 44px; }
.santiye-foto {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
background: var(--vz-light);
}
.santiye-matris td, .santiye-matris th { padding: 2px 4px !important; font-size: 11px; text-align: center; white-space: nowrap; }
.santiye-matris td:first-child, .santiye-matris th:first-child { text-align: left; position: sticky; left: 0; background: var(--vz-card-bg); z-index: 1; }
.santiye-matris td.secili-gun, .santiye-matris th.secili-gun { background: var(--vz-primary-bg-subtle); }
/* İK F3 (2026-10-20) - izin takvimi: çakışma (birimde eşik aşıldı) gün başlığı ve sayaç satırı alt çizgisi kırmızı;
kısmi izin (yarım gün / saatlik) hücresi açık tonda. Renkler tema değişkenlerinden - koyu temada da okunur. */
.puantaj-matris .izt-cakisma {
box-shadow: inset 0 -3px 0 var(--vz-danger);
}
.puantaj-matris .izt-sayac {
font-size: 11px;
color: var(--vz-secondary-color);
}
.puantaj-matris .izt-sayac.izt-cakisma {
color: var(--vz-danger);
font-weight: 600;
}
.puantaj-matris .izt-onayli {
background-color: #ECE4FB;
color: #6F42C1;
font-weight: 600;
}
.puantaj-matris .izt-kismi {
background-color: #F5F0FD;
color: #6F42C1;
}
/* İK F6 (2026-10-20) - ORGANİZASYON ŞEMASI (PER.034): saf CSS ağaç (iç içe ul/li + ::before/::after bağlantı çizgileri), JS yok.
Kap yatayda kayar (geniş ağaç); çizgi ve kart renkleri tema değişkenlerinden - koyu temada da okunur. Birim türü kartın üst
kenar rengiyle ayrılır (grup / şube / birim / ekip). */
.org-sema-kap {
overflow: auto;
padding: 0.5rem 0 1rem;
}
.org-sema,
.org-sema ul {
display: flex;
justify-content: center;
position: relative;
margin: 0;
padding: 20px 0 0;
}
.org-sema {
padding-top: 0;
min-width: max-content;
}
.org-sema li {
list-style: none;
position: relative;
padding: 20px 6px 0;
text-align: center;
}
.org-sema > li {
padding-top: 0;
}
.org-sema li::before,
.org-sema li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
width: 50%;
height: 20px;
border-top: 2px solid var(--vz-border-color);
}
.org-sema li::after {
right: auto;
left: 50%;
border-left: 2px solid var(--vz-border-color);
}
.org-sema > li::before,
.org-sema > li::after,
.org-sema li:only-child::before,
.org-sema li:only-child::after {
display: none;
}
.org-sema ul > li:only-child {
padding-top: 20px;
}
.org-sema ul > li:only-child::after {
display: block;
border-top: 0;
width: 0;
}
.org-sema li:first-child::before,
.org-sema li:last-child::after {
border: 0 none;
}
.org-sema li:last-child::before {
border-right: 2px solid var(--vz-border-color);
border-radius: 0 6px 0 0;
}
.org-sema li:first-child::after {
border-radius: 6px 0 0 0;
}
.org-sema ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 20px;
border-left: 2px solid var(--vz-border-color);
}
.org-dugum {
display: inline-block;
width: 230px;
text-align: left;
vertical-align: top;
padding: 0.6rem 0.75rem;
background: var(--vz-card-bg);
border: 1px solid var(--vz-border-color);
border-top: 3px solid var(--vz-primary);
border-radius: 0.5rem;
box-shadow: var(--vz-box-shadow-sm, 0 1px 2px rgba(56, 65, 74, 0.15));
}
.org-dugum-grup { border-top-color: var(--vz-dark); }
.org-dugum-sube { border-top-color: var(--vz-info); }
.org-dugum-birim { border-top-color: var(--vz-primary); }
.org-dugum-ekip { border-top-color: var(--vz-success); }
.org-dugum-eslesti {
outline: 2px solid var(--vz-warning);
outline-offset: 2px;
}
.org-kisi-eslesti {
background: var(--vz-warning-bg-subtle);
border-radius: 0.25rem;
}
.org-bos-pozisyon {
padding: 0.2rem 0.4rem;
border: 1px dashed var(--vz-warning);
border-radius: 0.25rem;
color: var(--vz-warning-text-emphasis, var(--vz-warning));
}