:root {
    --ink: #17212b;
    --muted: #66727f;
    --line: #dce2e7;
    --paper: #fff;
    --canvas: #f4f6f7;
    --brand: #cc5d24;
    --brand-dark: #a94517;
    --nav: #182630;
    --nav-soft: #263946;
    --success: #18794e;
    --danger: #b42318;
    --warning: #a15c00;
    --shadow: 0 8px 24px rgba(24, 38, 48, .08);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.5 "Segoe UI", Arial, sans-serif; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { position: fixed; z-index: 20; inset: 0 0 auto 0; height: 64px; display: flex; align-items: center; padding: 0 24px; color: #fff; background: var(--nav); box-shadow: 0 2px 16px rgba(0,0,0,.18); }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 18px; font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--brand); font-size: 14px; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ust-ikon { position: relative; display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #dbe3e8; background: var(--nav-soft); cursor: pointer; }
.ust-ikon:hover { color: #fff; border-color: rgba(255,255,255,.32); }
.ust-ikon:focus-visible { outline: 3px solid rgba(255, 191, 155, .5); outline-offset: 2px; }
.ust-ikon svg, .arama-kutusu svg, .favori-listesi svg, .nav-grup-baslik svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ust-ikon.kare { margin-left: 18px; border-radius: 8px; }
.userbox .ust-ikon + .ust-ikon { margin-left: -8px; }
.ust-ikon.dolu svg { fill: #fbbf24; stroke: #fbbf24; }
.rozet { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--nav); border-radius: 10px; color: #fff; background: var(--warning); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.rozet.kritik { background: var(--danger); animation: rozet-nabiz 2s ease-out 3; }
@keyframes rozet-nabiz { 0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .7); } 100% { box-shadow: 0 0 0 10px rgba(180, 35, 24, 0); } }
@media (prefers-reduced-motion: reduce) { .rozet.kritik { animation: none; } }
dialog.modal.ust-pencere { display: flex; flex-direction: column; width: min(460px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); margin-top: 72px; }
dialog.modal.ust-pencere:not([open]) { display: none; }
dialog.modal.genis { width: min(980px, calc(100vw - 32px)); }
.ust-pencere-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ust-pencere-bas h2 { margin: 0; font-size: 17px; }
.ust-pencere-govde { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 18px 16px; }
.ust-pencere-govde h3 { margin: 10px 0 6px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ust-pencere-alt { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.pencere-kapat { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.pencere-kapat:hover { color: var(--ink); background: var(--canvas); }
.arama-kutusu { display: flex; align-items: center; gap: 10px; margin: 14px 18px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--canvas); }
.arama-kutusu:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(204, 93, 36, .15); }
.arama-kutusu input { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; }
.ust-pencere .katalog { gap: 14px; }
.ust-pencere .katalog .card { padding: 14px 16px; box-shadow: none; }
.ust-pencere .katalog h2 { margin: 0 0 6px; font-size: 15px; }
.ust-pencere .katalog p { margin: 0; }
.ust-pencere .katalog p a { display: block; padding: 4px 0; }
.ust-pencere .katalog .btn { margin-top: 8px; }
.bildirim-listesi, .favori-listesi { list-style: none; margin: 0; padding: 0; }
.bildirim-listesi li + li, .favori-listesi li + li { border-top: 1px solid var(--line); }
.bildirim, .arama-sonucu { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px; border-radius: 7px; color: var(--ink); }
.bildirim:hover, .arama-sonucu:hover, .arama-sonucu:focus { text-decoration: none; background: var(--canvas); }
.bildirim-nokta { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #2563eb; }
.bildirim-danger .bildirim-nokta { background: var(--danger); }
.bildirim-warning .bildirim-nokta { background: #d97706; }
.bildirim-metin { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.bildirim-metin strong { font-weight: 650; overflow-wrap: anywhere; }
.bildirim-metin small { color: var(--muted); }
.bildirim time { flex: none; color: var(--muted); font-size: 12px; }
.bildirim-diger { padding: 10px 6px; font-size: 13px; }
.arama-turu { flex: none; width: 128px; padding-top: 1px; color: var(--muted); font-size: 12px; font-weight: 650; }
.favori-ekle { padding: 14px 18px 4px; }
.favori-ekle label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.favori-satir { display: flex; gap: 8px; }
.favori-satir input { flex: 1; min-width: 0; }
.favori-listesi li { display: flex; align-items: center; gap: 6px; }
.favori-listesi a { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 7px; color: var(--ink); overflow-wrap: anywhere; }
.favori-listesi a:hover { text-decoration: none; background: var(--canvas); }
.favori-listesi a svg { flex: none; width: 16px; height: 16px; fill: #fbbf24; stroke: #d39e00; }
.favori-listesi .bu-sayfa a { font-weight: 650; }
.userbox a { color: #ffbf9b; }
.nav-toggle { display: none; margin-left: auto; color: #fff; background: none; border: 0; font-size: 24px; }
.sidebar { position: fixed; z-index: 15; top: 64px; bottom: 0; left: 0; width: 228px; overflow-y: auto; background: var(--nav); }
.sidebar nav { padding: 12px; }
.sidebar a { display: block; padding: 9px 12px; border-radius: 7px; color: #dbe3e8; }
.sidebar a:hover { text-decoration: none; color: #fff; background: var(--nav-soft); }
.nav-label { display: block; padding: 16px 12px 5px; color: #8397a4; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sidebar a.active { color: #fff; background: var(--nav-soft); font-weight: 650; box-shadow: inset 3px 0 0 var(--grup, var(--brand)); }
.nav-grup { --grup: #94a3b8; margin-top: 8px; }
.nav-grup-baslik { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px 6px; border: 0; border-radius: 7px; color: var(--grup); background: none; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-align: left; text-transform: uppercase; cursor: pointer; }
.nav-grup-baslik::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--grup); }
.nav-grup-baslik span { flex: 1; }
.nav-grup-baslik svg { width: 16px; height: 16px; transition: transform .15s; }
.nav-grup-baslik:hover { background: rgba(255,255,255,.04); }
.nav-grup-baslik:focus-visible { outline: 2px solid var(--grup); outline-offset: -2px; }
.nav-grup.kapali .nav-grup-baslik svg { transform: rotate(-90deg); }
.nav-grup.kapali .nav-grup-icerik { display: none; }
.nav-grup-icerik { margin-left: 15px; padding-left: 4px; border-left: 1px solid color-mix(in srgb, var(--grup) 35%, transparent); }
.grup-satis { --grup: #c4b5fd; }
.grup-operasyon { --grup: #93c5fd; }
.grup-kayitlar { --grup: #5eead4; }
.grup-mali { --grup: #86efac; }
.grup-diger { --grup: #cbd5e1; }
.grup-yonetim { --grup: #fca5a5; }
.content { min-height: 100vh; margin-left: 228px; padding: 92px 30px 40px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0 0 22px; }
.page-head h1 { margin: 0 0 4px; font-size: 27px; letter-spacing: -.03em; }
.page-head p { margin: 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { text-decoration: none; border-color: #b9c2ca; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.btn.primary { color: #fff; border-color: var(--brand); background: var(--brand); }
.btn.primary:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 30px; padding: 4px 9px; font-size: 12px; }
.card { min-width: 0; margin-bottom: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); }
.card h2, .card h3 { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { padding: 18px; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); }
.stat span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.stat strong { display: block; margin-top: 5px; font-size: 25px; }
.stat.positive strong { color: var(--success); }
.stat.negative strong { color: var(--danger); }
.stat small { display: block; margin-top: 4px; font-size: 12px; }
/* Kaydı ekleyen/değiştiren kullanıcı satırı */
.ekstre-cari { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 18px; }
.ekstre-cari > div { display: flex; flex-direction: column; gap: 2px; }
.ekstre-cari .muted { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.ekstre td, .ekstre th { white-space: nowrap; }
.islemler td { vertical-align: top; }
.islemler td.nowrap { white-space: nowrap; }
.degisiklikler { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.degisiklikler li + li { margin-top: 3px; }
.degisiklikler .alan { color: var(--muted); }
.degisiklikler del { color: #8f1b13; background: #fee4e2; text-decoration: line-through; padding: 0 3px; border-radius: 3px; }
.degisiklikler ins { color: #0d5c3a; background: #dff4e9; text-decoration: none; padding: 0 3px; border-radius: 3px; }
.islemler details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.islemler details .degisiklikler { margin-top: 6px; }
.ham-kayit pre { margin: 6px 0 0; padding: 8px; max-width: 640px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; background: #f6f8f9; border-radius: 6px; }
.islem-gecmisi { margin-left: 6px; font-size: 12px; color: var(--muted); }
.islem-donemleri { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.ekstre td:nth-child(4) { min-width: 260px; white-space: normal; }
.ekstre tfoot th { border-top: 2px solid var(--line); background: var(--canvas); }
.ekstre-devir td { background: #fbf6ee; font-style: italic; }
.stat strong small { font-size: 13px; font-weight: 700; }
.kayit-izi { margin: -8px 0 14px; color: var(--muted); font-size: 12px; }
.kayit-izi strong { color: var(--ink); font-weight: 650; }
/* İş detayı zaman çizelgesi */
.zaman-cizelgesi { list-style: none; margin: 0; padding: 0 0 0 6px; }
.zaman-olayi { position: relative; display: flex; gap: 12px; padding: 0 0 16px 18px; border-left: 2px solid var(--line); }
.zaman-olayi:last-child { border-left-color: transparent; }
.zaman-nokta { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--zaman-renk, #94a3b8); box-shadow: 0 0 0 3px var(--paper); }
.zaman-baslik a, .zaman-baslik strong { font-weight: 650; }
.zaman-is { --zaman-renk: var(--brand); }
.zaman-degisiklik { --zaman-renk: #64748b; }
.zaman-fiyat, .zaman-crm { --zaman-renk: #8b5cf6; }
.zaman-sefer, .zaman-calisma { --zaman-renk: #2563eb; }
.zaman-gelir, .zaman-tahsilat { --zaman-renk: #16a34a; }
.zaman-gider { --zaman-renk: #dc2626; }
.zaman-santiye, .zaman-not, .zaman-evrak { --zaman-renk: #d97706; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-day { min-height: 100px; border: 1px solid var(--line); padding: 8px; border-radius: 5px; overflow-wrap: anywhere; }
.calendar-event { display: block; margin-top: 8px; font-size: 12px; border-left: 3px solid var(--brand); padding-left: 5px; }
@media (max-width: 700px) { .calendar-grid { gap: 2px; } .calendar-day { min-height: 66px; padding: 3px; font-size: 11px; } .calendar-event { font-size: 10px; padding-left: 1px; border-left-width: 2px; } .calendar-event time { white-space: nowrap; } .calendar-detail { display: none; } .actions { flex-wrap: wrap; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 13px; color: #52606d; background: #f6f8f9; font-size: 12px; text-align: left; white-space: nowrap; }
td { padding: 11px 13px; border-top: 1px solid #e8ecef; vertical-align: middle; }
tbody tr:hover { background: #fffaf6; }
td.number, th.number { text-align: right; }
td.actions-cell { text-align: right; white-space: nowrap; }
.inline-form { display: inline; }
.filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.field { min-width: 0; margin-bottom: 14px; }
.field label { display: block; margin-bottom: 5px; color: #3f4b55; font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd3d9; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; }
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(204, 93, 36, .12); border-color: var(--brand); }
.filter .field { min-width: 150px; margin: 0; }
.form-card { max-width: 1050px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field-validation-error, .validation-summary-errors { color: var(--danger); font-size: 12px; }
.validation-summary-errors { margin-bottom: 16px; padding: 12px; border: 1px solid #f3b4af; border-radius: 7px; background: #fff1f0; }
.validation-summary-errors ul { margin: 0; padding-left: 20px; }
.alert { margin-bottom: 18px; padding: 12px 15px; border-radius: 7px; }
.alert.success { color: #0d5c3a; border: 1px solid #a8dfc5; background: #eaf8f1; }
.alert.error { color: var(--danger); border: 1px solid #f3b4af; background: #fff1f0; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 99px; background: #edf1f3; font-size: 12px; white-space: nowrap; }
.badge.success { color: #0d5c3a; background: #dff4e9; }
.badge.warning { color: #7a4500; background: #fff0d5; }
.badge.danger { color: #8f1b13; background: #fee4e2; }
.muted { color: var(--muted); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { padding: 35px; color: var(--muted); text-align: center; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top right, #344c5b, #17252e 52%, #101a20); }
.login-card { width: min(440px, 100%); padding: 32px; border-radius: 14px; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.login-card .brand { margin-bottom: 26px; color: var(--ink); }
.login-card h1 { margin: 0 0 6px; }
.login-card > p { margin: 0 0 22px; color: var(--muted); }
.login-card .btn { width: 100%; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; min-height: auto; }
.detail-list { display: grid; grid-template-columns: 170px 1fr; gap: 9px 16px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 600; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-head h2 { margin-bottom: 12px; }
.account-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.account-grid.compact { margin-bottom: 0; }
.account-card { display: flex; min-height: 150px; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--paper); box-shadow: var(--shadow); }
.account-card h2, .account-card h3 { margin: 8px 0 0; }
.account-card > strong { font-size: 24px; }
.positive-text { color: var(--success); }
.danger-text { color: var(--danger); }
.check-field { display: flex; flex-direction: column; justify-content: center; }
.check-field label { display: flex; align-items: center; gap: 8px; }
.check-field input, .filter-check input { width: auto; min-height: auto; }
.filter-check { min-height: 40px; padding: 10px 4px; }
.progress { display: inline-block; width: min(220px, 70%); height: 8px; margin-right: 8px; overflow: hidden; border-radius: 99px; background: #e8ecef; vertical-align: middle; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.module-list { display: grid; gap: 9px; }
.module-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.field .label-row label { margin-bottom: 0; }
.icon-btn { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--brand-dark); background: #fff; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.icon-btn:hover { border-color: var(--brand); background: #fbefe8; }
.icon-btn:focus-visible { outline: 3px solid rgba(204, 93, 36, .25); outline-offset: 1px; }
dialog.modal { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 60px rgba(24, 38, 48, .25); }
dialog.modal::backdrop { background: rgba(23, 33, 43, .45); }
.modal-body { padding: 20px; }
.modal-body h2 { margin: 0 0 14px; font-size: 18px; }
.modal-body .actions { justify-content: flex-end; }
.field-error { margin: 0 0 12px; color: var(--danger); font-size: 13px; }
.input-unit { position: relative; }
.input-unit input { padding-right: 84px; }
.input-unit span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--muted); font-size: 13px; font-weight: 650; pointer-events: none; }
@media (max-width: 1000px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .topbar { padding: 0 14px; }
    .brand > span:last-child { display: none; }
    .userbox > span { display: none; }
    .nav-toggle { display: block; }
    .userbox { margin-left: 12px; gap: 12px; }
    .ust-ikon.kare { margin-left: 12px; }
    .userbox .ust-ikon + .ust-ikon { margin-left: 0; }
    dialog.modal.ust-pencere { margin-top: 16px; max-height: calc(100vh - 32px); }
    .arama-turu { width: 92px; }
    .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 30px rgba(0,0,0,.2); }
    .sidebar.open { transform: translateX(0); }
    .content { margin-left: 0; padding: 84px 14px 30px; }
    .page-head { flex-direction: column; }
    .stats, .grid-2, .form-grid, .account-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid .span-2 { grid-column: auto; }
}