/* =========================================================
   Automaten-Abrechnung — Oberflaeche / Arayuz / UI
   Bootstrap 5 uzerine ince bir katman.
   ========================================================= */

:root{
  --ink:      #16202E;
  --ink-2:    #1E2B3C;
  --ink-3:    #2A3B50;
  --bg:       #F4F6F9;
  --surface:  #FFFFFF;
  --line:     #E2E7EE;
  --line-2:   #EEF1F6;
  --text:     #1B2530;
  --muted:    #6A7686;
  --brand:    #0F766E;
  --warn:     #B45309;
  --danger:   #B42318;
  --ok:       #15803D;
  --side-w:   256px;
  --side-w-sm: 74px;
  --radius:   12px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.neg{color:var(--danger)}
.min-w-0{min-width:0}

/* ---------- Sol menu ---------- */
.side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:1040;
  background:var(--ink); color:#C6D0DC; display:flex; flex-direction:column;
  transition:transform .22s ease;
}
.side-brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.side-brand img{max-height:34px; max-width:150px; object-fit:contain}
.side-mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand); color:#fff; font-size:18px; flex:none;
}
.side-name{color:#fff; font-weight:600; font-size:15px; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-nav{flex:1; overflow-y:auto; padding:12px 10px}
.side-group{
  font-size:11px; letter-spacing:.06em; color:#63748B; text-transform:uppercase;
  padding:14px 10px 6px; font-weight:600;
}
.side-link{
  display:flex; align-items:center; gap:11px; padding:9px 11px; margin-bottom:2px;
  border-radius:9px; color:#C6D0DC; font-weight:500; font-size:14px;
}
.side-link i{font-size:17px; width:20px; text-align:center; opacity:.85}
.side-link:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.side-link.is-active{background:var(--brand); color:#fff}
.side-link.is-active i{opacity:1}
.side-foot{padding:12px; border-top:1px solid rgba(255,255,255,.07)}
.side-user{display:flex; align-items:center; gap:10px}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.1); color:#fff; font-weight:600;
}
.su-name{color:#fff;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-role{font-size:12px;color:#7C8CA0}
.side-backdrop{position:fixed;inset:0;background:rgba(12,18,26,.5);z-index:1035;display:none}
.side-backdrop.show{display:block}

/* Daraltilmis menu: sadece ikonlar, icerik alani genisler */
html.side-collapsed .side{width:var(--side-w-sm)}
html.side-collapsed .side-name,
html.side-collapsed .side-link span,
html.side-collapsed .side-group,
html.side-collapsed .su-name,
html.side-collapsed .su-role{
  opacity:0; width:0; overflow:hidden; white-space:nowrap; pointer-events:none;
}
html.side-collapsed .side-group{height:12px; padding:0; margin:8px 0}
html.side-collapsed .side-brand{justify-content:center; padding:18px 8px 16px}
html.side-collapsed .side-brand img{max-width:44px}
html.side-collapsed .side-link{justify-content:center; padding:11px 0}
html.side-collapsed .side-link i{font-size:18px}
html.side-collapsed .side-user{justify-content:center}
html.side-collapsed .side-foot{padding:12px 6px}
html.side-collapsed .main{margin-left:var(--side-w-sm)}
#sideCollapse i{transition:transform .2s ease}
html.side-collapsed #sideCollapse i{transform:rotate(90deg)}

/* ---------- Ana alan ---------- */
.main{margin-left:var(--side-w); transition:margin-left .22s ease; min-height:100%; display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:1020; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line); padding:12px 22px;
  display:flex; align-items:center; gap:12px;
}
.tb-title{flex:1; min-width:0}
.tb-title h1{margin:0; font-size:19px; font-weight:650; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tb-title p{margin:1px 0 0; font-size:13px; color:var(--muted)}
.tb-right{display:flex; align-items:center; gap:8px}
.btn-icon{
  border:1px solid var(--line); background:#fff; color:var(--text);
  width:38px;height:38px;border-radius:10px; display:inline-grid; place-items:center;
  font-size:17px; cursor:pointer;
}
.btn-icon:hover{background:var(--line-2)}
.lang-abbr{font-size:12.5px;font-weight:700;letter-spacing:.03em}
.content{padding:22px; flex:1; min-width:0}
.foot{
  padding:14px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}

/* ---------- Kart ---------- */
.card2{
  min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:18px;
}
.card2-h{
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.card2-h h2{margin:0;font-size:15.5px;font-weight:640;letter-spacing:-.01em}
.card2-h .sub{font-size:12.5px;color:var(--muted);margin:0}
.card2-b{padding:18px}
.card2-b.p0{padding:0}
.spacer{margin-left:auto}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; position:relative; overflow:hidden;
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.kpi.k2::before{background:#2563EB} .kpi.k3::before{background:var(--warn)} .kpi.k4::before{background:#7C3AED}
.kpi-l{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.kpi-v{font-size:24px;font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-s{font-size:12px;color:var(--muted);margin-top:3px}

/* ---------- Tablo ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{
  text-align:left; font-weight:600; font-size:12.5px; color:var(--muted);
  padding:10px 14px; border-bottom:1px solid var(--line); background:#FAFBFD;
  white-space:nowrap;
}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#FBFCFE}
.tbl .num{text-align:right}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.t-main{font-weight:600}
.t-sub{font-size:12.5px;color:var(--muted)}
.empty{padding:44px 20px; text-align:center; color:var(--muted)}
.empty i{font-size:32px; display:block; margin-bottom:10px; opacity:.4}

/* ---------- Modal / adim listesi ---------- */
.am-sep{
  display:flex; align-items:center; gap:12px; margin:18px 0 14px;
  font-size:12px; color:var(--muted);
}
.am-sep::before,.am-sep::after{content:"";flex:1;height:1px;background:var(--line)}
#am-new{transition:opacity .15s ease}
.modal-content{border:1px solid var(--line); border-radius:14px}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-title{font-size:16px;font-weight:640;letter-spacing:-.01em}
.next-steps{margin:0; padding-left:20px; color:#41505F}
.next-steps li{margin-bottom:9px; font-size:13.5px; line-height:1.5}
.next-steps li::marker{color:var(--brand); font-weight:700}

/* ---------- Sayfalama ---------- */
.pager{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--line);
}
.pager-info{font-size:12.5px;color:var(--muted);margin-right:auto}
.pager-btn{
  min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:550;color:var(--text);background:#fff;
}
.pager-btn:hover{background:var(--line-2);text-decoration:none;color:var(--text)}
.pager-btn.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager-btn.is-off{opacity:.4;pointer-events:none}
.pager-gap{color:var(--muted);padding:0 2px}

/* ---------- Rozet ---------- */
.badge-pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.badge-done{background:#E7F6EC;color:#15803D}
.badge-progress{background:#FEF3E2;color:#B45309}
.badge-open{background:#E8EEFB;color:#2547A8}
.badge-muted{background:#EEF1F6;color:#5D6B7C}

/* ---------- Form ---------- */
.form-label{font-size:13px;font-weight:600;color:#38434F;margin-bottom:5px}
.form-control,.form-select{
  border:1px solid #D5DCE6; border-radius:9px; padding:8px 11px; font-size:14px;
}
.form-control:focus,.form-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);
}
.form-text{font-size:12px;color:var(--muted)}
.btn{border-radius:9px; font-size:14px; font-weight:550; padding:8px 15px}
.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-brand:hover{filter:brightness(.93); color:#fff}
.btn-soft{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-soft:hover{background:var(--line-2);color:var(--text)}
.btn-sm{padding:5px 10px;font-size:13px}
.fieldset-t{
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:650;margin:6px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-2);
}

/* ---------- Belge basligi (Excel'deki ust blok) ---------- */
.doc-head{
  background:linear-gradient(180deg,#FBFCFE,#F6F8FB);
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:18px; margin-bottom:18px;
}
.doc-head > div{min-width:0}
.doc-head .dh-title{
  grid-column:1/-1; font-size:17px; font-weight:660; letter-spacing:-.01em;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13.5px; align-items:baseline}
.dl dt{color:var(--muted); white-space:nowrap}
.dl dd{margin:0; font-weight:560}

/* ---------- Defter tablosu (hesap girisi) ---------- */
.ledger{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; min-width:1160px}
.ledger th{
  background:#F6F8FB; color:#41505F; font-size:11.5px; font-weight:650; padding:8px 8px;
  border-bottom:1px solid var(--line); border-top:1px solid var(--line);
  text-align:center; vertical-align:bottom; line-height:1.25;
}
.ledger th.l{text-align:left}
.ledger td{padding:5px 6px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.ledger tr.sec td{
  background:#FAFBFD; font-weight:650; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:#51606F; padding:7px 10px;
}
.ledger input[type=text],.ledger input[type=number],.ledger select{
  width:100%; border:1px solid #E6EAF0; background:#fff; border-radius:7px;
  padding:6px 8px; font-size:13.5px; font-family:inherit;
}
.ledger input:hover,.ledger select:hover{border-color:#D5DCE6}
.ledger input:focus,.ledger select:focus{
  outline:0; border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent);
}
.ledger input.money{text-align:right; font-variant-numeric:tabular-nums}
.ledger td.calc{
  text-align:right; font-variant-numeric:tabular-nums; color:#41505F;
  background:#FBFCFE; font-size:13px;
}
.ledger td.calc.strong{font-weight:650; color:var(--text)}
.ledger .rowdel{
  border:0;background:transparent;color:#98A4B4;font-size:16px;cursor:pointer;line-height:1;
  padding:4px 6px;border-radius:6px;
}
.ledger .rowdel:hover{background:#FDECEA;color:var(--danger)}
.w-cash{width:112px}.w-share{width:66px}.w-dev{width:104px}
.ledger .f-label{min-width:150px}

/* Toplam paneli */
.totals{
  display:grid; grid-template-columns:1fr auto; gap:8px 26px;
  padding:16px 18px; border-top:2px solid var(--ink); background:#FAFBFD; font-size:14px;
}
.totals .lbl{color:#41505F}
.totals .val{font-variant-numeric:tabular-nums; font-weight:600; text-align:right; white-space:nowrap}
.totals .big{font-size:20px; font-weight:700; letter-spacing:-.02em}
.totals .big-l{font-weight:650; font-size:15px}

/* ---------- Giris ekrani ---------- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:32px 20px;
  position:relative; overflow:hidden;
  background:#FBFCFE;
}
/* Yumusak renk yikamalari + ince nokta dokusu */
.login-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 8% -10%,  color-mix(in srgb,var(--brand) 24%, transparent), transparent 63%),
    radial-gradient(820px 560px at 108% 110%, rgba(37,99,235,.15), transparent 62%),
    radial-gradient(620px 480px at 92% -14%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(540px 420px at -8% 108%, rgba(15,118,110,.10), transparent 62%);
}
.login-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(22,32,46,.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, transparent 26%, #000 72%);
          mask-image:radial-gradient(circle at 50% 45%, transparent 26%, #000 72%);
}
.login-shell{position:relative; z-index:1; width:100%; max-width:468px}

.login-card{
  background-color:#fff; border:1px solid #E6EBF2; border-radius:18px;
  padding:40px 42px 34px; text-align:left;
  box-shadow:0 1px 2px rgba(20,32,48,.04), 0 20px 48px -12px rgba(20,32,48,.16);
  position:relative;
  background-image:linear-gradient(90deg,
    var(--brand),
    color-mix(in srgb,var(--brand) 45%, #2563EB),
    color-mix(in srgb,var(--brand) 28%, #7C3AED));
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:top center;
  background-origin:border-box;
}
.login-brand{text-align:center; margin-bottom:24px; padding-top:4px}
.login-brand img{max-height:70px; max-width:270px; object-fit:contain}
.login-mark{
  width:56px;height:56px;border-radius:16px;background:var(--brand);color:#fff;
  display:inline-grid;place-items:center;font-size:27px;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 60%, transparent);
}
.login-card h1{
  font-size:24px;font-weight:660;letter-spacing:-.025em;margin:0 0 5px;text-align:center;
}
.login-card p.sub{color:var(--muted);font-size:14px;margin:0 0 28px;text-align:center}
.login-card .form-label{font-size:13px;margin-bottom:6px}
.login-card .form-control{
  padding:12px 14px; font-size:15px; border-radius:11px; border-color:#DBE2EB;
}
.login-card .btn-brand{
  width:100%; padding:12px; font-size:15px; font-weight:600; border-radius:11px;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 70%, transparent);
}
.login-card .alert{border-radius:11px;font-size:13.5px;padding:10px 14px}

.login-langs{display:flex;gap:7px;justify-content:center;margin-top:22px}
.login-langs a{
  font-size:12.5px;font-weight:600;color:#5C6B7D;padding:6px 13px;border-radius:9px;
  background:rgba(255,255,255,.72); border:1px solid #E3E9F0;
}
.login-langs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.login-langs a:hover{text-decoration:none;border-color:#CBD5E1;color:var(--text)}
.login-langs a.on:hover{color:#fff}
.login-foot{
  text-align:center;margin-top:16px;font-size:12.5px;color:#7B8794;
}

@media (max-width: 480px){
  .login-card{padding:30px 22px 26px; border-radius:15px}
  .login-card h1{font-size:21px}
  .login-brand img{max-height:56px}
}

/* ---------- Beleg / Makbuz ---------- */
.receipt-toolbar{
  position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);
  padding:11px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sheet{
  background:#fff; max-width:1000px; margin:22px auto; padding:34px 38px;
  border:1px solid var(--line); border-radius:10px; color:#101820;
}
.sheet h1{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.sheet .sheet-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.sheet .sheet-top img{max-height:52px;max-width:190px;object-fit:contain}
.sheet .op{font-size:12.5px;color:#4A5765;text-align:right;line-height:1.5}
.sheet-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px 34px;margin-bottom:20px}
.sheet-grid .dl dd{font-weight:600}
.rtable{width:100%;border-collapse:collapse;font-size:12.5px}
.rtable th{
  background:#F2F5F9;border:1px solid #CBD3DE;padding:6px 7px;font-size:11px;
  font-weight:650;text-align:center;line-height:1.25;color:#2B3949;
}
.rtable td{border:1px solid #D8DEE7;padding:6px 7px;font-variant-numeric:tabular-nums}
.rtable td.l{text-align:left}
.rtable td.r{text-align:right}
.rtable tr.sec td{background:#F7F9FC;font-weight:650;text-align:left;letter-spacing:.03em}
.rtot{margin-top:16px;margin-left:auto;width:min(520px,100%);font-size:13px}
.rtot .row2{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #E3E8EF}
.rtot .row2.head{border-bottom:2px solid var(--ink);font-size:16px;font-weight:700}
.rtot .v{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.confirm{margin-top:26px;font-size:12px;color:#3A4756;line-height:1.6}
.signs{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:46px}
.signs div{border-top:1px solid #7C8896;padding-top:6px;font-size:12px;color:#4A5765}
.sheet-foot{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);text-align:center;white-space:pre-line}

/* ---------- Mobil ---------- */
@media (max-width: 991.98px){
  .side, html.side-collapsed .side{width:var(--side-w); transform:translateX(-100%)}
  html.side-collapsed .side-name, html.side-collapsed .side-link span,
  html.side-collapsed .side-group, html.side-collapsed .su-name, html.side-collapsed .su-role{
    opacity:1; width:auto; pointer-events:auto;
  }
  html.side-collapsed .side-group{height:auto; padding:14px 10px 6px}
  html.side-collapsed .side-brand{justify-content:flex-start; padding:18px 18px 16px}
  html.side-collapsed .side-link{justify-content:flex-start; padding:9px 11px}
  html.side-collapsed .main{margin-left:0}
  .side.show{transform:none}
  .main{margin-left:0}
  .content{padding:16px}
  .topbar{padding:11px 14px}
  .doc-head{grid-template-columns:1fr}
  .sheet{padding:20px 16px;margin:12px}
  .sheet-grid{grid-template-columns:1fr}
  .signs{grid-template-columns:1fr;gap:34px}
  .kpi-v{font-size:21px}
}

@media (max-width: 575.98px){
  .topbar{flex-wrap:wrap; row-gap:9px}
  .tb-title{flex:1 1 auto; min-width:0}
  .tb-title p{display:none}
  .tb-right{flex:1 1 100%; justify-content:flex-end}
  .totals{grid-template-columns:1fr auto; gap:6px 12px; padding:14px}
  .totals .big{font-size:18px}
}

/* ---------- Yazdirma ---------- */
@media print{
  .side,.topbar,.foot,.receipt-toolbar,.no-print,.side-backdrop{display:none !important}
  body{background:#fff}
  .main{margin:0}
  .sheet{border:0;margin:0;padding:0;max-width:none;border-radius:0}
  .rtable th{background:#EEF2F7 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rtable tr.sec td{background:#F5F7FA !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:14mm}
}