/* OnySoft ERP — components.css
   Bileşenler: btn, card, stat, table, badge, field, grid, split, tabs, filters,
   empty, pager, modal/ovl, palette, toast, pop, note, kv, bars, prog, iskelet,
   sütun seçici, toplu işlem çubuğu, adımlar, zaman çizelgesi, checklist,
   drop-zone, AI önerisi, kontrol listesi, tablo satır durumları.
   Prototipteki CSS temel alınmıştır; sınıf adları korunur. */

/* ---------- Buton ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-body);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}
.btn:hover{background:var(--bg-subtle);border-color:var(--border-strong);color:var(--text-primary)}
.btn:active{transform:scale(var(--press-scale))}
.btn svg{width:15px;height:15px;stroke-width:1.5;flex:0 0 15px}
.btn.primary{background:var(--text-primary);color:var(--bg-canvas);border-color:var(--text-primary)}
.btn.primary:hover{background:var(--text-secondary);border-color:var(--text-secondary);color:var(--bg-canvas)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
.btn.sm svg{width:14px;height:14px;flex-basis:14px}
.btn.icon{width:34px;padding:0}
.btn.icon.sm{width:28px}
.btn.danger{color:var(--danger-text);border-color:var(--border-default)}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger-text)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--bg-subtle)}
.btn.active{background:var(--bg-subtle);border-color:var(--border-strong)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn.yukleniyor{position:relative;color:transparent !important;pointer-events:none}
.btn.yukleniyor::after{content:"";position:absolute;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--text-primary);animation:donus .7s linear infinite}
.btn.primary.yukleniyor::after{color:var(--bg-canvas)}
@keyframes donus{to{transform:rotate(360deg)}}
.btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.btn-grup{display:inline-flex}
.btn-grup .btn{border-radius:0}
.btn-grup .btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.btn-grup .btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.btn-grup .btn+.btn{margin-left:-1px}

/* ---------- Kart ---------- */
.card{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden}
.card-head{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:var(--space-3)}
.card-body{padding:var(--space-5)}
.card-foot{padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-default);display:flex;align-items:center;gap:var(--space-2);font-size:12.5px;color:var(--text-tertiary)}
.card-head .grow{flex:1;min-width:0}
.card+.card,.card-yigin>*+*{margin-top:var(--space-5)}
.card-yigin{display:flex;flex-direction:column;gap:var(--space-5)}
.card-yigin>*+*{margin-top:0}

/* ---------- Stat ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.stat{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);padding:var(--space-4) var(--space-5)}
.stat .label{font-size:12px;color:var(--text-tertiary);font-weight:500}
.stat .value{font-family:var(--font-mono);font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.stat .delta{font-size:12px;margin-top:4px;color:var(--text-tertiary)}
.stat .delta.up{color:var(--success-text)}
.stat .delta.down{color:var(--danger-text)}

/* ---------- Tablo ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);padding:10px var(--space-4);border-bottom:1px solid var(--border-default);white-space:nowrap}
td{padding:11px var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:default}
tbody tr[data-rota],tbody tr.tiklanir{cursor:pointer}
tbody tr:hover td{background:var(--bg-subtle)}
tbody tr.secili td{background:var(--accent-subtle)}
tbody tr.kritik td{background:var(--danger-bg)}
tbody tr.kritik:hover td{background:var(--danger-bg)}
tbody tr.pasif td{color:var(--text-quaternary)}
td.strong{color:var(--text-primary);font-weight:500}
td.sessiz{color:var(--text-tertiary);font-size:12.5px}
th.num,td.num{text-align:right}
td.num.neg{color:var(--danger-text)}
th.sec,td.sec{width:36px;padding-right:0}
th.aksiyon,td.aksiyon{width:1%;white-space:nowrap;text-align:right}
td.aksiyon .btn{opacity:0;transition:opacity var(--transition-fast)}
tr:hover td.aksiyon .btn,td.aksiyon .btn:focus-visible{opacity:1}
@media (hover:none){td.aksiyon .btn{opacity:1}}
th.siralanabilir{cursor:pointer;user-select:none}
th.siralanabilir:hover{color:var(--text-primary)}
th.siralanabilir::after{content:"";display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;border-left:3.5px solid transparent;border-right:3.5px solid transparent;opacity:.35}
th.siralanabilir.asc::after{border-bottom:5px solid currentColor;opacity:1}
th.siralanabilir.desc::after{border-top:5px solid currentColor;opacity:1}
tfoot td,tr.toplam td{background:var(--bg-elevated);font-weight:600;color:var(--text-primary);border-top:1px solid var(--border-default);border-bottom:0}
tr.toplam:hover td{background:var(--bg-elevated)}
.tbl-wrap{overflow-x:auto}
.tbl-wrap .card{border:0;border-radius:0}
table input,table select{height:30px;font-size:13px}
table .hata-metin{font-size:11px}
td .alt{font-size:11px;color:var(--text-quaternary);margin-top:2px;font-family:var(--font-mono)}
input[type="checkbox"],input[type="radio"]{width:14px;height:14px;height:14px;padding:0;margin:0;accent-color:var(--text-primary);cursor:pointer;vertical-align:middle}
.sutun-gizli{display:none !important}

/* ---------- Rozet ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:var(--radius-full);font-size:11.5px;font-weight:500;border:1px solid var(--border-default);color:var(--text-secondary);background:var(--bg-canvas);white-space:nowrap;vertical-align:middle}
.badge svg{width:12px;height:12px}
.badge.ok{background:var(--success-bg);color:var(--success-text);border-color:transparent}
.badge.warn{background:var(--warning-bg);color:var(--warning-text);border-color:transparent}
.badge.err{background:var(--danger-bg);color:var(--danger-text);border-color:transparent}
.badge.sa{background:rgba(124,58,237,.12);color:var(--role-superadmin);border-color:transparent}
.badge.by{background:rgba(37,99,235,.12);color:var(--role-bayi);border-color:transparent}
.badge.ik{background:rgba(15,118,110,.12);color:var(--role-ik);border-color:transparent}
.badge.personel{background:rgba(82,82,82,.12);color:var(--role-personel);border-color:transparent}
.badge.inverse{background:var(--bg-inverse);color:var(--text-inverse);border-color:transparent}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Form alanları ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:500;color:var(--text-secondary)}
.field label .zorunlu{color:var(--danger-text);margin-left:2px}
.field .hint{font-size:11.5px;color:var(--text-quaternary)}
.field .hata-metin{font-size:11.5px;color:var(--danger-text)}
.field.hatali input,.field.hatali select,.field.hatali textarea{border-color:var(--danger)}
.field.tam{grid-column:1/-1}
.field-satir{display:flex;gap:6px;align-items:center}
.field-satir input,.field-satir select{flex:1;min-width:0}
input,select,textarea{font-family:var(--font-body);font-size:13.5px;height:34px;padding:0 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-canvas);color:var(--text-primary);width:100%;transition:border-color var(--transition-fast)}
textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.5;min-height:34px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--text-primary)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input::placeholder,textarea::placeholder{color:var(--text-quaternary)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:var(--bg-surface);color:var(--text-tertiary);cursor:not-allowed}
input[readonly]{cursor:default}
input.num,input.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
input.num{text-align:right}
input[type="date"],input[type="datetime-local"],input[type="time"]{font-family:var(--font-mono);font-size:13px}
select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;cursor:pointer}
select[multiple]{height:auto;padding:4px;background-image:none}
.kutu{display:flex;gap:8px;align-items:flex-start;font-size:13px;cursor:pointer;line-height:1.45;color:var(--text-secondary)}
.kutu input{margin-top:3px;flex:0 0 14px}
/* Aç/kapa anahtarı — genel input[type=checkbox] (14px) ve .kutu input kurallarını ezmek için yüksek öncelikli seçici */
input[type="checkbox"].anahtar,.kutu input[type="checkbox"].anahtar{position:relative;display:inline-block;box-sizing:border-box;width:34px;min-width:34px;height:20px;margin:0;padding:0;flex:0 0 34px;border:0;border-radius:var(--radius-full);background:var(--border-strong);appearance:none;-webkit-appearance:none;cursor:pointer;transition:background var(--transition-fast)}
input[type="checkbox"].anahtar::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bg-canvas);transition:transform var(--transition-fast)}
input[type="checkbox"].anahtar:checked{background:var(--text-primary)}
input[type="checkbox"].anahtar:checked::after{transform:translateX(14px)}
input[type="checkbox"].anahtar:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
input[type="checkbox"].anahtar:disabled{opacity:.5;cursor:not-allowed}
.kutu:has(> input.anahtar){align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.grid2+.grid2,.grid3+.grid3,.grid4+.grid4,.grid2+.grid4,.grid4+.grid2,.grid3+.grid4,.grid4+.grid3{margin-top:var(--space-4)}
.split{display:grid;grid-template-columns:1fr 320px;gap:var(--space-6);align-items:start}
.split.genis{grid-template-columns:1fr 380px}
.split.ters{grid-template-columns:320px 1fr}
.form-aksiyon{display:flex;gap:var(--space-2);justify-content:flex-end;align-items:center;margin-top:var(--space-5)}

/* Otomatik tamamlama */
.ot-wrap{position:relative;min-width:0}
.ot-liste{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;display:none;min-width:260px}
.ot-liste.on{display:block}
.ot-item{padding:8px 12px;font-size:13px;cursor:pointer;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border-subtle)}
.ot-item:last-child{border-bottom:0}
.ot-item:hover,.ot-item.aktif{background:var(--bg-subtle)}
.ot-item .mono{font-size:11.5px;color:var(--text-tertiary)}
.ot-item .sag{margin-left:auto}
.ot-bos{padding:10px 12px;font-size:12.5px;color:var(--text-quaternary)}

/* ---------- Sekmeler ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-default);margin-bottom:var(--space-5);overflow-x:auto}
.tab{padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--text-tertiary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0;font-family:var(--font-body);display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--text-primary);border-bottom-color:var(--text-primary);font-weight:600}
.tab .count{font-family:var(--font-mono);font-size:11px;color:var(--text-quaternary)}
.tab-icerik[hidden]{display:none}

/* ---------- Filtre satırı ---------- */
.filters{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-4)}
.filters input,.filters select{height:32px;width:auto;min-width:150px}
.srch{position:relative;flex:1;min-width:200px;max-width:320px}
.srch input{padding-left:32px;width:100%}
.srch svg{position:absolute;left:10px;top:8px;width:15px;height:15px;stroke-width:1.5;color:var(--text-quaternary);pointer-events:none}
.gorunumler{display:flex;gap:var(--space-1);flex-wrap:wrap;margin-bottom:var(--space-4)}
.gorunumler .btn.active{background:var(--text-primary);color:var(--bg-canvas);border-color:var(--text-primary)}
.filtre-panel{border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-surface);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4)}
.filtre-panel[hidden]{display:none}
.filtre-panel .filtre-alt{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-4)}
.filtre-rozet{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);background:var(--text-primary);color:var(--bg-canvas);font-family:var(--font-mono);font-size:10px}
.filtre-rozet:empty{display:none}

/* Sütun seçici (açılır menü) */
.sutun-secici{position:relative}
.sutun-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:220px;padding:var(--space-2);display:none;max-height:320px;overflow-y:auto}
.sutun-menu.on{display:block}
.sutun-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px;border-radius:var(--radius-xs);cursor:pointer;color:var(--text-secondary)}
.sutun-menu label:hover{background:var(--bg-subtle)}
.sutun-menu .ayrac{border-top:1px solid var(--border-subtle);margin:4px 0}

/* Toplu işlem çubuğu */
.toplu-bar{display:none;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-2) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-inverse);color:var(--text-inverse);margin-bottom:var(--space-3);font-size:13px;animation:fade .15s ease}
.toplu-bar.on{display:flex}
.toplu-bar .sayi{font-family:var(--font-mono);font-weight:600}
.toplu-bar .btn{background:transparent;color:var(--text-inverse);border-color:rgba(255,255,255,.25)}
.toplu-bar .btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:var(--text-inverse)}
[data-theme="dark"] .toplu-bar .btn{border-color:rgba(0,0,0,.25)}
[data-theme="dark"] .toplu-bar .btn:hover{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.5)}
.toplu-bar .btn.danger{color:#FCA5A5}
[data-theme="dark"] .toplu-bar .btn.danger{color:var(--danger-text)}
.toplu-bar .kapat{margin-left:auto}

/* ---------- Boş durum ---------- */
.empty{text-align:center;padding:var(--space-12) var(--space-6);color:var(--text-tertiary)}
.empty svg{width:28px;height:28px;stroke-width:1.5;margin-bottom:var(--space-3);color:var(--text-quaternary)}
.empty h3{margin-bottom:6px}
.empty p{font-size:13px;max-width:420px;margin:0 auto}
.empty .btn-row{justify-content:center;margin-top:var(--space-4)}
.empty.err svg{color:var(--danger)}
.empty.kucuk{padding:var(--space-6)}

/* ---------- Sayfalama ---------- */
.pager{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-default);font-size:12.5px;color:var(--text-tertiary)}
.pager .grow{flex:1}
.pager select{height:28px;width:auto;min-width:0;font-size:12.5px;padding-right:26px}
.pager .sayfa-no{font-family:var(--font-mono)}

/* ---------- Modal ---------- */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:60;padding:var(--space-6);animation:fade .15s ease}
.ovl.on{display:flex}
.modal{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-xl);width:100%;max-width:620px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:fade .15s ease}
.modal.genis{max-width:920px}
.modal-head{padding:var(--space-5);border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto}
.modal-head .grow{flex:1;min-width:0}
.modal-body{padding:var(--space-5);overflow-y:auto;flex:1 1 auto;min-height:0}
/* Form modalı: gövde + alt butonlar <form> içinde — form da esnek sütun olmalı, yoksa gövde kaydırılamaz ve uzun içerik kutudan taşar */
.modal>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.modal-body.sikisik{padding:0}
.modal-foot{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-default);display:flex;gap:var(--space-2);justify-content:flex-end;flex:0 0 auto;flex-wrap:wrap}
.modal-foot .sol{margin-right:auto}

/* ---------- Komut paleti ---------- */
.palette{align-items:flex-start;padding-top:12vh}
.pal{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-xl);width:100%;max-width:560px;box-shadow:var(--shadow-lg);overflow:hidden}
.pal input{height:48px;border:0;border-bottom:1px solid var(--border-default);border-radius:0;font-size:15px;padding:0 var(--space-5)}
.pal input:focus{border-color:var(--border-default)}
.pal-list{max-height:320px;overflow-y:auto;padding:var(--space-2)}
.pal-item{display:flex;align-items:center;gap:10px;padding:9px var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;color:var(--text-primary)}
.pal-item svg{width:15px;height:15px;color:var(--text-tertiary);flex:0 0 15px}
.pal-item:hover,.pal-item.aktif{background:var(--bg-subtle)}
.pal-item .k{margin-left:auto;font-size:11px;color:var(--text-quaternary)}
.pal-item .grup{font-size:11.5px;color:var(--text-quaternary);margin-left:4px}
.pal-baslik{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-quaternary);padding:8px var(--space-3) 4px}
.pal-foot{padding:var(--space-2) var(--space-4);border-top:1px solid var(--border-default);font-size:11.5px;color:var(--text-quaternary);display:flex;gap:var(--space-3)}

/* ---------- Toast ---------- */
.toasts{position:fixed;right:var(--space-6);bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);z-index:80;pointer-events:none}
.toast{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:11px var(--space-4);font-size:13.5px;min-width:260px;max-width:420px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:10px;animation:fade .2s ease;transition:opacity .2s ease;pointer-events:auto;color:var(--text-primary)}
.toast .bar{width:3px;height:22px;border-radius:2px;background:var(--text-primary);flex:0 0 3px}
.toast.ok .bar{background:var(--success)}
.toast.err .bar{background:var(--danger)}
.toast.warn .bar{background:var(--warning)}

/* ---------- Popover ---------- */
.pop{position:fixed;z-index:70;background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:280px;max-width:380px;max-height:70vh;overflow-y:auto;display:none;animation:fade .15s ease}
.pop.on{display:block}
.pop-head{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:var(--space-2);font-size:13px;font-weight:600}
.pop-head svg{width:15px;height:15px}
.pop-item{padding:10px var(--space-4);border-bottom:1px solid var(--border-subtle);cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;color:var(--text-primary);text-decoration:none}
.pop-item svg{width:14px;height:14px;color:var(--text-tertiary);flex:0 0 14px}
.pop-item:last-child{border-bottom:0}
.pop-item:hover{background:var(--bg-subtle);color:var(--text-primary)}
.pop-item.tehlikeli{color:var(--danger-text)}
.pop-item.tehlikeli svg{color:var(--danger-text)}
.pop-item form{display:contents}
.pop-item button{all:unset;display:flex;align-items:center;gap:8px;width:100%;cursor:pointer}
.pop-foot{padding:var(--space-2) var(--space-4);border-top:1px solid var(--border-default);text-align:center;font-size:12.5px}
.pop-bos{padding:var(--space-6);text-align:center;font-size:12.5px;color:var(--text-quaternary)}
.bildirim{display:flex;gap:8px;align-items:flex-start}
.bildirim .nokta{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:0 0 6px;background:var(--border-strong)}
.bildirim .nokta.err{background:var(--danger)}
.bildirim .nokta.warn{background:var(--warning)}
.bildirim .nokta.ok{background:var(--success)}
.bildirim .govde{flex:1;min-width:0}
.bildirim .baslik{color:var(--text-primary);font-weight:500}
.bildirim .icerik{font-size:12px;color:var(--text-tertiary)}
.bildirim .zaman{font-size:11px;color:var(--text-quaternary);margin-top:2px}
.pop-item.okundu .baslik{font-weight:400;color:var(--text-secondary)}

/* ---------- Not, kv ---------- */
.note{border:1px solid var(--border-default);border-left:3px solid var(--text-primary);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:13px;color:var(--text-secondary);background:var(--bg-surface)}
.note.ok{border-left-color:var(--success)}
.note.warn{border-left-color:var(--warning)}
.note.err{border-left-color:var(--danger)}
.kv{display:flex;justify-content:space-between;gap:var(--space-4);padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-tertiary)}
.kv .v{color:var(--text-primary);font-weight:500;text-align:right}
.kv.toplam{border-top:1px solid var(--border-default);margin-top:6px;padding-top:12px}
.kv.toplam .k{font-weight:600;color:var(--text-primary)}
.kv.toplam .v{font-size:19px}

/* ---------- Çubuk grafik, ilerleme ---------- */
.bars{display:flex;align-items:flex-end;gap:6px;height:120px}
.bars .b{flex:1;background:var(--text-primary);border-radius:3px 3px 0 0;min-height:3px;opacity:.85;transition:opacity var(--transition-fast);position:relative}
.bars .b:hover{opacity:1}
.bars .b.soluk{opacity:.35}
.bars .b[data-deger]:hover::after{content:attr(data-deger);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10.5px;color:var(--text-primary);background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:1px 5px;white-space:nowrap}
.axis{display:flex;gap:6px;margin-top:6px}
.axis span{flex:1;text-align:center;font-size:10.5px;color:var(--text-quaternary);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog{height:6px;background:var(--bg-subtle);border-radius:var(--radius-full);overflow:hidden;min-width:60px}
.prog span{display:block;height:100%;background:var(--text-primary);transition:width var(--transition-fast)}
.prog.kritik span,.prog.err span{background:var(--danger)}
.prog.warn span{background:var(--warning)}
.prog.ok span{background:var(--success)}
.cubuk-hucre{display:flex;align-items:center;gap:8px}
.cubuk-hucre .prog{flex:1}
.cubuk-hucre .mono{font-size:12px;min-width:38px;text-align:right}

/* ---------- İskelet (yükleniyor) — yalnız fade ---------- */
.skel{display:inline-block;height:12px;border-radius:var(--radius-xs);background:var(--bg-subtle);animation:skel 1.2s ease-in-out infinite;vertical-align:middle}
.skel.kisa{width:40%}
.skel.orta{width:65%}
.skel.uzun{width:90%}
.skel.blok{display:block;height:80px;border-radius:var(--radius-md)}
.skel.satir{display:block;width:100%}
@keyframes skel{0%,100%{opacity:1}50%{opacity:.45}}
tr.iskelet td{padding:14px var(--space-4)}
tr.iskelet:hover td{background:transparent}

/* ---------- Adım göstergesi (sihirbaz) ---------- */
.adimlar{display:flex;gap:var(--space-2);align-items:center}
.adim{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.adim .no{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--bg-subtle);color:var(--text-tertiary);flex:0 0 24px;font-family:var(--font-mono)}
.adim span{font-size:13px;color:var(--text-quaternary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adim .cizgi{flex:1;height:1px;background:var(--border-default);min-width:12px}
.adim.tamam .no,.adim.aktif .no{background:var(--text-primary);color:var(--bg-canvas)}
.adim.tamam span{color:var(--text-primary)}
.adim.aktif span{color:var(--text-primary);font-weight:600}
.adim.tamam .cizgi{background:var(--text-primary)}
.adim.hata .no{background:var(--danger);color:#fff}
.adim:last-child .cizgi{display:none}
.adim .no svg{width:13px;height:13px}

/* ---------- Zaman çizelgesi (GİB durum) ---------- */
.zaman{display:flex;flex-direction:column}
.zaman-adim{display:flex;gap:12px;position:relative;padding-bottom:14px}
.zaman-adim::before{content:"";position:absolute;left:9px;top:20px;bottom:0;width:1px;background:var(--border-default)}
.zaman-adim:last-child{padding-bottom:0}
.zaman-adim:last-child::before{display:none}
.zaman-adim .nokta{width:19px;height:19px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg-canvas);display:grid;place-items:center;flex:0 0 19px;margin-top:1px}
.zaman-adim .nokta svg{width:11px;height:11px}
.zaman-adim.tamam .nokta{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-canvas)}
.zaman-adim.aktif .nokta{border-color:var(--text-primary);border-width:2px}
.zaman-adim.aktif .nokta::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-primary)}
.zaman-adim.hata .nokta{background:var(--danger);border-color:var(--danger);color:#fff}
.zaman-adim.bekliyor .nokta{border-style:dashed}
.zaman-adim.tamam::before{background:var(--text-primary)}
.zaman-adim .govde{flex:1;min-width:0;display:flex;gap:var(--space-3);align-items:baseline;flex-wrap:wrap}
.zaman-adim .kod{font-family:var(--font-mono);font-size:11.5px;color:var(--text-tertiary);min-width:36px}
.zaman-adim .ad{font-size:13.5px;color:var(--text-primary)}
.zaman-adim.bekliyor .ad{color:var(--text-quaternary)}
.zaman-adim .saat{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)}
.zaman-adim .aciklama{flex-basis:100%;font-size:12px;color:var(--text-tertiary)}
.zaman-adim.hata .aciklama{color:var(--danger-text)}

/* ---------- Kontrol listesi / checklist ---------- */
.kontrol-listesi{display:flex;flex-direction:column}
.kontrol{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13.5px;color:var(--text-secondary)}
.kontrol:last-child{border-bottom:0}
.kontrol svg{width:14px;height:14px;flex:0 0 14px;color:var(--success-text)}
.kontrol.hata,.kontrol.eksik{color:var(--danger-text)}
.kontrol.hata svg,.kontrol.eksik svg{color:var(--danger-text)}
.kontrol.bekliyor{color:var(--text-quaternary)}
.kontrol.bekliyor svg{color:var(--text-quaternary)}
.kontrol .detay{margin-left:auto;font-size:12px;color:var(--text-quaternary);font-family:var(--font-mono)}
.kontrol-ozet{margin-top:var(--space-3)}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:13px;color:var(--text-secondary)}
.checklist li svg{width:14px;height:14px;flex:0 0 14px;margin-top:3px;color:var(--success-text)}
.checklist li.hata svg{color:var(--danger-text)}
.checklist li.bekliyor svg{color:var(--text-quaternary)}
.checklist li.tamam{color:var(--text-quaternary);text-decoration:line-through}

/* ---------- Dosya bırakma alanı ---------- */
.drop-zone{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-6);text-align:center;color:var(--text-tertiary);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}
.drop-zone:hover,.drop-zone.uzerinde{border-color:var(--text-primary);background:var(--bg-subtle)}
.drop-zone svg{width:28px;height:28px;color:var(--text-quaternary);margin-bottom:var(--space-3)}
.drop-zone h3{margin-bottom:6px}
.drop-zone p{font-size:13px}
.drop-zone input[type="file"]{display:none}
.drop-zone .dosya{margin-top:var(--space-3);font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary)}

/* ---------- AI önerisi (indigo nokta işaretli) ---------- */
.ai-oneri{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);padding:var(--space-3) var(--space-4);display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-secondary)}
.ai-oneri::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px;margin-top:7px}
.ai-oneri .baslik{font-weight:600;color:var(--text-primary);font-size:12px;margin-bottom:2px}
.ai-oneri .btn-row{margin-top:var(--space-2)}
.ai-etiket{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-tertiary)}
.ai-etiket::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- Satır tablolu form ---------- */
.satir-tablo th{padding:8px var(--space-3)}
.satir-tablo td{padding:5px var(--space-3)}
.satir-tablo td.sira{color:var(--text-quaternary);font-family:var(--font-mono);width:34px}
.satir-tablo td.hesaplanan{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--text-primary);font-weight:500}
.satir-tablo tbody tr:hover td{background:transparent}
.satir-tablo tr.hatali td{background:var(--danger-bg)}
.satir-tablo select{padding-right:22px;background-position:right 5px center}
/* Küçük gömülü satır tablosu (form alanı içinde, ör. prim kademeleri) */
table.sikisik th{padding:6px 8px}
table.sikisik td{padding:4px 8px}

/* ---------- Çıktı önizleme ---------- */
.onizleme{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-canvas);padding:var(--space-6);min-height:260px}
.onizleme-ust{display:flex;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--border-default);padding-bottom:var(--space-3);margin-bottom:var(--space-4)}
.onizleme-ust .firma{font-family:var(--font-display);font-weight:700}
.onizleme iframe{width:100%;height:60vh;border:0;background:#fff}

/* ---------- Hata sayfası ---------- */
.hata-sayfa{max-width:520px;margin:var(--space-10) auto;text-align:center}
.hata-sayfa .kod{font-family:var(--font-mono);font-size:56px;font-weight:600;letter-spacing:-.03em;color:var(--text-quaternary);line-height:1}
.hata-sayfa h1{margin-top:var(--space-3)}
.hata-sayfa p{margin-top:var(--space-2);color:var(--text-tertiary)}
.hata-sayfa .btn-row{justify-content:center;margin-top:var(--space-6)}
.hata-sayfa pre{text-align:left;margin-top:var(--space-5);padding:var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);font-size:11.5px;max-height:320px;overflow:auto;color:var(--text-secondary)}

/* ---------- Dönem / seçim listeleri (popover içinde) ---------- */
.pop-item .arasi{display:flex;justify-content:space-between;align-items:center;width:100%}

/* ---------- Etiket/anahtar-değer ızgara (detay genel sekmesi) ---------- */
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3) var(--space-5)}
.kv-grid .kv{flex-direction:column;align-items:flex-start;gap:2px;border:0;padding:0}
.kv-grid .kv .k{font-size:12px}
.kv-grid .kv .v{text-align:left}

/* ---------- AI ekranları: öneri işareti, belge önizleme, sohbet, bulgu kartı ---------- */
/* AI önerisi: alanın sağında indigo nokta; kullanıcı alana dokununca sınıf kalkar (ai-belge.js) */
input.ai-isaretli,select.ai-isaretli,textarea.ai-isaretli{background-image:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px);background-repeat:no-repeat;background-position:right 9px center;background-size:8px 8px;padding-right:24px}
.belge-onizleme{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-subtle);min-height:420px;display:flex;align-items:center;justify-content:center;overflow:auto}
.belge-onizleme img{max-width:100%;height:auto;display:block}
.belge-onizleme iframe{width:100%;height:70vh;border:0;background:#fff}
.sohbet{display:flex;flex-direction:column;gap:var(--space-4);min-height:380px}
.sohbet-mesajlar{display:flex;flex-direction:column;gap:var(--space-4);max-height:58vh;overflow-y:auto;flex:1}
.mesaj-ben{align-self:flex-end;background:var(--bg-subtle);border-radius:var(--radius-lg);padding:10px 14px;max-width:80%;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.mesaj-ai{display:flex;gap:10px;font-size:13.5px;line-height:1.6;max-width:92%}
.mesaj-ai .ai-avatar{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--text-primary);color:var(--bg-canvas);display:grid;place-items:center;flex:0 0 26px}
.mesaj-ai .govde{min-width:0;word-break:break-word}
.mesaj-ai .govde .btn{margin-top:var(--space-3)}
.sohbet-giris{display:flex;gap:var(--space-2)}
.sohbet-giris input{height:38px}
.bulgu{border:1px solid var(--border-default);border-left:3px solid var(--border-strong);border-radius:var(--radius-md);padding:var(--space-4)}
.bulgu.yuksek{border-left-color:var(--danger)}
.bulgu.orta{border-left-color:var(--warning)}
.bulgu .bulgu-ust{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:6px}
.bulgu .bulgu-metin{font-size:13px;color:var(--text-secondary);white-space:pre-line}
.bulgu .btn-row{margin-top:var(--space-3)}
.sql-kutu{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);padding:var(--space-3) var(--space-4);font-size:12px;max-height:240px;overflow:auto}

/* VKN/TCKN otomatik doldurma (vkn.js) — doldurulan alana kısa vurgu, sonuç satırı */
input.vkn-dolduruldu,textarea.vkn-dolduruldu,select.vkn-dolduruldu{background:var(--bg-subtle);transition:background-color .2s ease}
.field input,.field textarea,.field select{transition:background-color 1.2s ease}
.vkn-durum{display:block;margin-top:4px;font-size:11.5px;color:var(--text-tertiary)}
.vkn-durum.t-ok{color:var(--success-text)}
.vkn-durum.t-warn{color:var(--warning-text)}

/* ==========================================================================
   DUYARLILIK — BU BLOK BİLEREK DOSYANIN SONUNDA KALMALI.
   layout.css components.css'ten ÖNCE yüklenir; bileşen medya kuralları orada yazıldığında
   buradaki aynı özgüllükteki temel kurallar (.grid2{…}, .stats{…}, .modal{…}) onları eziyordu:
   ızgaralar/split mobilde tek kolona inmiyor, toast/filtre/modal kuralları çalışmıyordu.
   Kırılımlar: 1000 (split tek kolon, 4'lü→2'li) · 860 (çekmece; ızgaralar tek kolon) · 760 · 640 (modal alt sayfa) · 420
   ========================================================================== */

/* Izgara çocukları içerik genişliğine göre büyümesin — tbl-wrap içindeki geniş tablo kolonu şişirip
   sayfayı yatay kaydırıyordu (grid öğesinin min-width:auto'su = min-content). */
.split>*,.grid2>*,.grid3>*,.grid4>*,.stats>*,.kv-grid>*{min-width:0}

/* Uzun kesintisiz dizgeler: VKN/TCKN, e-posta, ETTN, IBAN, belge no */
.kir-uzun{overflow-wrap:anywhere}
/* .kv: değer daralmaz (tutar ortadan bölünmesin), en çok %70 genişler; daha uzunsa (adres, e-posta, ETTN) kendi içinde kırılır */
.kv .k{min-width:0}
.kv .v{flex-shrink:0;max-width:70%;overflow-wrap:anywhere}
.kv-grid .kv .v{max-width:100%}
.stat .value{overflow-wrap:anywhere}
.zaman-adim .ad,.bildirim .govde,.pop-head .grow{overflow-wrap:anywhere}
/* Salt okunur alan değeri (components/alan.php ve bazı görünümlerde satır içi height:34px) — uzun değer
   sabit yükseklikten taşıp alttaki alanın üstüne binmesin */
.field>div[style*="height:34px"]{height:auto !important;min-height:34px;flex-wrap:wrap;overflow-wrap:anywhere}

/* Satır içi grid-template-columns verilmiş split (ör. rol & yetki 260px 1fr) da dar ekranda tek kolona insin */
@media (max-width:1000px){
  .split,.split.genis,.split.ters,.split[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .grid4,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Bütçe 12 ay tablosu (min 1480px, yatay kayar): kalem sütunu sabit kalsın */
[data-butce-tablo] thead th:first-child,
[data-butce-tablo] tr[data-satir] td:first-child{position:sticky;left:0;z-index:1;background:var(--bg-surface);box-shadow:inset -1px 0 0 var(--border-default)}
[data-butce-tablo] tfoot td:first-child{position:sticky;left:0;z-index:1;box-shadow:inset -1px 0 0 var(--border-default)}

/* Satır işlem butonları (hover'da görünür) — dokunmatikte ve dar ekranda her zaman görünür */
@media (pointer:coarse){td.aksiyon .btn{opacity:1}}

/* Dokunma hedefleri: birincil işaretçi dokunmatikse buton/ikon buton en az 36–40px */
@media (pointer:coarse){
  .btn{height:40px}
  .btn.sm{height:36px}
  .btn.icon{width:40px}
  .btn.icon.sm{width:36px}
  td.aksiyon .btn.icon.sm,.satir-tablo .btn.icon.sm{height:34px;width:34px}
  .chip{height:36px}
  .avatar{width:34px;height:34px;flex-basis:34px}
  .search-trigger{height:36px}
  .nav-item{padding-top:10px;padding-bottom:10px}
  .tab{padding:11px 14px}
  .pop-item{padding-top:12px;padding-bottom:12px}
  .sutun-menu label{padding:10px 8px}
  .pal-item{padding-top:12px;padding-bottom:12px}
  .ot-item{padding:11px 12px}
  input,select{height:40px}
  .filters input:not([type="checkbox"]):not([type="radio"]),.filters select,.pager select{height:36px}
  table input,table select{height:36px}
}
/* iOS Safari 16px altı yazı tipli alana odaklanınca sayfayı yakınlaştırır */
@media (pointer:coarse) and (max-width:860px){
  input,select,textarea{font-size:16px}
}

@media (max-width:860px){
  .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  /* .m2: mobilde de 2 kolon kalsın (kısa sayısal alanlar — ör. saha sipariş miktar/birim/fiyat/KDV) */
  .grid4.m2,.grid3.m2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .stat{padding:var(--space-3) var(--space-4)}
  .stat .value{font-size:19px}
  .toasts{left:var(--space-4);right:var(--space-4);bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px))}
  .toast{min-width:0;max-width:none}
  .card-head{flex-wrap:wrap;padding-left:var(--space-4);padding-right:var(--space-4)}
  .card-head>.grow{flex:1 1 auto}
  .card-body{padding:var(--space-4)}
  .card-foot{flex-wrap:wrap;padding-left:var(--space-4);padding-right:var(--space-4)}
  .filtre-panel{padding:var(--space-4)}
  /* Satır tablolarında genişliği verilmemiş sütunlardaki %100 girdiler sıfıra çökmesin; tablo .tbl-wrap içinde yana kaysın */
  table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),table select{min-width:64px}
  .satir-tablo .ot-wrap input{min-width:180px}
}

@media (max-width:760px){
  .filters{position:relative}
  .filters .srch{flex:1 1 100%;max-width:none;min-width:0}
  .filters input,.filters select{min-width:0}
  .filters select{flex:1 1 140px}
  .filters input[type="date"]{flex:1 1 130px;width:auto}
  /* Sütun seçici menüsü filtre çubuğunun sağına hizalansın (buton sola sarılınca ekran dışına taşıyordu) */
  .sutun-secici{position:static}
  .sutun-menu{right:0;max-width:100%}
  .pager{flex-wrap:wrap;row-gap:var(--space-2)}
  .form-aksiyon{flex-direction:column;align-items:stretch}
  .form-aksiyon .btn{width:100%}
  .form-aksiyon .btn[style*="margin-right:auto"]{margin-right:0 !important}
  .adimlar .adim span{display:none}
  .adimlar .adim.aktif span{display:inline}
  .modal-foot .btn{flex:1 1 auto}
  .modal-foot .sol{flex-basis:100%;margin-right:0}
  .tabs{scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .empty{padding:var(--space-8) var(--space-4)}
  .onizleme{padding:var(--space-4)}
  .drop-zone{padding:var(--space-6) var(--space-4)}
  .mesaj-ben{max-width:92%}
  .mesaj-ai{max-width:100%}
  .zaman-adim .saat{margin-left:0;flex-basis:100%}
  /* CRM kanban: sütunlar yatay kayar, kaydırma sütun başına oturur */
  .kanban{scroll-snap-type:x proximity}
  .kanban>section{scroll-snap-align:start}
}

/* Modal: dar ekranda alttan açılan tam genişlik sayfa; gövde kaydırılır, başlık ve butonlar sabit */
@media (max-width:640px){
  .ovl{padding:0;align-items:flex-end}
  .ovl.palette{padding:var(--space-3);align-items:flex-start}
  .modal,.modal.genis{max-width:none;width:100%;max-height:100vh;max-height:100dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-left:0;border-right:0;border-bottom:0}
  .modal-head{padding:var(--space-4)}
  .modal-body{padding:var(--space-4)}
  .modal-body.sikisik{padding:0}
  .modal-foot{padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom,0px))}
}

@media (max-width:420px){
  .stat .value{font-size:17px}
  .kv.toplam .v{font-size:17px}
  .card-head,.card-body,.card-foot{padding-left:var(--space-3);padding-right:var(--space-3)}
}

/* ---------- Yazdırma (kabuk kuralları layout.css'te) ---------- */
@media print{
  .scrim,.toasts,.ovl,.pop,.filters,.pager .btn,.btn-row,.toplu-bar,.sutun-secici,.filtre-panel,.gorunumler,.tabs,td.aksiyon,th.aksiyon,td.sec,th.sec{display:none !important}
  body{background:#fff;color:#000;font-size:12px}
  .card,.stat{border-color:#999;break-inside:avoid}
  .tbl-wrap{overflow:visible}
  table{font-size:11.5px}
  a{color:#000}
  tbody tr:hover td{background:transparent}
  .split{grid-template-columns:minmax(0,1fr) !important}
}