/* ==========================================================================
components.css — kart, istatistik, buton, form, tablo, dropdown,
DataTables ve SweetAlert2 tema uyarlamaları
========================================================================== */
/* ================================ KART ================================== */
.x-card {
background: var(--x-surface);
border: 1px solid var(--x-border);
border-radius: var(--x-radius);
transition: background var(--x-tr), border-color var(--x-tr), box-shadow var(--x-tr);
}
.x-card:hover { box-shadow: var(--x-shadow-sm); }
.x-card--flush > .x-card-body { padding: 0; }
.x-card--full { height: 100%; }
.x-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--x-gap-3);
padding: 15px 18px 0;
}
.x-card-title { font-size: var(--x-fs-base); font-weight: 700; }
.x-card-sub { margin-top: 2px; font-size: var(--x-fs-sm); color: var(--x-text-2); }
.x-card-body { padding: 15px 18px 18px; }
/* ============================ İSTATİSTİK KARTI =========================== */
.x-stat { display: flex; flex-direction: column; gap: var(--x-gap-3); padding: 18px 20px; }
.x-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.x-stat-value { font-size: var(--x-fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.x-stat-label { margin-top: 3px; font-size: var(--x-fs-sm); font-weight: 500; color: var(--x-text-2); }
.x-stat-note { font-size: .67rem; color: var(--x-text-2); }
/* ikon kutusu — tonu .x-tone-* ile verilir */
.x-ico {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex-shrink: 0;
border-radius: var(--x-radius-sm);
font-size: var(--x-fs-lg);
}
.x-ico--sm { width: 30px; height: 30px; font-size: .74rem; border-radius: var(--x-radius-xs); }
.x-ico--md { width: 36px; height: 36px; font-size: .9rem; }
/* ---- delta rozeti ---- */
.x-delta {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 7px; border-radius: var(--x-radius-xs);
font-size: .68rem; font-weight: 600;
}
.x-delta--up { background: var(--x-success-soft); color: var(--x-success); }
.x-delta--down { background: var(--x-danger-soft); color: var(--x-danger); }
.x-delta--flat { background: var(--x-glow); color: var(--x-text-2); }
/* ---- ilerleme çubuğu ---- */
.x-progress { height: 4px; border-radius: var(--x-radius-pill); background: var(--x-bg-2); overflow: hidden; }
.x-progress-bar {
height: 100%; width: 0; border-radius: var(--x-radius-pill);
background: linear-gradient(90deg, var(--x-accent), var(--x-accent-2));
transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.x-progress-bar--success { background: linear-gradient(90deg, var(--x-success), var(--x-accent-2)); }
.x-progress-bar--info { background: linear-gradient(90deg, var(--x-info), var(--x-accent-2)); }
.x-progress-bar--warning { background: linear-gradient(90deg, var(--x-warning), var(--x-danger)); }
/* ---- grafik yer tutucu (grafik kütüphanesi izin listesinde değil) ---- */
.x-chart-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--x-gap-2); min-height: 200px;
background: var(--x-surface-2);
border: 1px dashed var(--x-border-2);
border-radius: var(--x-radius);
color: var(--x-text-3); font-size: var(--x-fs-md); text-align: center;
}
.x-chart-placeholder i { font-size: 1.8rem; opacity: .28; }
.x-chart-placeholder--lg { min-height: 230px; }
/* ---- CSS bar chart (kütüphanesiz, gerçek veriyle çalışır) ---- */
.x-bars { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: var(--x-gap-3); }
.x-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.x-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.x-bar {
width: 100%; height: 0;
border-radius: var(--x-radius-xs) var(--x-radius-xs) 0 0;
background: linear-gradient(180deg, var(--x-accent), var(--x-accent-soft));
transition: height .8s cubic-bezier(.4, 0, .2, 1), opacity var(--x-tr);
opacity: .85;
}
.x-bar-col:hover .x-bar { opacity: 1; }
.x-bar-label { font-size: var(--x-fs-xs); color: var(--x-text-3); white-space: nowrap; }
/* ---- bilgi çipleri ----
Ekran üstünde yer kaplamayan, yalnızca bilgi amaçlı küçük özet şeridi.
İstatistik kartlarının (.x-stat) hafif alternatifi. */
.x-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.x-chip {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 3px 10px 3px 8px;
background: var(--x-surface);
border: 1px solid var(--x-border);
/* Sol kenardaki ince renk şeridi — çipi düz kutu olmaktan çıkarır ve
vurgulu çipi (toplam) diğerlerinden bir bakışta ayırır. */
border-left: 3px solid var(--x-border-2);
border-radius: var(--x-radius-pill);
font-size: var(--x-fs-sm);
white-space: nowrap;
transition: border-color var(--x-tr), background var(--x-tr);
}
.x-chip:hover {
background: var(--x-surface-2);
border-color: var(--x-border-2);
border-left-color: var(--x-accent);
}
.x-chip-value {
font-weight: 700; color: var(--x-text);
font-size: var(--x-fs-md); font-variant-numeric: tabular-nums;
}
.x-chip-label { color: var(--x-text-2); }
/* Vurgulu çip — toplam gibi ana sayı için */
.x-chip--accent {
background: var(--x-accent-soft);
border-color: var(--x-border-2);
border-left-color: var(--x-accent);
}
.x-chip--accent .x-chip-value { color: var(--x-accent); }
.x-chip--accent .x-chip-label { color: var(--x-text); }
/* ---- oran listesi (pasta grafik yerine) ---- */
.x-ratio-list { display: flex; flex-direction: column; gap: 10px; font-size: .73rem; }
.x-ratio-row { display: flex; align-items: center; justify-content: space-between; gap: var(--x-gap-2); }
.x-ratio-key { display: flex; align-items: center; gap: 6px; }
.x-ratio-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.x-ratio-bar { flex: 1; height: 4px; margin: 0 var(--x-gap-3); border-radius: var(--x-radius-pill); background: var(--x-bg-2); overflow: hidden; }
.x-ratio-fill { display: block; height: 100%; width: 0; background: currentColor; transition: width .8s cubic-bezier(.4, 0, .2, 1); }
/* =============================== BUTONLAR =============================== */
.x-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 16px;
border: 1px solid transparent; border-radius: var(--x-radius-sm);
font-size: .77rem; font-weight: 600; letter-spacing: .03em;
cursor: pointer; white-space: nowrap;
transition: background var(--x-tr), border-color var(--x-tr), color var(--x-tr),
opacity var(--x-tr), transform var(--x-tr), box-shadow var(--x-tr);
}
.x-btn:disabled { opacity: .5; cursor: not-allowed; }
.x-btn--primary {
background: linear-gradient(135deg, var(--x-accent), var(--x-accent-2));
color: var(--x-on-color); box-shadow: 0 4px 14px var(--x-glow);
}
.x-btn--primary:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.x-btn--ghost {
background: none; border-color: var(--x-border);
color: var(--x-text-2); font-weight: 500;
padding: 7px 14px;
}
.x-btn--ghost:hover:not(:disabled) { background: var(--x-glow); border-color: var(--x-border-2); color: var(--x-text); }
.x-btn--danger { background: var(--x-danger); color: var(--x-on-color); }
.x-btn--danger:hover:not(:disabled) { opacity: .88; }
.x-btn--sm { padding: 4px 10px; font-size: var(--x-fs-sm); }
.x-btn--xs { padding: 3px 9px; font-size: .68rem; }
.x-btn--block { width: 100%; }
/* ikon butonu (topbar) */
.x-icon-btn {
position: relative; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
background: none; border: 1px solid var(--x-border); border-radius: var(--x-radius-sm);
color: var(--x-text-2); font-size: .82rem; cursor: pointer;
transition: background var(--x-tr), border-color var(--x-tr), color var(--x-tr);
}
.x-icon-btn:hover { background: var(--x-glow); border-color: var(--x-border-2); color: var(--x-accent); }
/* Kapalı düğme: görünür kalır (ipucu metni "neden" diye cevap verir) ama
tıklanmaz ve vurgu almaz. */
.x-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.x-icon-btn:disabled:hover { background: none; border-color: var(--x-border); color: var(--x-text-2); }
.x-icon-btn--sm { width: 30px; height: 30px; font-size: .74rem; }
.x-icon-btn--xs { width: 26px; height: 26px; font-size: .7rem; border-radius: var(--x-radius-xs); }
/* Tablo satırındaki işlem butonu kümesi — hücreyi şişirmemesi için sıkı. */
.x-row-actions { display: inline-flex; align-items: center; gap: 4px; }
.x-row-actions .x-icon-btn[aria-expanded="true"] {
background: var(--x-glow); border-color: var(--x-accent); color: var(--x-accent);
}
/* ------------------------- Segmentli buton grubu -------------------------
Tablo satırındaki bitişik buton üçlüsü ([⚙▾] [Gönder] [İndir▾]).
Komşu kenarlıklar -1px ile üst üste bindirilir; aktif/vurgulu segment
z-index ile öne alınır ki kenarlığı kesilmesin. */
.x-btn-group { display: inline-flex; align-items: stretch; }
.x-btn-seg {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
height: 26px; padding: 0 9px;
margin-left: -1px;
background: var(--x-surface-2);
border: 1px solid var(--x-border); border-radius: 0;
color: var(--x-text-2);
font-size: .66rem; font-weight: 700; letter-spacing: .04em;
cursor: pointer; white-space: nowrap;
transition: background var(--x-tr), border-color var(--x-tr), color var(--x-tr);
}
.x-btn-group > .x-btn-seg:first-child {
margin-left: 0; border-radius: var(--x-radius-xs) 0 0 var(--x-radius-xs);
}
.x-btn-group > .x-btn-seg:last-child {
border-radius: 0 var(--x-radius-xs) var(--x-radius-xs) 0;
}
.x-btn-seg:hover {
z-index: 2;
background: var(--x-glow); border-color: var(--x-border-2); color: var(--x-text);
}
.x-btn-seg[aria-expanded="true"] {
z-index: 2;
background: var(--x-glow); border-color: var(--x-accent); color: var(--x-accent);
}
.x-seg-caret { font-size: .6rem; opacity: .7; }
/* "Gönder" segmenti — iki durumun genişliği aynı kalsın diye sabit taban. */
.x-btn-seg--gonder { min-width: 108px; }
/* gittiMi = 1 → belge gönderilmiş. Listede tek bakışta ayrılsın. */
.x-btn-seg--gonder.is-gitti {
z-index: 1;
background: var(--x-success-soft);
border-color: var(--x-success);
color: var(--x-success);
}
.x-btn-seg--gonder.is-gitti:hover {
z-index: 2;
background: var(--x-success); border-color: var(--x-success); color: var(--x-on-color);
}
/* Gönderim sürerken buton kilitli — çift tıklamayla iki mail gitmesin. */
.x-btn-seg:disabled { opacity: .55; cursor: progress; }
.x-btn-seg.is-busy > i { animation: x-seg-spin .9s linear infinite; }
@keyframes x-seg-spin { to { transform: rotate(360deg); } }
/* Ghost butonun yıkıcı (silme) varyantı */
.x-btn--danger-ghost { color: var(--x-danger); }
.x-btn--danger-ghost:hover:not(:disabled) {
background: var(--x-danger-soft);
border-color: var(--x-danger-soft);
color: var(--x-danger);
}
.x-badge-dot {
position: absolute; top: -3px; right: -3px;
display: flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%;
background: var(--x-danger); color: var(--x-on-color);
font-size: .52rem; font-weight: 700;
border: 2px solid var(--x-bg);
}
/* tema butonu */
.x-theme-btn {
position: relative; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: none; border: 1px solid var(--x-border); border-radius: var(--x-radius-sm);
cursor: pointer;
transition: background var(--x-tr), border-color var(--x-tr), transform var(--x-tr);
}
.x-theme-btn:hover { background: var(--x-glow); border-color: var(--x-border-2); transform: rotate(15deg); }
.x-theme-btn .x-t-sun,
.x-theme-btn .x-t-moon {
position: absolute;
transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.x-theme-btn .x-t-sun { font-size: 1rem; color: var(--x-warning); opacity: 1; transform: rotate(0) scale(1); }
.x-theme-btn .x-t-moon { font-size: .9rem; color: var(--x-accent); opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .x-theme-btn { border-color: var(--x-border-2); }
[data-theme="dark"] .x-theme-btn .x-t-sun { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="dark"] .x-theme-btn .x-t-moon { opacity: 1; transform: rotate(0) scale(1); }
/* kullanıcı çipi */
.x-user-chip {
flex-shrink: 0;
display: flex; align-items: center; gap: var(--x-gap-2);
padding: 4px 10px 4px 4px;
background: none; border: 1px solid var(--x-border); border-radius: var(--x-radius-pill);
color: var(--x-text); cursor: pointer;
transition: background var(--x-tr), border-color var(--x-tr);
}
.x-user-chip:hover { background: var(--x-glow); border-color: var(--x-border-2); }
.x-user-chip-name { font-size: .76rem; font-weight: 600; }
.x-user-chip-caret { font-size: .58rem; color: var(--x-text-2); }
.x-avatar-sm {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, var(--x-accent), var(--x-accent-2));
font-size: .62rem; font-weight: 700; color: var(--x-on-color);
}
/* =============================== DROPDOWN =============================== */
.x-dropdown-wrap { position: relative; }
.x-dropdown {
position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--x-z-dropdown);
display: none; min-width: 200px; overflow: hidden;
background: var(--x-surface);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-lg);
box-shadow: var(--x-shadow);
}
.x-dropdown.is-open { display: block; animation: x-drop-in .15s ease; }
.x-dropdown--wide { min-width: 300px; }
@keyframes x-drop-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.x-dropdown-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--x-gap-2);
padding: 12px 14px; border-bottom: 1px solid var(--x-border);
}
.x-dropdown-head strong { display: block; font-size: .8rem; }
.x-dropdown-head span { font-size: .68rem; color: var(--x-text-2); }
.x-dropdown-item {
display: flex; align-items: center; gap: 9px;
width: 100%; padding: 9px 14px;
background: none; border: none; text-align: left; text-decoration: none;
font-size: var(--x-fs-md); color: var(--x-text-2); cursor: pointer;
transition: background var(--x-tr), color var(--x-tr);
}
.x-dropdown-item > i:first-child { width: 13px; font-size: .77rem; }
.x-dropdown-item:hover { background: var(--x-surface-2); color: var(--x-text); }
.x-dropdown-item--danger { color: var(--x-danger); }
.x-dropdown-item--danger:hover { background: var(--x-danger-soft); color: var(--x-danger); }
.x-dropdown-sep { height: 1px; margin: 3px 0; background: var(--x-border); }
/* ---------------------------- Satır menüsü -------------------------------
Tablo satırındaki işlem butonlarının açtığı menü. 'ye basılır ve
position:fixed olarak konumlandırılır; .x-table-wrap'in overflow'u
tarafından kırpılmaz. left/top değerlerini tables.js hesaplar. */
.x-row-menu {
position: fixed; left: 0; top: 0; z-index: var(--x-z-dropdown);
display: none; min-width: 190px; padding: 5px; overflow: hidden;
background: var(--x-surface);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius);
box-shadow: var(--x-shadow);
}
.x-row-menu.is-open { display: block; animation: x-drop-in .13s ease; }
.x-row-menu .x-dropdown-item {
padding: 7px 11px; border-radius: var(--x-radius-xs); font-size: var(--x-fs-sm);
}
.x-row-menu .x-dropdown-sep { margin: 4px 6px; }
/* bildirim satırı */
.x-notif {
display: flex; align-items: flex-start; gap: 10px;
width: 100%; padding: 10px 14px;
background: none; border: none; text-align: left; cursor: pointer;
transition: background var(--x-tr);
}
.x-notif:hover { background: var(--x-surface-2); }
.x-notif.is-unread { background: var(--x-glow); }
.x-notif-title { font-size: .77rem; font-weight: 500; color: var(--x-text); }
.x-notif-time { margin-top: 2px; font-size: .64rem; color: var(--x-text-2); }
/* ============================ DURUM ROZETLERİ =========================== */
.x-status {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: var(--x-radius-pill);
font-size: .67rem; font-weight: 600;
}
.x-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.x-status--success { background: var(--x-success-soft); color: var(--x-success); }
.x-status--info { background: var(--x-info-soft); color: var(--x-info); }
.x-status--warning { background: var(--x-warning-soft); color: var(--x-warning); }
.x-status--danger { background: var(--x-danger-soft); color: var(--x-danger); }
.x-status--muted { background: var(--x-glow); color: var(--x-text-2); }
/* ============================== AKTİVİTE ================================ */
.x-activity { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--x-border); }
.x-activity:last-child { border-bottom: none; }
.x-activity-title { font-size: var(--x-fs-md); font-weight: 500; }
.x-activity-time { margin-top: 2px; font-size: .65rem; color: var(--x-text-2); }
.x-activity-time i { margin-right: var(--x-gap-1); }
/* ============================ HIZLI İŞLEMLER ============================ */
.x-quick {
display: flex; flex-direction: column; align-items: center; gap: 7px;
width: 100%; padding: 14px 8px;
background: var(--x-surface-2);
border: 1px solid var(--x-border); border-radius: var(--x-radius);
text-align: center; cursor: pointer;
transition: border-color var(--x-tr), background var(--x-tr), transform var(--x-tr);
}
.x-quick:hover { border-color: var(--x-accent); background: var(--x-glow); transform: translateY(-2px); }
.x-quick-label { font-size: var(--x-fs-sm); font-weight: 600; color: var(--x-text-2); }
/* ============================== FORMLAR ================================= */
.x-field { margin-bottom: var(--x-gap-4); }
.x-label {
display: block; margin-bottom: 7px;
font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--x-text-2);
}
.x-label .x-required { color: var(--x-danger); margin-left: 2px; }
.x-input, .x-select, .x-textarea {
width: 100%;
padding: 10px 12px;
background: var(--x-surface-2);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
font-family: inherit; font-size: var(--x-fs-base); color: var(--x-text);
outline: none;
transition: border-color var(--x-tr), box-shadow var(--x-tr), background var(--x-tr);
}
.x-input::placeholder, .x-textarea::placeholder { color: var(--x-text-3); }
.x-input:focus, .x-select:focus, .x-textarea:focus {
border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-glow);
}
.x-input:disabled, .x-select:disabled, .x-textarea:disabled { opacity: .55; cursor: not-allowed; }
.x-textarea { min-height: 96px; resize: vertical; }
/* Modal içindeki kısa notlar için — modalın boyunu şişirmesin. */
.x-textarea--sm { min-height: 64px; }
/* HTML yazılan alanlar tek aralıklı olsun — etiketler hizalı görünsün. */
.x-textarea--kod {
font-family: var(--x-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
font-size: var(--x-fs-sm); line-height: 1.55;
}
/* ---------------------------- Mail önizlemesi ----------------------------
Şablonun örnek veriyle doldurulmuş hâli. İçerik kullanıcının kendi
HTML'idir; posta istemcisindeki gibi beyaz zemin üzerinde gösterilir ki
renkler gerçekte nasıl görünecekse öyle görünsün. */
.x-onizleme {
margin-top: var(--x-gap-3);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
overflow: hidden;
}
.x-onizleme-head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 12px;
background: var(--x-surface-2);
border-bottom: 1px solid var(--x-border);
font-size: var(--x-fs-sm); color: var(--x-text-2);
}
.x-onizleme-konu { font-weight: 700; color: var(--x-text); }
.x-onizleme-govde {
padding: 14px 16px; max-height: 340px; overflow: auto;
background: #ffffff; color: #202020;
}
.x-onizleme-govde img { max-width: 100%; height: auto; }
.x-select { appearance: none; padding-right: 32px; cursor: pointer; }
/* Araç çubuğunda satır içi kullanılan dar alan (tarih seçici vb.) */
.x-input--auto { width: auto; min-width: 160px; }
/* Küçük boy alan — filtre/araç çubukları için */
.x-input--sm {
padding: 6px 10px;
font-size: var(--x-fs-md);
border-radius: var(--x-radius-sm);
}
.x-input--sm.x-input--auto { min-width: 132px; }
/* Tarih aralığındaki iki alanı ayıran tire */
.x-range-sep {
color: var(--x-text-3);
font-size: var(--x-fs-md);
padding: 0 1px;
user-select: none;
}
.x-input-group { position: relative; }
.x-input-group .x-input { padding-left: 36px; }
.x-input-group-icon {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--x-text-3); font-size: .82rem; pointer-events: none;
transition: color var(--x-tr);
}
.x-input-group:focus-within .x-input-group-icon { color: var(--x-accent); }
.x-help { margin-top: 5px; font-size: var(--x-fs-sm); color: var(--x-text-2); }
/* Kalan karakter sayacı — alanın sağ altında, göz yormasın diye soluk. */
.x-help--counter {
text-align: right; color: var(--x-text-3);
font-variant-numeric: tabular-nums;
}
.x-error { margin-top: 5px; font-size: var(--x-fs-sm); color: var(--x-danger); }
.x-input.is-invalid { border-color: var(--x-danger); }
.x-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--x-danger-soft); }
/* onay kutusu / anahtar */
.x-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.x-check input { display: none; }
.x-check-box {
display: flex; align-items: center; justify-content: center;
width: 17px; height: 17px; flex-shrink: 0;
background: var(--x-surface-2);
border: 1px solid var(--x-border-2); border-radius: 4px;
transition: background var(--x-tr), border-color var(--x-tr), box-shadow var(--x-tr);
}
.x-check input:checked ~ .x-check-box {
background: var(--x-accent); border-color: var(--x-accent);
box-shadow: 0 0 12px var(--x-glow);
}
.x-check input:checked ~ .x-check-box::after {
content: ''; display: block;
width: 8px; height: 5px;
border-left: 2px solid var(--x-on-accent);
border-bottom: 2px solid var(--x-on-accent);
transform: rotate(-45deg) translateY(-1px);
}
.x-check-text { font-size: var(--x-fs-md); color: var(--x-text-2); }
.x-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.x-switch input { display: none; }
.x-switch-track {
position: relative; width: 38px; height: 21px; flex-shrink: 0;
background: var(--x-bg-2); border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-pill);
transition: background var(--x-tr), border-color var(--x-tr);
}
.x-switch-track::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 15px; height: 15px; border-radius: 50%;
background: var(--x-text-3);
transition: transform var(--x-tr), background var(--x-tr);
}
.x-switch input:checked ~ .x-switch-track { background: var(--x-accent); border-color: var(--x-accent); }
.x-switch input:checked ~ .x-switch-track::after { transform: translateX(17px); background: var(--x-on-color); }
/* ============================== TABLOLAR ================================ */
.x-table-wrap { overflow-x: auto; }
table.x-table {
width: 100%;
border-collapse: separate; border-spacing: 0;
font-size: .79rem;
}
table.x-table thead th {
padding: 10px 13px;
font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--x-text-2); text-align: left; white-space: nowrap;
border-bottom: 1px solid var(--x-border);
background: transparent;
}
table.x-table tbody tr { transition: background var(--x-tr); }
table.x-table tbody tr:hover { background: var(--x-surface-2); }
table.x-table tbody td {
padding: 11px 13px;
color: var(--x-text); vertical-align: middle; white-space: nowrap;
border-bottom: 1px solid var(--x-border);
}
table.x-table tbody tr:last-child td { border-bottom: none; }
table.x-table .x-td-actions { text-align: right; }
/* Uzun serbest metin kolonları (açıklama vb.) satır kırabilsin */
table.x-table td.x-td-wrap {
white-space: normal;
min-width: 180px;
max-width: 340px;
color: var(--x-text-2);
}
/* boş durum */
.x-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--x-gap-3); padding: 48px 16px; text-align: center;
color: var(--x-text-2);
}
.x-empty i { font-size: 2rem; opacity: .3; }
.x-empty-title { font-size: var(--x-fs-base); font-weight: 600; color: var(--x-text); }
.x-empty-text { font-size: var(--x-fs-md); }
/* ---------------------- DataTables 2 tema uyarlaması --------------------- */
.dt-container { font-size: .79rem; color: var(--x-text-2); }
.dt-container .dt-layout-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--x-gap-3);
padding: 12px 18px;
}
.dt-container .dt-layout-row:first-child { border-bottom: 1px solid var(--x-border); }
.dt-container .dt-layout-row:last-child { border-top: 1px solid var(--x-border); }
.dt-container .dt-layout-table { padding: 0; }
.dt-container .dt-length,
.dt-container .dt-search { display: flex; align-items: center; gap: var(--x-gap-2); margin: 0; }
.dt-container .dt-length label,
.dt-container .dt-search label { margin: 0; font-size: var(--x-fs-sm); color: var(--x-text-2); }
.dt-container select.dt-input,
.dt-container input.dt-input {
padding: 6px 10px;
background: var(--x-surface-2);
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
color: var(--x-text); font-size: .78rem; font-family: inherit;
outline: none;
transition: border-color var(--x-tr), box-shadow var(--x-tr);
}
.dt-container input.dt-input { min-width: 200px; }
.dt-container select.dt-input:focus,
.dt-container input.dt-input:focus { border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-glow); }
.dt-container .dt-info { font-size: var(--x-fs-sm); color: var(--x-text-2); padding: 0; }
/* ---- sıralanabilir başlıklar ve ok göstergesi ----
Oklar tables.js'in ürettiği içinde,
tamamen CSS ile çizilir (ikon kütüphanesine bağımlı değil). */
table.x-table thead th.dt-orderable-asc,
table.x-table thead th.dt-orderable-desc {
cursor: pointer;
position: relative;
padding-right: 20px;
user-select: none;
transition: color var(--x-tr);
}
table.x-table thead th.dt-orderable-asc:hover,
table.x-table thead th.dt-orderable-desc:hover { color: var(--x-text); }
table.x-table thead th span.dt-column-order {
position: absolute; right: 4px; top: 50%;
width: 10px; height: 14px; transform: translateY(-50%);
}
table.x-table thead th span.dt-column-order::before,
table.x-table thead th span.dt-column-order::after {
position: absolute; left: 0;
font-size: .5rem; line-height: 1;
color: var(--x-text-3); opacity: .45;
}
table.x-table thead th span.dt-column-order::before { content: '\25B2'; top: 0; }
table.x-table thead th span.dt-column-order::after { content: '\25BC'; bottom: 0; }
table.x-table thead th.dt-ordering-asc,
table.x-table thead th.dt-ordering-desc { color: var(--x-accent); }
table.x-table thead th.dt-ordering-asc span.dt-column-order::before,
table.x-table thead th.dt-ordering-desc span.dt-column-order::after {
color: var(--x-accent); opacity: 1;
}
/* sayfalama (Bootstrap 5 entegrasyonu) */
.dt-container .pagination { margin: 0; gap: 4px; }
.dt-container .page-link {
background: transparent;
border: 1px solid var(--x-border);
border-radius: var(--x-radius-xs) !important;
color: var(--x-text-2);
font-size: .75rem; padding: 5px 10px;
transition: background var(--x-tr), border-color var(--x-tr), color var(--x-tr);
}
.dt-container .page-link:hover { background: var(--x-glow); border-color: var(--x-border-2); color: var(--x-accent); }
.dt-container .page-item.active .page-link {
background: var(--x-accent); border-color: var(--x-accent); color: var(--x-on-accent);
}
.dt-container .page-item.disabled .page-link { opacity: .4; background: transparent; color: var(--x-text-3); }
.dt-container .page-link:focus { box-shadow: 0 0 0 3px var(--x-glow); }
.dt-container table.x-table tbody tr.selected td { background: var(--x-glow); }
.dt-empty { text-align: center !important; color: var(--x-text-2) !important; padding: 32px !important; }
/* ==========================================================================
SweetAlert2 tema uyarlaması
ÖNEMLİ AYRIM — modal ile toast farklı bileşenlerdir:
MODAL : popup -> .swal2-popup.x-swal (swal2-toast YOK)
Arka plan KARARIR, geniş gölge kullanır.
TOAST : popup -> .swal2-popup.x-swal.swal2-toast
body -> swal2-toast-shown (kapsayıcıda DEĞİL, body'de!)
Arka plan KARARMAZ, dar gölge kullanır, tıklamayı engellemez.
SweetAlert2, backdrop:false verilse bile kapsayıcıya "swal2-backdrop-show"
sınıfını eklemeye devam eder; bu yüzden karartma ayrımı kapsayıcıdan değil
BODY sınıfından yapılır.
========================================================================== */
/* ------------------------------ Ortak görünüm ---------------------------- */
.swal2-popup.x-swal {
background: var(--x-surface) !important;
color: var(--x-text) !important;
border: 1px solid var(--x-border-2) !important;
border-radius: var(--x-radius-lg) !important;
font-family: var(--x-font) !important;
}
.swal2-popup.x-swal .swal2-title { color: var(--x-text) !important; }
.swal2-popup.x-swal .swal2-html-container { color: var(--x-text-2) !important; }
/* --------------------------------- MODAL --------------------------------- */
.swal2-popup.x-swal:not(.swal2-toast) {
box-shadow: 0 20px 60px rgba(0, 0, 0, .40) !important;
}
.swal2-popup.x-swal:not(.swal2-toast) .swal2-title { font-size: 1.4rem !important; }
.swal2-popup.x-swal:not(.swal2-toast) .swal2-html-container { font-size: .9rem !important; }
/* Yalnızca modal arka planını karartır */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show {
background: var(--x-overlay) !important;
}
/* --------------------------------- TOAST --------------------------------- */
.swal2-popup.x-swal.swal2-toast {
padding: 12px 16px !important;
/* Modalın geniş gölgesi burada sayfaya yayılan bir siyahlık gibi görünüyordu */
box-shadow: 0 4px 16px rgba(0, 0, 0, .20) !important;
}
.swal2-popup.x-swal.swal2-toast .swal2-title { font-size: .85rem !important; margin: 0 !important; }
/* Toast kapsayıcısı hiçbir şeyi karartmaz, tıklamayı engellemez */
body.swal2-toast-shown .swal2-container {
background: transparent !important;
box-shadow: none !important;
pointer-events: none;
}
body.swal2-toast-shown .swal2-container .swal2-popup { pointer-events: auto; }
/* Belge modalı: yan boşluklar daraltılır, çerçeveye daha çok yer kalsın */
.swal2-popup.x-swal.x-swal-belge .swal2-html-container {
margin: .8em .8em .3em !important;
}
/* ------------------------------ Form alanları ----------------------------- */
.swal2-popup.x-swal .swal2-input,
.swal2-popup.x-swal .swal2-select,
.swal2-popup.x-swal .swal2-textarea {
background: var(--x-surface-2) !important;
border: 1px solid var(--x-border-2) !important;
border-radius: var(--x-radius-sm) !important;
color: var(--x-text) !important;
font-size: .84rem !important;
box-shadow: none !important;
}
.swal2-popup.x-swal .swal2-input:focus,
.swal2-popup.x-swal .swal2-select:focus,
.swal2-popup.x-swal .swal2-textarea:focus {
border-color: var(--x-accent) !important;
box-shadow: 0 0 0 3px var(--x-glow) !important;
}
.swal2-popup.x-swal .swal2-input-label { color: var(--x-text-2) !important; font-size: .72rem !important; }
.swal2-popup.x-swal .swal2-validation-message {
background: var(--x-danger-soft) !important;
color: var(--x-danger) !important;
border-radius: var(--x-radius-sm) !important;
}
/* -------------------------------- Butonlar -------------------------------- */
.swal2-popup.x-swal .swal2-styled {
border-radius: var(--x-radius-sm) !important;
font-size: .8rem !important; font-weight: 600 !important;
box-shadow: none !important;
}
.swal2-popup.x-swal .swal2-styled.swal2-confirm {
background: var(--x-accent) !important; color: var(--x-on-accent) !important;
}
/* Yıkıcı işlem onayı (silme) — inline stil çalışmaz, yukarıdaki !important ezer */
.swal2-popup.x-swal .swal2-styled.swal2-confirm.x-swal-danger {
background: var(--x-danger) !important; color: var(--x-on-color) !important;
}
.swal2-popup.x-swal .swal2-styled.swal2-deny {
background: var(--x-danger) !important; color: var(--x-on-color) !important;
}
.swal2-popup.x-swal .swal2-styled.swal2-cancel {
background: transparent !important;
border: 1px solid var(--x-border-2) !important;
color: var(--x-text-2) !important;
}
.swal2-popup.x-swal .swal2-timer-progress-bar { background: var(--x-accent) !important; }
/* Genişliği piksel/em olarak verilen modallar (cari formu 840px, belge
önizlemesi 58rem) dar ekranda ekranı taşıyordu: SweetAlert2 bu değeri
inline style olarak basıyor ve kendi max-width'i devreye girmiyor.
Buradaki sınır yalnızca DARALTIR, hiçbir modali genişletmez. */
.swal2-popup.x-swal { max-width: calc(100vw - 1.5rem); }
/* --------------------- Modal içindeki formlar (XK.notify.custom) ---------- */
.x-modal-form { text-align: left; }
.x-modal-form .x-field:last-of-type { margin-bottom: var(--x-gap-3); }
/* Tekrarlanabilir e-posta alanı listesi */
.x-mail-list { display: flex; flex-direction: column; gap: 6px; }
.x-mail-row { display: flex; align-items: center; gap: 6px; }
.x-mail-row .x-mail-input { flex: 1; min-width: 0; }
/* Kaydederken sunucu zaten normalize ediyor; bunlar yalnızca kullanıcı
yazarken sonucu görsün diye (görsel geri bildirim). */
.x-input--upper { text-transform: uppercase; }
.x-input--lower { text-transform: lowercase; }
/* Vergi no / TC no gibi rakam dizileri — basamaklar eşit genişlikte olsun */
.x-input--mono { font-family: var(--x-font-mono); letter-spacing: .02em; }
/* --------------- Modal içi künye şeridi (anahtar → değer) -----------------
"Hangi kayda dokunuyorum?" sorusunu modalın en üstünde cevaplar.
Alanlar YAN YANA durur, alt alta değil: dört bilgi tek şeride sığınca modal
kısalıyor ve asıl iş (form alanları) katlanmadan görünüyor. Dar ekranda
flex-wrap ile kendiliğinden alta sarar.
Ayraç çizgileri gap ile yapılır: kapsayıcının zemini çizgi rengi, hücreler
yüzey rengi — 1px boşluk çizgi gibi görünür, sarma durumunda yatay ayraç da
kendiliğinden oluşur (border ile bu iki durumu birden çözmek mümkün değil). */
.x-kv {
display: flex; flex-wrap: wrap; gap: 1px;
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
background: var(--x-border);
overflow: hidden;
}
.x-kv-cell {
flex: 1 1 110px; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
padding: 7px 12px;
background: var(--x-surface-2);
}
/* Firma adı gibi uzun değerler için iki kat pay */
.x-kv-cell--wide { flex: 2 1 180px; }
/* ---------------------------- DÜZ VARYANT (x-kv--duz) --------------------
Hücre zeminleri kartla AYNI: şerit tek parça beyaz görünür, aralarında
yalnızca saç teli çizgiler kalır. Renkli hücrelerle panel parça parça
duruyordu.
Yerleşim flex değil GRID: flex-wrap'te hücreler sarınca sütunlar
birbirini tutmuyor, ızgara ragged çıkıyordu. auto-fill + minmax hem
hizayı hem daralınca kırılmayı kendisi çözüyor. Dolgu da kısıldı —
panel açıkken ekstreyi az itsin. */
.x-kv--duz {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
/* Zemin ÇİZGİ RENGİ DEĞİL yüzey rengi: son satırda hücreyle dolmayan alan
çizgi renginde gri bir blok olarak görünüyordu. Çizgileri artık
hücrelerin kendisi çiziyor (aşağıdaki gölge), boş alan beyaz kalıyor. */
background: var(--x-surface);
}
/* box-shadow tam 1px'lik gap'i doldurur: komşu hücreler aynı boşluğa aynı
rengi basar, tek saç teli çizgi çıkar. Yerleşimi etkilemez ve dıştaki halka
kapsayıcının overflow:hidden'ı tarafından kırpılır. */
.x-kv--duz .x-kv-cell {
background: var(--x-surface);
padding: 6px 11px;
box-shadow: 0 0 0 1px var(--x-border);
}
/* Uzun değerler iki sütun kaplar (flex'teki "iki kat pay"ın grid karşılığı) */
.x-kv--duz .x-kv-cell--wide { grid-column: span 2; }
@media (max-width: 575.98px) {
/* Dar ekranda iki sütun zaten dar; geniş hücre de tek sütuna insin. */
.x-kv--duz { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.x-kv--duz .x-kv-cell--wide { grid-column: span 1; }
}
.x-kv-k {
font-size: var(--x-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--x-text-2); white-space: nowrap;
}
.x-kv-not,
.x-label-not {
margin-left: 5px;
font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none;
color: var(--x-text-3);
}
.x-kv-not::before, .x-label-not::before { content: '· '; }
.x-kv-v {
color: var(--x-text); font-size: var(--x-fs-md); font-weight: 600;
overflow-wrap: anywhere;
}
/* ==========================================================================
ARAMA KUTULU SEÇİCİ (XK.combo)
Panel MUTLAK KONUMLU DEĞİL: bileşen SweetAlert2 modalının içinde açılıyor
ve modalın .swal2-html-container'ı overflow:auto — mutlak panel kırpılırdı.
Panel akışta açılır, modal kendiliğinden uzar.
========================================================================== */
.x-combo { position: relative; }
.x-combo-trigger {
width: 100%;
display: flex; align-items: center; gap: var(--x-gap-2);
padding: 10px 12px;
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
color: var(--x-text);
font-family: inherit; font-size: var(--x-fs-base);
text-align: left; cursor: pointer;
transition: border-color var(--x-tr-fast), box-shadow var(--x-tr-fast), background var(--x-tr-fast);
}
.x-combo-trigger:hover { border-color: var(--x-accent); }
.x-combo-trigger:focus-visible,
.x-combo.is-open .x-combo-trigger {
outline: none;
border-color: var(--x-accent);
box-shadow: 0 0 0 3px var(--x-glow);
}
.x-combo.is-open .x-combo-trigger {
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.x-combo-trigger-ico { font-size: .8rem; color: var(--x-accent); flex-shrink: 0; }
.x-combo-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.x-combo-value--empty { color: var(--x-text-3); font-weight: 400; font-style: italic; }
.x-combo-caret {
font-size: .62rem; color: var(--x-text-2); flex-shrink: 0;
transition: transform var(--x-tr-fast);
}
.x-combo.is-open .x-combo-caret { transform: rotate(180deg); color: var(--x-accent); }
/* -------------------------------- Panel ---------------------------------- */
.x-combo-panel { display: none; }
.x-combo.is-open .x-combo-panel {
display: block;
border: 1px solid var(--x-accent);
border-top: none;
border-radius: 0 0 var(--x-radius-sm) var(--x-radius-sm);
background: var(--x-surface);
box-shadow: var(--x-shadow-sm);
animation: x-combo-in .14s ease;
}
@keyframes x-combo-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ------------------------------ Arama satırı ------------------------------ */
.x-combo-search {
position: relative;
display: flex; align-items: center;
border-bottom: 1px solid var(--x-border);
background: var(--x-surface-2);
}
.x-combo-search-ico {
position: absolute; left: 12px;
font-size: .74rem; color: var(--x-text-3); pointer-events: none;
}
.x-combo-input {
width: 100%;
padding: 9px 34px;
border: none; background: transparent;
color: var(--x-text); font-family: inherit; font-size: var(--x-fs-base);
}
.x-combo-input:focus { outline: none; }
.x-combo-input::placeholder { color: var(--x-text-3); }
.x-combo-clear {
position: absolute; right: 8px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border: none; border-radius: 50%;
background: transparent; color: var(--x-text-3);
font-size: .7rem; cursor: pointer;
}
.x-combo-clear:hover { background: var(--x-glow); color: var(--x-text); }
/* -------------------------------- Liste ----------------------------------- */
.x-combo-list { max-height: 250px; overflow-y: auto; padding: var(--x-gap-1); }
.x-combo-item {
width: 100%;
display: flex; align-items: center; gap: var(--x-gap-2);
padding: 8px 10px;
border: none; border-radius: var(--x-radius-xs);
background: transparent; color: var(--x-text-2);
font-family: inherit; font-size: var(--x-fs-md); text-align: left;
cursor: pointer;
transition: background var(--x-tr-fast), color var(--x-tr-fast);
}
.x-combo-item:hover,
.x-combo-item.is-active { background: var(--x-glow); color: var(--x-text); }
.x-combo-item.is-selected { color: var(--x-accent); font-weight: 600; }
.x-combo-item-ico { width: 14px; font-size: .74rem; opacity: .75; flex-shrink: 0; }
.x-combo-item-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Arama terimiyle eşleşen parça */
.x-combo-hit {
padding: 0 1px; border-radius: 3px;
background: var(--x-accent-soft); color: var(--x-accent);
font-weight: 700;
}
.x-combo-item-rozet {
flex-shrink: 0;
padding: 1px 7px; border-radius: var(--x-radius-pill);
background: var(--x-glow); color: var(--x-text-3);
font-size: var(--x-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
/* SEÇİLEMEZ ÖĞE
O bağlamda kullanılamayan seçenek (ör. başka cariye bağlı firma). Listeden
atılmıyor ki kullanıcı kaydı görüp sebebini okuyabilsin; ad soluk, rozet
ise sebebi taşıdığı için OKUNUR kalır — solduğunda tek bilgi kaynağı
kaybolurdu. İmleç de tıklanamayacağını söylesin. */
.x-combo-item--kapali {
cursor: not-allowed;
color: var(--x-text-3);
}
.x-combo-item--kapali:hover { background: transparent; color: var(--x-text-3); }
.x-combo-item--kapali .x-combo-item-ad { opacity: .6; }
.x-combo-item--kapali .x-combo-item-ico { opacity: .45; }
.x-combo-item--kapali .x-combo-item-rozet {
background: var(--x-warning-soft);
color: var(--x-warning);
text-transform: none; letter-spacing: 0;
max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* MUTLAK KONUMLU PANEL (x-combo--mutlak)
Sayfa üzerindeki araç çubuklarında kullanılır. Varsayılan akıştaki panel
çubuğu aşağı büyütüp yanındaki kontrolleri kaydırıyor; burada panel şeridin
ÜSTÜNE açılıyor ve düzen sabit kalıyor.
Modal içinde KULLANILMAZ — orada kırpılır (bkz. combo.js başındaki not). */
.x-combo--mutlak .x-combo-panel {
position: absolute;
top: calc(100% + 4px); left: 0; right: 0;
z-index: var(--x-z-dropdown);
}
/* Akıştaki panel tetikleyiciye YAPIŞIK olduğu için üst kenarı ve üst
köşeleri yok. Mutlak panel 4px boşlukla ayrı bir kutu olarak duruyor —
çerçevesi ve köşeleri geri veriliyor. Seçici burada .is-open ile
yazılıyor ki temel kuralla aynı özgüllükte olup sonra gelsin. */
.x-combo--mutlak.is-open .x-combo-panel {
border-top: 1px solid var(--x-accent);
border-radius: var(--x-radius-sm);
box-shadow: var(--x-shadow);
}
/* "Hesap bağlantısını kaldır" gibi nötr seçenek — listeden çizgiyle ayrılır */
.x-combo-item--bos {
margin-bottom: var(--x-gap-1);
border-bottom: 1px solid var(--x-border);
border-radius: 0;
color: var(--x-text-3); font-style: italic;
}
/* --------------------------- Durum ve dipnot ------------------------------ */
.x-combo-durum {
display: flex; align-items: center; justify-content: center; gap: var(--x-gap-2);
padding: 22px 12px;
color: var(--x-text-3); font-size: var(--x-fs-md);
}
.x-combo-spin { animation: x-combo-spin .9s linear infinite; }
@keyframes x-combo-spin { to { transform: rotate(360deg); } }
.x-combo-foot {
padding: 7px 12px;
border-top: 1px solid var(--x-border);
background: var(--x-surface-2);
color: var(--x-text-3); font-size: var(--x-fs-sm); text-align: center;
}
/* ==========================================================================
KAMERA AYARLARI
Üç bağlantı yöntemi (ISAPI / RTSP / SDK) kartları, form ve önizleme.
========================================================================== */
/* Yöntem durumu şeridi — hangi yöntemin bu sunucuda çalıştığını gösterir */
.x-yontemler {
display: grid; gap: var(--x-gap-3);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.x-yontem {
padding: 12px 14px;
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
}
.x-yontem--acik { border-color: var(--x-border-2); }
.x-yontem--kapali { opacity: .75; }
.x-yontem-bas {
display: flex; align-items: center; justify-content: space-between;
gap: var(--x-gap-2); margin-bottom: 6px;
}
.x-yontem-ad { font-weight: 700; font-size: var(--x-fs-sm); }
.x-yontem-not { margin: 0; font-size: var(--x-fs-xs); color: var(--x-text-2); line-height: 1.5; }
/* Kamera formu modal içinde uzun; alanlar sıkışmasın */
.x-kamera-form .x-field { margin-bottom: var(--x-gap-2); }
.x-kamera-alt {
display: flex; align-items: center; justify-content: space-between;
gap: var(--x-gap-3); margin-top: var(--x-gap-2);
}
/* Seçilen yöntem bu sunucuda çalışmıyorsa yardım metni uyarıya döner */
.x-help--uyari { color: var(--x-warning); }
/* Test / deneme sonucu */
.x-kamera-sonuc {
display: flex; align-items: flex-start; gap: 8px;
margin-top: var(--x-gap-3); padding: 10px 12px;
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
color: var(--x-text-2);
font-size: var(--x-fs-sm); text-align: left; line-height: 1.5;
}
.x-kamera-sonuc--ok { background: var(--x-success-soft); color: var(--x-success); }
.x-kamera-sonuc--hata { background: var(--x-danger-soft); color: var(--x-danger); }
/* Çekilen karenin önizlemesi — görüntü diske yazılmaz, data URI ile gelir */
.x-kamera-onizleme {
margin-top: var(--x-gap-2);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
overflow: hidden;
background: var(--x-bg-2);
}
.x-kamera-onizleme img {
display: block; width: 100%; height: auto; max-height: 380px;
object-fit: contain;
}
/* ==========================================================================
WEB KANTAR
Canlı ağırlık göstergesi, VGM kutusu, arama açılır listeleri, kamera kutuları.
========================================================================== */
/* ---- Canlı ağırlık ---- */
.x-tarti {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 18px 12px;
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
transition: border-color var(--x-tr), background var(--x-tr);
}
.x-tarti--kararli { border-color: var(--x-success); background: var(--x-success-soft); }
.x-tarti-deger {
display: flex; align-items: baseline; gap: 8px;
font-size: var(--x-fs-2xl); font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--x-text);
}
.x-tarti--kararli .x-tarti-deger { color: var(--x-success); }
.x-tarti-birim { font-size: var(--x-fs-lg); font-weight: 600; color: var(--x-text-2); }
.x-tarti-not { font-size: var(--x-fs-xs); color: var(--x-text-2); }
.x-tarti-alma {
display: flex; flex-wrap: wrap; gap: var(--x-gap-2);
margin-top: var(--x-gap-3);
}
/* ---- VGM ---- */
.x-vgm {
display: flex; align-items: center; justify-content: space-between;
gap: var(--x-gap-3); margin-top: var(--x-gap-3);
padding: 12px 14px;
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
background: var(--x-accent-soft);
}
.x-vgm-etiket { font-size: var(--x-fs-sm); font-weight: 600; color: var(--x-text-2); }
.x-vgm-deger {
font-size: var(--x-fs-xl); font-weight: 800;
font-variant-numeric: tabular-nums; color: var(--x-accent);
}
.x-vgm--asim { background: var(--x-warning-soft); }
.x-vgm--asim .x-vgm-deger { color: var(--x-warning); }
.x-vgm--hata { background: var(--x-danger-soft); }
.x-vgm--hata .x-vgm-deger { color: var(--x-danger); }
.x-ayrac { margin: var(--x-gap-4) 0; border: 0; border-top: 1px solid var(--x-border); }
.x-help--ok { color: var(--x-success); }
.x-islem-butonlar { display: flex; flex-direction: column; gap: var(--x-gap-2); }
/* ---- Sunucu taraflı arama açılır listesi ---- */
.x-arama-alan { position: relative; }
.x-arama-panel {
position: absolute; left: 0; right: 0; top: 100%; z-index: var(--x-z-dropdown);
margin-top: 4px; max-height: 260px; overflow-y: auto;
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
background: var(--x-surface);
box-shadow: var(--x-shadow);
}
.x-arama-satir {
display: flex; flex-direction: column; gap: 2px;
width: 100%; padding: 8px 12px;
border: 0; background: transparent; text-align: left; cursor: pointer;
color: var(--x-text);
}
.x-arama-satir:hover,
.x-arama-satir.is-secili { background: var(--x-glow); }
.x-arama-ad { font-size: var(--x-fs-sm); font-weight: 600; }
.x-arama-alt { font-size: var(--x-fs-xs); color: var(--x-text-2); }
.x-arama-bos { padding: 10px 12px; font-size: var(--x-fs-sm); color: var(--x-text-2); }
/* ---- Kamera kutuları ---- */
.x-kam-cerceve {
position: relative; aspect-ratio: 16 / 9; overflow: hidden;
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
background: var(--x-bg-2);
}
.x-kam-cerceve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-kam-bos {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 12px; text-align: center;
font-size: var(--x-fs-xs); color: var(--x-text-3);
}
.x-kam-bos i { font-size: var(--x-fs-xl); }
.x-kam-bos--hata { color: var(--x-danger); }
/* ==========================================================================
FİŞ ARALIKLARI
========================================================================== */
/* Ekranın ne işe yaradığını anlatan bilgi şeridi */
.x-bilgi {
display: flex; align-items: flex-start; gap: 10px;
padding: 11px 13px;
border-radius: var(--x-radius-sm);
background: var(--x-info-soft);
color: var(--x-text-2);
font-size: var(--x-fs-sm); line-height: 1.55;
}
.x-bilgi > i { margin-top: 2px; color: var(--x-info); flex-shrink: 0; }
.x-bilgi strong { color: var(--x-text); }
.x-bilgi--uyari { background: var(--x-warning-soft); margin-top: var(--x-gap-3); }
.x-bilgi--uyari > i { color: var(--x-warning); }
/* Kullanım kolonu: ince çubuk + yüzde */
.x-kullanim { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.x-kullanim .x-progress { flex: 1; }
.x-kullanim-yuzde {
font-size: var(--x-fs-xs); font-weight: 600; color: var(--x-text-2);
font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}
/*
ALANA BİTİŞİK EK — eski uygulamadaki Bootstrap input-group'un karşılığı:
"Yeni" seçim kutusu, firma alanının SAĞ UCUNA yapışır ve ikisi tek bir
kontrol gibi görünür (ortak çerçeve, ortak odak halkası).
Etiketin yanına ya da sütunun sağına koymak denendi; ikisi de kutuyu
alandan kopardığı için bu yapıya dönüldü.
*/
.x-alan-ekli { display: flex; align-items: stretch; border-radius: var(--x-radius-sm); }
.x-alan-ekli .x-input {
flex: 1; min-width: 0;
border-top-right-radius: 0; border-bottom-right-radius: 0;
border-right-color: transparent;
}
/* Odak halkası alanın değil GRUBUN çevresine çizilir; yoksa halka ekin
altından geçer ve iki ayrı kontrol gibi görünür. */
.x-alan-ekli .x-input:focus { box-shadow: none; }
.x-alan-ekli:focus-within { box-shadow: 0 0 0 3px var(--x-glow); }
.x-alan-ek {
display: flex; align-items: center; flex-shrink: 0;
padding: 0 12px;
background: var(--x-surface-2);
border: 1px solid var(--x-border);
border-left: 0;
border-radius: 0 var(--x-radius-sm) var(--x-radius-sm) 0;
cursor: pointer; user-select: none;
transition: border-color var(--x-tr), background var(--x-tr);
}
/* Odakta alan ve ek birlikte vurgulanır — tek kontrol izlenimi bozulmasın */
.x-alan-ekli:focus-within .x-input,
.x-alan-ekli:focus-within .x-alan-ek { border-color: var(--x-accent); }
.x-alan-ek .x-check { gap: 7px; }
.x-alan-ek .x-check-box { width: 15px; height: 15px; border-radius: 3px; }
.x-alan-ek .x-check-text { font-size: var(--x-fs-sm); white-space: nowrap; }
/* Bilgi şeridinin başarı ve "adres girilmedi" varyantları */
.x-bilgi--ok { background: var(--x-success-soft); }
.x-bilgi--ok > i { color: var(--x-success); }
.x-bilgi + .x-bilgi { margin-top: var(--x-gap-2); }
.x-vurgu-yok { color: var(--x-text-3); font-weight: 400; }
/* Tartım fotoğrafı kutusu — çek / dosya seç / sürükle-bırak */
.x-foto-butonlar {
display: flex; flex-wrap: wrap; gap: var(--x-gap-2);
margin-top: var(--x-gap-2);
}
/* Çerçevenin kendisi de bir bırakma alanıdır; tıklanınca dosya seçici açılır */
.x-foto-birak { cursor: pointer; transition: border-color var(--x-tr), background var(--x-tr); }
.x-foto-birak:hover { border-color: var(--x-border-2); }
.x-foto-birak.is-surukleniyor {
border-color: var(--x-accent);
background: var(--x-accent-soft);
}
/* Sürükleme sırasında imleç görüntünün üstündeyken olay kaybolmasın */
.x-foto-birak.is-surukleniyor * { pointer-events: none; }
/* Kantar tanımı satırı — ad / numara / şehir-ilçe / aktif / sil */
.x-kantar-satir {
display: grid;
grid-template-columns: 1.1fr 0.8fr 1.4fr auto auto;
align-items: center; gap: 6px;
margin-bottom: 6px;
}
.x-kantar-satir .x-check { margin: 0 2px; }
/* ==========================================================================
Belge önizleme modalı — barkodlu DBA belgesi (PDF) ve kantar fişi (JPEG)
Belge, tarayıcının kendi görüntüleyicisinde bir iframe içinde açılır; ayrı
bir kütüphane yüklenmez. Yazdırma düğmesi çerçevenin print()'ini çağırır
(bkz. notify.js). Modalın başlığı yoktur: belge kendini anlatıyor.
========================================================================== */
.x-belge {
display: flex;
flex-direction: column;
gap: var(--x-gap-3);
text-align: left;
}
.x-belge-not {
margin: 0;
color: var(--x-text-2);
font-size: var(--x-fs-md);
}
.x-belge-arac {
display: flex;
flex-wrap: wrap;
gap: var(--x-gap-2);
align-items: center;
}
.x-belge-cerceve {
display: block;
width: 100%;
height: 68vh;
min-height: 300px;
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
}
/* Görüntü belgesi (kantar fişi) — çerçeveye oturur, taşmaz */
.x-belge-resim {
display: flex;
align-items: center;
justify-content: center;
max-height: 68vh;
overflow: auto;
padding: var(--x-gap-2);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
}
.x-belge-resim img {
display: block;
max-width: 100%;
max-height: 64vh;
object-fit: contain;
}
/*
Yazdırma çerçevesi. Ekran dışında durur ama GÖRÜNÜR sayılır: display:none
verilseydi tarayıcı içeriğini hiç render etmez, yazdırma boş çıkardı.
*/
.x-belge-yazdir {
position: fixed;
left: -10000px;
top: 0;
width: 794px; /* A4 genişliği, 96 dpi */
height: 1123px;
border: 0;
}
/* Küçük ekranda modalın kendisi zaten dar; çerçeve de kısalır */
@media (max-width: 991.98px) {
.x-belge-cerceve { height: 56vh; min-height: 240px; }
.x-belge-resim { max-height: 56vh; }
.x-belge-resim img { max-height: 52vh; }
}
/* ==========================================================================
Revize şeridi — Web Kantar revize kipinde açıldığında sayfanın başında
Amacı tek: bu ekranın YENİ tartım değil, var olan bir kaydın düzeltmesi
olduğunu bir bakışta göstermek. Yanlışlıkla ikinci kayıt açılmasın.
========================================================================== */
.x-revize {
display: flex;
align-items: center;
gap: var(--x-gap-3);
margin-bottom: var(--x-gap-3);
padding: var(--x-gap-3) var(--x-gap-4);
border: 1px solid var(--x-warning);
border-left-width: 4px;
border-radius: var(--x-radius);
background: var(--x-warning-soft);
color: var(--x-text);
}
.x-revize-ikon { color: var(--x-warning); font-size: var(--x-fs-lg); }
.x-revize-metin { flex: 1 1 auto; font-size: var(--x-fs-base); }
.x-revize-not {
display: block;
margin-top: 2px;
color: var(--x-text-2);
font-size: var(--x-fs-sm);
}
@media (max-width: 767.98px) {
.x-revize { flex-wrap: wrap; }
.x-revize-metin { flex-basis: 100%; }
}
/* ==========================================================================
CARİ EKRANI — liste hücreleri ve cari modalı
Modal uzun (kimlik / iletişim / firma-tarife / faturalama). Alanları tek
akışta dizmek okunmaz hâle getirdiği için form BÖLÜMLERE ayrıldı; her
bölümün başında ince bir başlık şeridi var.
========================================================================== */
/* ---------------------------- Liste hücreleri ---------------------------- */
/* Cari kolonu: üstte ünvan, altta kişi adı. Ünvansız kayıtta ad/soyad üste geçer. */
.x-cari-ad { display: flex; flex-direction: column; gap: 1px; }
.x-cari-ad-bas {
color: var(--x-text); font-weight: 600;
overflow-wrap: anywhere;
}
.x-cari-ad-alt { font-size: var(--x-fs-sm); color: var(--x-text-2); }
/* Bağlı firma — tarifeyi taşıyan kayıt olduğu ikonla belli olsun */
.x-cari-firma { display: inline-flex; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.x-cari-firma > i { color: var(--x-text-2); font-size: var(--x-fs-sm); }
/* Tarife kolonları (Aliağa / Liman) — sayılar alt alta hizalı okunsun.
tabular-nums olmadan "250" ile "300,50" farklı genişlikte basamak
kullanıyor ve kolon dalgalı görünüyor. */
table.x-table td.x-td-tutar {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Başlık da sağa yatsın. tables.js data-class'ı yalnızca | 'ye kopyalıyor;
| üzerindeki özniteliğin kendisinden yakalıyoruz — kolon sırasına
bağlı bir seçici yazmaya gerek kalmıyor. */
table.x-table th[data-class~="x-td-tutar"] { text-align: right; }
.x-tutar-deger { color: var(--x-text); font-weight: 600; }
/* Birim değerden bir tık geride dursun — göz önce sayıyı görsün */
.x-tutar-deger > em {
margin-left: 3px;
font-style: normal; font-weight: 400;
color: var(--x-text-2);
}
/* ------------------------------ Form bölümü ------------------------------ */
.x-form-bolum + .x-form-bolum { margin-top: var(--x-gap-5); }
.x-form-bolum-bas {
display: flex; align-items: center; gap: var(--x-gap-2);
margin-bottom: var(--x-gap-3); padding-bottom: 6px;
border-bottom: 1px solid var(--x-border);
font-size: var(--x-fs-xs); font-weight: 700;
letter-spacing: .09em; text-transform: uppercase;
color: var(--x-text-2);
}
.x-form-bolum-bas > i { color: var(--x-accent); font-size: var(--x-fs-sm); }
/* ------------------------- SIKIŞIK FORM (x-form--sikisik) -----------------
Cari formu 20'den fazla alan taşıyor. Normal ölçülerle modal ekranı aşıp
uzun uzun kaydırılıyordu; alan sayısını azaltmak da mümkün değil, hepsi
eski uygulamada var.
Çözüm alanları küçültmek: etiketler, dolgu ve boşluklar kısılır. Yazı
boyutu okunabilirlik sınırının altına indirilmez — küçülen şey BOŞLUK.
Değerler yine token'lardan gelir, sabit renk/ölçü yazılmaz.
Genel bir değiştirici olarak yazıldı; başka uzun formlar da kullanabilir. */
.x-form--sikisik .x-field { margin-bottom: 5px; }
.x-form--sikisik .x-label {
margin-bottom: 3px;
font-size: var(--x-fs-xs);
letter-spacing: .07em;
}
.x-form--sikisik .x-input,
.x-form--sikisik .x-select,
.x-form--sikisik .x-textarea {
padding: 5px 9px;
font-size: var(--x-fs-md);
}
/* Muhasebe adresleri kutusu: iki satır yeter, gerekirse kullanıcı büyütür. */
.x-form--sikisik .x-textarea { min-height: 44px; }
.x-form--sikisik .x-help { margin-top: 2px; font-size: var(--x-fs-xs); }
/* Boş kalan sütuna konan not, komşu alanların ALT kenarına hizalanır.
Etiket yüksekliğini piksel piksel taklit etmek yerine sütunun tamamını
kullanıp aşağı yaslıyoruz — etiket ölçüsü değişse de hiza bozulmaz.
(Bootstrap satırı flex olduğu için sütun zaten satır boyunca uzuyor.) */
.x-form--sikisik .x-help--hizali {
display: flex; align-items: flex-end;
height: 100%;
margin-top: 0; padding-bottom: 6px;
}
.x-form--sikisik .x-form-bolum-bas {
margin-bottom: 7px;
padding-bottom: 3px;
}
.x-form--sikisik .x-form-bolum + .x-form-bolum { margin-top: var(--x-gap-3); }
.x-form--sikisik .x-bilgi {
padding: 7px 10px;
font-size: var(--x-fs-xs);
line-height: 1.45;
}
/* Firma seçicisi de komşu alanlarla aynı yüksekliğe insin */
.x-form--sikisik .x-combo-trigger { padding: 5px 9px; font-size: var(--x-fs-md); }
/* Tarife uyarı şeridi üç durum arasında geçiş yapıyor (bilgi / uyarı / onay).
Üst boşluk varyanttan DEĞİL buradan gelsin; yoksa durum değişince şerit
birkaç piksel zıplıyor. */
.x-cari-form .x-bilgi { margin-top: var(--x-gap-2); }
/* --------------------------- Seçenek şeridi -------------------------------
Aktif / İstatistiklerde gösterme / Faturada Kon No. Üçü de anahtar
(x-switch) olsaydı üç satır ederdi; onay kutusu olarak tek şeride sığıyor.
Dar ekranda alta sarar. */
.x-secenekler {
display: flex; flex-wrap: wrap;
gap: var(--x-gap-2) var(--x-gap-5);
margin-top: var(--x-gap-3); padding-top: var(--x-gap-3);
border-top: 1px solid var(--x-border);
}
.x-secenekler .x-check-text { font-size: var(--x-fs-md); }
/* ------------------------------ Tutar alanı ------------------------------
Tarife bedeli: para birimi alanın SAĞ İÇİNE yapışır. Ayrı bir etiket ya da
ek kutu koymak üç tutarı yan yana sığdırırken satırı taşırıyordu.
Alan firma seçilmemişken disabled açılır (yazılacak Firmalar satırı yok);
o durumda birim de soluklaşsın ki kutunun kapalı olduğu belli olsun. */
.x-tutar { position: relative; }
.x-tutar .x-input {
padding-right: 26px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.x-tutar-birim {
position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
font-size: var(--x-fs-sm); color: var(--x-text-2);
pointer-events: none;
}
.x-tutar .x-input:disabled ~ .x-tutar-birim { opacity: .45; }
/* Sıkışık kipte üç bedel yan yana dar sütunlarda duruyor — simge sayıya
yaklaşsın, yazacak yer kalsın. */
.x-form--sikisik .x-tutar .x-input { padding-right: 21px; }
.x-form--sikisik .x-tutar-birim { right: 7px; }
/* .x-modal-form son alana fazladan boşluk veriyor; sıkışık kipte her satırın
son alanı bundan etkilenip hizayı bozuyordu. */
.x-form--sikisik .x-field:last-of-type { margin-bottom: 5px; }
@media (max-width: 575.98px) {
.x-form-bolum + .x-form-bolum { margin-top: var(--x-gap-4); }
/* Dar ekranda not, hizalanacak komşu kalmadığı için normal akışa döner. */
.x-form--sikisik .x-help--hizali { display: block; height: auto; padding-bottom: 0; }
}
/* ==========================================================================
CARİ DETAY SAYFASI — kart künyesi ve hesap ekstresi
========================================================================== */
/* Listedeki cari adı detay sayfasına bağlantıdır; bağlantı olduğu ancak
üstüne gelince belli olsun — tablo mavi bağlantılarla dolmasın. */
a.x-cari-ad-bas { color: var(--x-text); text-decoration: none; }
a.x-cari-ad-bas:hover { color: var(--x-accent); text-decoration: underline; }
/* ---------------------------- Detay başlık şeridi -------------------------
Yalnızca durum rozetleri tek satırda. Cari adı buradan kaldırıldı; sağdaki
arama kutusu zaten seçili cariyi gösteriyor, uzun ünvanlarda şerit taşıp
kutuyu alt satıra düşürüyordu. */
/* Rozet bloğu kendi genişliğinde kalır; artan yer sağdaki araç kümesine gider. */
.x-cari-bas {
display: flex; align-items: center; flex-wrap: wrap;
flex: 0 1 auto;
gap: var(--x-gap-2) var(--x-gap-3);
min-width: 0;
}
/* "Bilgiler" — künye panelini açan düğme */
.x-cari-bilgi-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 11px;
border: 1px solid var(--x-border-2); border-radius: var(--x-radius-pill);
background: transparent; color: var(--x-text-2);
font-family: inherit; font-size: var(--x-fs-sm); font-weight: 600;
cursor: pointer;
transition: color var(--x-tr), border-color var(--x-tr), background var(--x-tr);
}
.x-cari-bilgi-btn:hover { color: var(--x-accent); border-color: var(--x-accent); }
.x-cari-bilgi-btn[aria-expanded="true"] {
background: var(--x-accent-soft);
border-color: var(--x-accent);
color: var(--x-accent);
}
/* Ok, panel açıkken ters döner — düğmenin durumu bir bakışta belli olsun */
.x-cari-bilgi-ok { font-size: .6rem; transition: transform var(--x-tr); }
.x-cari-bilgi-btn[aria-expanded="true"] .x-cari-bilgi-ok { transform: rotate(180deg); }
/* ------------------------- Açılır künye paneli ----------------------------
display:none animasyon almadığı için grid-template-rows ile açılıyor:
0fr → 1fr geçişi içeriğin GERÇEK yüksekliğini canlandırır, sabit bir
max-height tahmin etmek gerekmez.
⚠ Bu sarmalayıcının TEK çocuğu olmalı (içteki .x-card). Kartın kendisi
grid yapılırsa başlık ve gövde iki satır oluyor; grid-template-rows: 0fr
yalnızca İLK satırı sıfırlıyor, gövde ayakta kalıp kapalı panel yer
kaplamaya devam ediyor. */
.x-cari-bilgi {
display: grid; grid-template-rows: 0fr;
margin-bottom: 0;
transition: grid-template-rows var(--x-tr), margin-bottom var(--x-tr);
}
.x-cari-bilgi > * { overflow: hidden; min-height: 0; }
.x-cari-bilgi.is-open {
grid-template-rows: 1fr;
margin-bottom: var(--x-gap-3);
}
/* Hareketi kapatanlar için: geçiş yok, ama açılıp kapanma çalışır. */
@media (prefers-reduced-motion: reduce) {
.x-cari-bilgi { transition: none; }
}
/* ---------------------- Detay sayfası araç kümesi -------------------------
Cari çubuğu + Düzelt + listeye dön. Çubuk esner, düğmeler kendi
genişliğinde kalır. Dar ekranda çubuk tam satıra iner.
align-items: stretch — düğmeler çubukla AYNI yükseklikte olsun; ikisi
farklı dolgulara sahip olduğu için ortalanınca boy farkı göze çarpıyordu. */
/* flex: 1 1 420px — araç kümesi başlıkta ARTAN YERİ ALIR. İçerik genişliğine
bırakılınca arama alanı düğmelerin arasında sıkışıp kalıyordu; şimdi ad
bloğundan sonra ne kalırsa çubuğa gidiyor. */
.x-cari-arac {
display: flex; align-items: stretch;
flex: 1 1 420px;
gap: var(--x-gap-2);
min-width: 0;
}
/* Çubuk artan yeri emer, düğmeler kendi genişliğinde kalır. */
.x-cari-arac .x-cari-cubuk {
flex: 1 1 auto; min-width: 240px;
margin-bottom: 0;
}
@media (max-width: 991.98px) {
/* Tablet ve altı: araç kümesi tam satıra iner, çubuk rahat genişler. */
.x-cari-arac { flex-wrap: wrap; width: 100%; }
.x-cari-arac .x-cari-cubuk { flex-basis: 100%; }
}
/* Yalnızca ikon taşıyan buton — kare dursun, dikey dolgu korunsun ki
yanındaki metin butonuyla aynı boyda kalsın. */
.x-btn--ikon { padding: 8px 0; width: 34px; justify-content: center; }
/* ============================== CARİ ÇUBUĞU ===============================
Sayfanın en üstünde: cari ara · dönem seç · GETİR.
Üç kontrol TEK BİR ÇERÇEVE içinde, aralarında 1px ayraçla duruyor — eski
uygulamadaki input-group görünümünün karşılığı. Ayrı ayrı kutular denendi,
şerit dağılıp üç bağımsız alan gibi okunuyordu.
align-items: stretch YOK: seçicinin paneli mutlak konumlu (x-combo--mutlak)
ama tetikleyici yine de yükseklik belirliyor; select ve buton ona uyuyor. */
.x-cari-cubuk {
display: flex; align-items: stretch;
margin-bottom: var(--x-gap-3);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
background: var(--x-surface-2);
overflow: visible; /* açılan panel kırpılmasın */
}
.x-cari-cubuk:focus-within { border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-glow); }
/* Seçici şeridin tamamını kaplar; dönem ve buton kendi genişliğinde kalır */
.x-cari-cubuk-secici { flex: 1; min-width: 0; position: relative; }
/* Çubuk içindeki seçici kendi çerçevesini bırakır — çerçeve şeridin kendisi */
.x-cari-cubuk-secici .x-combo-trigger {
border: none; background: transparent;
border-radius: var(--x-radius-sm) 0 0 var(--x-radius-sm);
padding: 8px 13px;
font-size: var(--x-fs-md); font-weight: 600;
letter-spacing: .01em;
}
.x-cari-cubuk-secici .x-combo-trigger:focus { box-shadow: none; }
/* GETİR — şeridin eylemi, vurgulu dursun */
.x-cari-cubuk-btn {
flex-shrink: 0;
display: flex; align-items: center; gap: 7px;
padding: 0 var(--x-gap-4);
border: none; border-left: 1px solid var(--x-border-2);
border-radius: 0 var(--x-radius-sm) var(--x-radius-sm) 0;
background: var(--x-accent); color: var(--x-on-accent);
font-family: inherit; font-size: var(--x-fs-md); font-weight: 700;
letter-spacing: .06em;
cursor: pointer; outline: none;
transition: background var(--x-tr);
}
.x-cari-cubuk-btn:hover { background: var(--x-accent-2); color: var(--x-on-color); }
@media (max-width: 575.98px) {
/* Dar ekranda şerit alt alta iner; buton tam genişlik olup rahat basılır. */
.x-cari-cubuk { flex-wrap: wrap; }
.x-cari-cubuk-secici { flex-basis: 100%; }
.x-cari-cubuk-btn {
flex: 1; border-left: none; border-top: 1px solid var(--x-border-2);
justify-content: center; padding: 10px 16px;
}
}
/* -------------------------------- Ekstre ----------------------------------
Ekstre YOĞUN bir tablo: bir cariye ait yüzlerce hareket var ve kullanıcı
bakiyenin seyrini takip ediyor. Satır dolgusu genel tablodan daha sıkı,
böylece bir ekranda iki kat fazla hareket görünüyor. */
table.x-table--ekstre tbody td { padding: 7px 13px; }
table.x-table--ekstre thead th { padding: 8px 13px; }
/* Açıklama sütunu tek satırda kalsın; taşarsa "…" ile kesilsin. Sarmak
satırı büyütüyor ve bakiye sütununu takip etmeyi zorlaştırıyor. */
table.x-table--ekstre td.x-td-wrap {
white-space: nowrap;
max-width: 420px;
overflow: hidden; text-overflow: ellipsis;
}
/* Tutar sütunları dar kalsın; asıl yer açıklamaya gitsin */
table.x-table--ekstre td.x-td-tutar,
table.x-table--ekstre th[data-class~="x-td-tutar"] { width: 120px; }
/* Açıklama + tip AYNI SATIRDA. Alt alta dizmek her satırı ikiye katlıyor,
90 hareketlik ekstre ekrana sığmıyordu. */
.x-ekstre-aciklama { display: inline; }
/* Ödeme tipi — eski veride açıklama çoğu zaman boş, satırı bu ayırt ediyor.
Açıklamadan sonra, soluk ve küçük: göz önce açıklamayı okuyor. */
.x-ekstre-tip {
margin-left: 7px;
color: var(--x-text-2);
font-size: var(--x-fs-xs); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
white-space: nowrap;
}
/* Devir satırı: gerçek bir hareket değil, hesaplanmış açılış */
.x-ekstre-devir-etiket {
font-family: var(--x-font-mono);
color: var(--x-info); font-weight: 700;
}
/* Vadesi geçmiş BORÇ kaydı. Satır bazlı bir uyarıdır — ödemelerin hangi borcu
kapattığı bu şemada tutulmadığı için "ödenmedi" anlamına GELMEZ. */
.x-ekstre-gecikme {
display: inline-block; margin-left: 6px;
padding: 1px 6px; border-radius: var(--x-radius-xs);
background: var(--x-warning-soft); color: var(--x-warning);
font-size: var(--x-fs-xs); font-weight: 700;
}
/* Bakiye: işaret renge taşınır, sütunda eksi işareti gezinmez */
.x-bakiye--borc { color: var(--x-danger); }
.x-bakiye--alacak { color: var(--x-success); }
/* ==========================================================================
CARİ HAREKETİ — ekstre araç kümesi ve yön seçici
========================================================================== */
/* --------------------------- EKSTRE ŞERİDİ --------------------------------
Solda tabloya etki eden denetimler (yeni hareket · dönem), ortada künye
metni, sağda "Bilgiler". Tabloyu değiştiren şeyler tablonun hemen üstünde
ve yan yana toplandı. */
/* justify-content GEREKLİ: .x-card-head "space-between" veriyor ve dönem
kutusu "Hareket Ekle"nin yanından kopup ortaya savruluyordu. Aradaki boşluğu
ortadaki künye (flex:1) üstlensin, iki denetim bitişik kalsın. */
.x-ekstre-bas {
display: flex; align-items: center; flex-wrap: wrap;
justify-content: flex-start;
gap: var(--x-gap-2);
}
/* Ortadaki başlık + künye artan yeri alır, iki ucu birbirinden ayırır.
Başlık ve özet YAN YANA: alt alta koymak şeridi iki satıra çıkarıyordu. */
.x-ekstre-bas-ozet {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
margin-left: var(--x-gap-2);
}
.x-ekstre-bas-ozet .x-card-sub { margin-top: 0; }
/* Dönem kutusu artık cari çubuğunun içinde değil, kendi başına duruyor —
bu yüzden kendi çerçevesi var. GETİR beklemez, seçilince uygulanır.
appearance:none şart: onsuz Windows yerel denetimi çiziyor ve tema renkleri
uygulanmıyordu (koyu temada beyaz kutu). Ok da yerel denetimle birlikte
gittiği için iki gradyanla yeniden çiziliyor — currentColor kullandığından
metin rengini, dolayısıyla temayı izliyor. */
.x-donem-secici {
flex-shrink: 0;
appearance: none;
padding: 5px 26px 5px 10px;
border: 1px solid var(--x-border-2); border-radius: var(--x-radius-sm);
background-color: var(--x-surface-2);
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 14px center, right 9px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
color: var(--x-text);
font-family: inherit; font-size: var(--x-fs-md); font-weight: 700;
font-variant-numeric: tabular-nums;
cursor: pointer; outline: none;
transition: border-color var(--x-tr), box-shadow var(--x-tr);
}
.x-donem-secici:hover { border-color: var(--x-accent); }
.x-donem-secici:focus { border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-glow); }
@media (max-width: 575.98px) {
/* Dar ekranda künye metni alta iner, iki denetim üstte yan yana kalır. */
.x-ekstre-bas-ozet { flex-basis: 100%; order: 3; }
}
/* ------------------------------ Yön seçici -------------------------------
BORÇ / ALACAK. Formun anlamını bu belirlediği için açılır kutu ya da onay
kutusu değil: iki iri düğme, seçili olan renkli. Yanlış yön seçmek bakiyeyi
ters çeviriyor; seçim bir bakışta okunmalı.
Renkler ekstredeki dille aynı: borç kırmızı, alacak yeşil. */
.x-yon { display: grid; grid-template-columns: 1fr 1fr; gap: var(--x-gap-2); }
.x-yon-btn {
display: flex; flex-direction: column; align-items: center; gap: 1px;
padding: 9px 10px;
border: 1px solid var(--x-border-2); border-radius: var(--x-radius-sm);
background: var(--x-surface-2); color: var(--x-text-2);
font-family: inherit;
cursor: pointer;
transition: border-color var(--x-tr), background var(--x-tr), color var(--x-tr);
}
.x-yon-btn > i { font-size: var(--x-fs-md); }
.x-yon-btn > span { font-size: var(--x-fs-base); font-weight: 700; letter-spacing: .02em; }
.x-yon-btn > em { font-style: normal; font-size: var(--x-fs-xs); color: var(--x-text-3); }
.x-yon-btn:hover { border-color: var(--x-text-2); color: var(--x-text); }
.x-yon-btn--borc.is-active {
background: var(--x-danger-soft); border-color: var(--x-danger); color: var(--x-danger);
}
.x-yon-btn--alacak.is-active {
background: var(--x-success-soft); border-color: var(--x-success); color: var(--x-success);
}
.x-yon-btn.is-active > em { color: inherit; opacity: .8; }
/* İşlem sütunu ekstrede dar kalsın; tutarlardan yer çalmasın */
table.x-table--ekstre td.x-td-actions { width: 78px; white-space: nowrap; }
/* ==========================================================================
SEKMELER (x-tabs)
Bir ekranın ilgisiz iki bölümünü alt alta dizmek yerine ayırır. Kart
başlığı gibi görünür: seçili sekme altında accent çizgi taşır, ötekiler
soluk kalır.
Davranış layout.js'te — her sayfada yüklü olduğu için ek script gerekmez.
Kullanım:
…
…
========================================================================== */
.x-tabs {
display: flex; align-items: stretch; flex-wrap: wrap;
gap: var(--x-gap-1);
margin-bottom: var(--x-gap-3);
border-bottom: 1px solid var(--x-border);
}
.x-tab {
position: relative;
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 16px;
margin-bottom: -1px; /* alt çizgi şeridin üstüne otursun */
background: none;
border: none; border-bottom: 2px solid transparent;
color: var(--x-text-2);
font-family: inherit; font-size: var(--x-fs-md); font-weight: 600;
white-space: nowrap; cursor: pointer;
transition: color var(--x-tr), border-color var(--x-tr), background var(--x-tr);
}
.x-tab > i { font-size: var(--x-fs-sm); opacity: .85; }
.x-tab:hover { color: var(--x-text); }
.x-tab.is-active {
color: var(--x-accent);
border-bottom-color: var(--x-accent);
}
.x-tab.is-active > i { opacity: 1; }
/* Klavye ile gezinirken seçili sekme görünür olsun */
.x-tab:focus-visible {
outline: none;
background: var(--x-glow);
border-radius: var(--x-radius-xs) var(--x-radius-xs) 0 0;
}
/* Panel yalnızca seçiliyken görünür. display:none, çünkü gizli paneldeki
alanlar sekme değişmeden odak almamalı. */
.x-tab-panel { display: none; }
.x-tab-panel.is-active { display: block; }
/* ==========================================================================
FATURALAMA — fatura kesme ekranı (Faturalama/Index)
Ekranın tamamı TEK GÖRÜNÜMDE kalacak şekilde kurulur: kalem girerken
toplamın, toplama bakarken kalemlerin görünmesi gerekiyor. Bu yüzden
fatura bilgileri yan yana, özet sağda yapışık ve künye tek satır.
========================================================================== */
/* ------------------------------- Üst şerit -------------------------------
Üstte cari (uzun ünvanlar için tam genişlik), altında tarihler + GETİR. */
/* Sayfa başlığının yerinde duruyor (bkz. Faturalama/Index.cshtml): satırın
tamamını alır ama çok geniş ekranda sonsuza uzamaz. */
.x-fat-arac {
display: flex; flex-direction: column; gap: var(--x-gap-2);
flex: 1 1 100%;
min-width: min(560px, 100%);
max-width: 760px;
}
.x-fat-cari { margin-bottom: 0; }
.x-fat-arac-alt {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--x-gap-2);
}
/* Tarih alanlarının ne olduğu yazmazsa "iki tarih, bir tarih daha" görünüyor;
etiketler kutulara değil satır içine konuldu — şerit büyümesin. */
.x-fat-arac-etiket {
font-size: var(--x-fs-xs); font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--x-text-2);
white-space: nowrap;
}
/* -------------------------------- Uyarılar --------------------------------
Faturayı yanlış kesmeye yol açabilecek her şey (tarifesiz kantar, firma
bağı yok, seri tanımsız) tablodan ÖNCE görünür — ama İNCE. İlk sürümde
iri bir kutuydu ve ekranın üçte birini yiyordu. */
.x-fat-uyari {
display: flex; flex-direction: column; gap: 3px;
margin-bottom: var(--x-gap-3);
padding: 8px 12px;
background: var(--x-warning-soft);
border-left: 3px solid var(--x-warning);
border-radius: var(--x-radius-xs);
}
.x-fat-uyari-satir {
display: flex; align-items: baseline; gap: 7px;
font-size: var(--x-fs-sm); color: var(--x-text);
}
.x-fat-uyari-satir > i { color: var(--x-warning); font-size: var(--x-fs-xs); }
/* ------------------------------- Boş durum ------------------------------- */
.x-fat-bos {
display: flex; align-items: center; gap: var(--x-gap-3);
font-size: var(--x-fs-md); color: var(--x-text-2);
}
.x-fat-bos > i { font-size: 1.4rem; color: var(--x-text-3); }
.x-fat-bos strong { color: var(--x-text); margin-right: 4px; }
/* -------------------------------- Künye ----------------------------------
Faturanın kime kesildiği TEK SATIRDA. Boş alanlar hiç basılmaz: "—" ile
dolu hücreler kartı bilgi taşımadan büyütüyordu. */
.x-fat-kunye {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--x-gap-3);
padding: 12px 18px;
}
.x-fat-kunye-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-fat-kunye-ad > strong {
font-size: var(--x-fs-base); font-weight: 700; color: var(--x-text);
line-height: 1.35;
}
.x-fat-kunye-adres { font-size: var(--x-fs-sm); color: var(--x-text-2); }
.x-fat-kunye-adres:empty { display: none; }
.x-fat-kunye-etiketler {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--x-gap-4);
}
/* Künye etiketi: üstte ne olduğu, altında değeri. Rozet değil — değerler
uzun olabiliyor (vergi dairesi, firma adı) ve rozet biçimi onları kesiyordu. */
.x-fat-et {
display: flex; flex-direction: column; gap: 1px;
padding-left: var(--x-gap-4);
border-left: 1px solid var(--x-border);
}
.x-fat-et-k {
font-size: var(--x-fs-xs); font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--x-text-2);
}
.x-fat-et-v { font-size: var(--x-fs-md); font-weight: 600; color: var(--x-text); }
.x-fat-et--uyari .x-fat-et-v { color: var(--x-warning); }
/* ----------------------------- Kalem tablosu ------------------------------
Hücreler doğrudan düzenlenebilir; "Edit / Kayıt" döngüsü yok. Alan
çerçeveleri yalnızca üzerine gelince belirir — tablo, form değil tablo
gibi okunsun. */
table.x-table--kalem tbody td,
table.x-table--kalem tfoot td { padding: 4px 8px; vertical-align: middle; }
table.x-table--kalem thead th { padding: 8px; }
/* HER satır düzeltilebilir — gelen tartım kalemleri de, elle eklenenler de.
Alanlar bir ara çerçevesizdi ve düz metin gibi görünüyordu: "eklenen satır
artık değişmiyor" izlenimi veriyordu. Hafif çerçeveli ve kendi zemininde
olunca tıklanıp değiştirilebildiği bir bakışta belli oluyor. */
table.x-table--kalem .x-input,
table.x-table--kalem .x-select {
background: var(--x-surface-2);
border-color: var(--x-border);
}
table.x-table--kalem .x-input:hover,
table.x-table--kalem .x-select:hover { border-color: var(--x-border-2); }
table.x-table--kalem .x-input:focus,
table.x-table--kalem .x-select:focus {
border-color: var(--x-accent);
box-shadow: 0 0 0 3px var(--x-glow);
}
/* Sayısal alanlarda okunurluk: rakamlar sağa yaslı ve eşit genişlikte */
table.x-table--kalem input[type="number"] {
text-align: right;
font-variant-numeric: tabular-nums;
}
table.x-table--kalem td.x-td-miktar,
table.x-table--kalem th.x-td-miktar { width: 92px; }
table.x-table--kalem td.x-td-kdv,
table.x-table--kalem th.x-td-kdv { width: 78px; }
table.x-table--kalem td.x-td-birim,
table.x-table--kalem th.x-td-birim { width: 92px; }
table.x-table--kalem td.x-td-tutar,
table.x-table--kalem th.x-td-tutar { width: 124px; text-align: right; }
table.x-table--kalem td.x-td-tevkifat,
table.x-table--kalem th.x-td-tevkifat { width: 148px; }
table.x-table--kalem td.x-td-islem,
table.x-table--kalem th.x-td-islem { width: 42px; text-align: center; }
/* Tevkifat sütunu yalnızca fatura tipi TEVKIFAT iken görünür. Diğer
tiplerde alan anlamsız ve tabloyu daraltıyor; JS tabloya bu sınıfı
koyup kalemlerdeki türü de temizliyor (bkz. faturalama.js). */
table.x-table--kalem.x-fat-tevkifatsiz .x-td-tevkifat { display: none; }
.x-fat-satir-tutar {
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Tarifesi firma kaydında bulunmayan kalem — 0 ₺ fark edilmeden geçmesin */
.x-fat-kalem-uyari { margin-left: 6px; color: var(--x-warning); }
/* ---- MAİL KUYRUĞU ----
Durum hücresinde rozetin altındaki küçük açıklama ("3. deneme",
"19:00'den sonra"); hata metni tek satıra kırpılır, tamamı ipucunda. */
.x-kuyruk-alt {
display: block; margin-top: 2px;
font-size: .64rem; color: var(--x-text-3);
}
.x-kuyruk-hata {
display: block; max-width: 380px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: .7rem; color: var(--x-danger); cursor: help;
}
/* ---- GİDEN FATURA LİSTESİ ----
Numara tek parça uzun bir dizi (ARM2026000000259); altına serisini yazmak
gözün numarayı taramasını kolaylaştırıyor. */
.x-fat-no { display: flex; flex-direction: column; gap: 1px; }
.x-fat-no-seri {
font-size: .62rem; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--x-text-3);
}
.x-fat-no-yok { font-size: .7rem; color: var(--x-text-3); font-style: italic; }
/* Döviz faturasında TL karşılığı: cari ekstresine bu tutar yazılıyor */
.x-fat-tutar-tl {
display: block; margin-top: 1px;
font-size: .66rem; color: var(--x-text-2);
font-variant-numeric: tabular-nums;
}
/* ---- TARTIM DÖKÜMÜ ----
Faturanın arkasındaki tartımlar. Kapalı açılır: satır sayısı yüzlerce
olabiliyor, ekranı varsayılan olarak doldurmasın. */
.x-fat-tartim-bas {
display: flex; align-items: center; gap: var(--x-gap-2);
width: 100%; padding: 10px var(--x-gap-3);
background: none; border: none; color: var(--x-text);
font-size: .78rem; font-weight: 600; text-align: left; cursor: pointer;
}
.x-fat-tartim-bas:hover { background: var(--x-surface-2); }
.x-fat-tartim-ok { font-size: .66rem; color: var(--x-text-2); transition: transform .15s ease; }
.x-fat-tartim-bas--acik .x-fat-tartim-ok { transform: rotate(90deg); }
.x-fat-tartim-sayi { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--x-text-2); }
/* Uzun listede başlık kaybolmasın, kart da sayfayı uzatmasın */
.x-fat-tartim-wrap { max-height: 420px; overflow: auto; }
/* Sayfalama şeridi — 200-300 satırlık listeyi ekrana sığdırır */
.x-fat-tartim-sayfa {
display: flex; align-items: center; gap: var(--x-gap-2);
padding: 9px var(--x-gap-3);
border-top: 1px solid var(--x-border);
}
.x-fat-tartim-sayfa-bilgi {
font-size: .7rem; color: var(--x-text-2); font-variant-numeric: tabular-nums;
min-width: 132px; text-align: center;
}
.x-fat-tartim-boyut {
display: flex; align-items: center; gap: 6px;
margin-left: auto; margin-bottom: 0;
font-size: .7rem; color: var(--x-text-2);
}
.x-fat-tartim-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--x-surface-2); }
table.x-table--tartim { font-size: .74rem; }
table.x-table--tartim td { white-space: nowrap; }
table.x-table--tartim td.x-td-sira,
table.x-table--tartim th.x-td-sira { width: 48px; text-align: right; color: var(--x-text-2); }
table.x-table--tartim td.x-td-durum,
table.x-table--tartim th.x-td-durum { width: 190px; }
/* Arama + süzgeç şeridi */
.x-fat-tartim-arac {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--x-gap-2);
padding: 0 var(--x-gap-3) 10px;
}
.x-fat-tartim-ara { position: relative; flex: 1 1 220px; min-width: 0; }
.x-fat-tartim-ara i {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
font-size: .68rem; color: var(--x-text-2); pointer-events: none;
}
.x-fat-tartim-ara .x-input { padding-left: 28px; }
/* Etkin süzgeç, açılır segmentle aynı vurguyu alır */
.x-btn-seg[aria-pressed="true"] {
z-index: 2;
background: var(--x-glow); border-color: var(--x-accent); color: var(--x-accent);
}
/* Seçim sütunu — tartım dökümünde ve giden fatura listesinde aynı ölçü */
table.x-table td.x-td-sec,
table.x-table th.x-td-sec { width: 38px; text-align: center; }
/* Tablo içindeki tek kutu: etiket metni yok, kutunun kendisi ortalanır */
.x-check--tek { display: inline-flex; gap: 0; vertical-align: middle; }
/* Seçili olmayan tartım: listede kalır ama bu faturaya girmez */
.x-fat-tartim-pasif > td { opacity: .45; }
/* Başka faturadan alınan tartım (iade sonrası yeniden kesim) — dikkat çeksin */
.x-fat-tartim-devir > td { background: var(--x-warning-soft); }
.x-fat-tartim-yeni { font-size: .67rem; color: var(--x-text-2); }
/* ---- KALICI GİRİŞ SATIRI ----
Eski ekranda tablonun altında hep duran satır buydu ve iyi çalışıyordu:
düğmeye basmadan yazmaya başlanıyor. Zeminle ayrışsın ki mevcut
kalemlerden ayırt edilsin. */
.x-fat-giris > td {
background: var(--x-surface-2);
border-top: 1px dashed var(--x-border-2);
}
/* Giriş satırı, kalem satırlarının TERSİ tonda: hücre zemini koyu, alan
açık. İkisi de çerçeveli olduğu için ayrımı bu ters kontrast taşıyor. */
.x-fat-giris .x-input,
.x-fat-giris .x-select { background: var(--x-surface); border-color: var(--x-border-2); }
.x-fat-giris .x-input::placeholder { color: var(--x-text-3); }
/* Yeni eklenen satır bir an vurgulanır: kullanıcı kalemin nereye düştüğünü
ve oradan düzeltilebileceğini görsün. */
@keyframes x-fat-yeni {
from { background-color: var(--x-accent-soft); }
to { background-color: transparent; }
}
.x-fat-yeni > td { animation: x-fat-yeni 1.1s ease-out; }
.x-fat-ekle { border-color: var(--x-accent); color: var(--x-accent); }
.x-fat-ekle:hover {
background: var(--x-accent); border-color: var(--x-accent); color: var(--x-on-accent);
}
/* ------------------- Başlığın alt satırı: fatura bilgileri -----------------
Senaryo · Fatura Tipi · Seri No · Para Birimi · Kur.
Bunlar da tıpkı VKN gibi faturanın BAŞLIK bilgisi; ayrı bir kartta "form"
olarak durduklarında ekran "kim" ve "nasıl" diye ikiye bölünüyor, sağdaki
özet de aşağı kaçıyordu. Künyeyle aynı dili konuşurlar: üstte küçük etiket,
altında değer. Kutular çerçevesiz durur; form alanı oldukları yalnızca
üzerine gelince ya da odaklanınca belli olur. */
.x-fat-serit {
display: grid;
grid-template-columns: 1.5fr 1fr .9fr .8fr 1fr;
gap: var(--x-gap-4);
padding: 11px 18px;
border-top: 1px solid var(--x-border);
}
/* Etiket ile değer aynı hizada başlasın: ikisi de denetimin iç dolgusu kadar
içeriden. (Dolguyu sıfırlamak, odak halkasını metne yapıştırıyordu.) */
.x-fat-et--alan .x-fat-et-k { padding-left: 7px; cursor: pointer; }
.x-fat-alan {
width: 100%;
padding: 3px 7px;
border: 1px solid transparent;
border-radius: var(--x-radius-xs);
background: transparent;
color: var(--x-text);
font-family: inherit; font-size: var(--x-fs-md); font-weight: 600;
outline: none;
transition: border-color var(--x-tr), background-color var(--x-tr), box-shadow var(--x-tr);
}
/* Yerel açılır kutu Windows'ta tema renklerini almıyor (koyu temada beyaz
kutu çiziyor); ok da onunla gittiği için iki gradyanla yeniden çizilir.
currentColor kullandığından metin rengini, dolayısıyla temayı izler. */
select.x-fat-alan {
appearance: none;
padding-right: 20px;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 9px center, right 5px center;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
cursor: pointer;
}
.x-fat-alan:hover { border-color: var(--x-border-2); background-color: var(--x-surface-2); }
.x-fat-alan:focus { border-color: var(--x-accent); background-color: var(--x-surface-2); box-shadow: 0 0 0 3px var(--x-glow); }
.x-fat-alan:disabled { color: var(--x-text-3); cursor: not-allowed; }
.x-fat-alan:disabled:hover { border-color: transparent; background-color: transparent; }
/* Kur sayısaldır ama şeritte metin gibi hizalanır — sütun dar ve sağa
yaslamak etiketinden koparıyor. */
.x-fat-alan--kur { font-variant-numeric: tabular-nums; }
/* Senaryo önerisinin gerekçesi ve seri sayacı — şeridin altında ince satır. */
.x-fat-serit-not {
display: flex; flex-wrap: wrap; gap: var(--x-gap-4);
padding: 0 18px 11px;
font-size: var(--x-fs-sm); color: var(--x-text-2);
}
.x-fat-serit-not > span:empty { display: none; }
/* Ayraç çizgisi satır BAŞINDAKİ alanda olmaz; sütun sayısı değiştikçe
hangisinin satır başı olduğu da değişiyor (aşağıdaki medya sorguları). */
.x-fat-serit > .x-fat-et:first-child { border-left: none; padding-left: 0; }
.x-fat-serit > .x-fat-et:first-child .x-fat-et-k { padding-left: 7px; }
@media (max-width: 1399.98px) {
.x-fat-serit { grid-template-columns: repeat(3, 1fr); row-gap: var(--x-gap-3); }
.x-fat-serit > .x-fat-et:nth-child(3n+1) { border-left: none; padding-left: 0; }
}
@media (max-width: 767.98px) {
.x-fat-serit { grid-template-columns: repeat(2, 1fr); }
.x-fat-serit > .x-fat-et { border-left: 1px solid var(--x-border); padding-left: var(--x-gap-4); }
.x-fat-serit > .x-fat-et:nth-child(2n+1) { border-left: none; padding-left: 0; }
}
@media (max-width: 479.98px) {
.x-fat-serit { grid-template-columns: 1fr; }
.x-fat-serit > .x-fat-et { border-left: none; padding-left: 0; }
}
/* ---------------------------------- Özet ----------------------------------
Kaydırırken yapışık kalır: kalem eklerken ödenecek tutar hep görünsün. */
.x-fat-ozet-kart {
position: sticky;
top: calc(var(--x-topbar-h) + var(--x-gap-3));
}
.x-fat-ozet { display: flex; flex-direction: column; }
.x-fat-ozet-satir {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--x-gap-3);
padding: 6px 0;
font-size: var(--x-fs-md); color: var(--x-text-2);
}
.x-fat-ozet-satir > strong {
color: var(--x-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Tevkifat faturadan DÜŞÜLÜR; işareti renkle de belli olsun. */
.x-fat-eksi { color: var(--x-warning); }
/* Ödenecek tutar ekranın en önemli sayısıdır — kendi zemini var. */
.x-fat-odenecek {
display: flex; flex-direction: column; gap: 2px;
margin-top: var(--x-gap-3);
padding: 11px 14px;
background: var(--x-accent-soft);
border: 1px solid var(--x-border-2);
border-radius: var(--x-radius-sm);
}
.x-fat-odenecek > span {
font-size: var(--x-fs-xs); font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--x-text-2);
}
.x-fat-odenecek > strong {
font-size: var(--x-fs-xl); font-weight: 800; letter-spacing: -.02em;
color: var(--x-accent);
font-variant-numeric: tabular-nums;
}
@media (max-width: 1199.98px) {
/* Tek kolona düşünce yapışkanlık anlamsız — özet zaten akışın içinde. */
.x-fat-ozet-kart { position: static; }
}
@media (max-width: 991.98px) {
/* Dar ekranda kalem tablosu yatay kaydırılır; alanlar okunmaz hâle
gelmesin diye tablo kendi asgari genişliğini korur. */
table.x-table--kalem { min-width: 780px; }
}
/* ==========================================================================
TASLAK FATURA DETAYI — modal içeriği
Modal, faturanın kâğıttaki sırasını izler: künye · kalemler · toplamlar ·
not. Tutarlar sağda ve dar bir sütunda toplanır; kalem tablosuyla aynı
hizada durunca "hangi rakam neyin toplamı" sorusu kalmıyor.
========================================================================== */
.x-taslak-detay { text-align: left; }
.x-taslak-detay .x-kv--duz { margin-bottom: var(--x-gap-3); }
.x-taslak-detay .x-fat-uyari { margin-bottom: var(--x-gap-3); }
/* Kalem tablosu modalda dar kalır; kenarlıkları karttaki gibi yumuşasın. */
.x-taslak-detay table.x-table {
border: 1px solid var(--x-border);
border-radius: var(--x-radius-sm);
overflow: hidden;
}
/* Toplamlar sağa yaslı ve dar: fatura ayağı gibi okunsun. */
.x-taslak-toplam {
display: flex; flex-direction: column;
margin-left: auto;
margin-top: var(--x-gap-3);
width: min(320px, 100%);
}
/* Fatura notu — serbest metin, uzun olabilir; kendi kutusunda. */
.x-taslak-not {
margin-top: var(--x-gap-4);
padding-top: var(--x-gap-3);
border-top: 1px solid var(--x-border);
}
.x-taslak-not > p {
margin: 4px 0 0;
font-size: var(--x-fs-md); color: var(--x-text);
white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Taslağın numarası yoktur; seri hücresinin altında bunu hatırlatan not.
Numara gönderim anında sayaçtan alınıyor (bkz. IFaturaService). */
.x-taslak-no-yok {
display: block;
font-size: var(--x-fs-xs); color: var(--x-text-3);
letter-spacing: .02em;
}
|