:root{
  --bg: #0b0b0d;
  --card: #131316;
  --muted: #a0a3ad;
  --text: #f3f4f6;
  --primary: #e50914;
  --primary-2: #ff3b3b;
  --accent: #ffd166;
  --danger: #ff6b6b;
  --warn: #ffb703;
  --border: #232329;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0a0a0c,#0f0f13 60%);
  color:var(--text);
}

a{text-decoration:none;color:inherit}

.cp-app{display:flex;min-height:100vh}

/* Sidebar */
.cp-sidebar{
  width:260px;
  background:linear-gradient(180deg,#121214,#0c0c10);
  padding:20px;
  border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.cp-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cp-brand .logo{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),#6f0a10);
  display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:var(--shadow)
}
.cp-brand .brand-text{color:var(--text)}
.cp-brand .brand-text .muted{display:block;font-size:12px;color:var(--muted);font-weight:500}

.cp-nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cp-navlink{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  color:var(--muted);transition:.22s ease; position:relative; overflow:hidden; border:1px solid transparent;
}
.cp-navlink .ico{width:20px;text-align:center}
.cp-navlink .txt{font-weight:600;letter-spacing:.2px}
.cp-navlink .chev{margin-left:auto;opacity:.5;transition:.22s}
.cp-navlink:hover{color:#fff;border-color:#33191b;background:linear-gradient(90deg,rgba(229,9,20,.15),rgba(0,0,0,0))}
.cp-navlink:hover .chev{transform:translateX(3px);opacity:.9}
.cp-navlink.active{background:linear-gradient(90deg,rgba(229,9,20,.25),rgba(0,0,0,0));color:#fff;border-color:#3b1b1e}

/* Main */
.cp-main{flex:1;display:flex;flex-direction:column}
.cp-topbar{
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);backdrop-filter: blur(6px)
}
.cp-breadcrumb{color:var(--muted);font-size:14px}
.cp-badge{display:inline-block;background:rgba(229,9,20,.2);color:#ffd3d6;border:1px solid #3b1b1e;border-radius:999px;padding:4px 10px;margin-right:6px}
.cp-user .cp-hello{color:var(--text);font-size:14px}
.cp-page{padding:24px;animation:slideUp .35s ease both}

/* Grid + Cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1200px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:16px;padding:18px;color:var(--text);
  box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate
}
.card.lift{transform:translateY(0);transition:.25s ease}
.card.lift:hover{transform:translateY(-4px)}
.card.warn{border-color:#4a3c1b}
.card-title{font-size:13px;color:var(--muted);margin-bottom:6px}
.card-value{font-size:22px;font-weight:800;letter-spacing:.2px}
.card .spark{
  position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:999px;
  background:radial-gradient(circle,rgba(229,9,20,.35),transparent 60%);
  filter:blur(12px);z-index:-1;animation:pulse 3s infinite ease-in-out
}

.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:900px){.row{grid-template-columns:1fr}}

/* Panels */
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)
}
.panel-head{
  padding:14px 16px;border-bottom:1px solid var(--border);
  color:#fff;font-weight:700;display:flex;justify-content:space-between;align-items:center
}
.panel-body{padding:16px;color:var(--text)}

/* Table */
.table{display:block;width:100%}
.table .table-row{
  display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr .8fr;
  gap:10px;padding:12px 10px;border-bottom:1px dashed #2c2c32;align-items:center
}
.table .table-row.head{color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.table .right{text-align:right}

/* Chips & Buttons & Alerts */
.chip{padding:4px 8px;border-radius:999px;border:1px solid #3b1b1e;background:rgba(255,255,255,.03);font-size:12px}
.chip.success{border-color:#1f3b2c;color:#b9ffdb;background:rgba(0,224,164,.12)}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(90deg,#1c1c21,#17171c);border:1px solid #2b2b31;color:#f0f0f0;
  transition:.22s ease; box-shadow:var(--shadow)
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.primary{background:linear-gradient(90deg,#6f0a10,#e50914);border-color:#7b141a;color:#fff}
.btn-green{background:linear-gradient(90deg,#0d4d2a,#0b3d21);border:1px solid #165b36;color:#caffea;}
.btn-green:hover{filter:brightness(1.05);transform:translateY(-2px)}

/* Forms */
.form{display:block}
.form.inline{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.form .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.form input,.form select{
  background:#121215;border:1px solid #24242a;border-radius:10px;color:#f0f0f0;
  padding:10px 12px;outline:none;transition:border .2s ease, transform .06s ease
}
.form input:focus,.form select:focus{border-color:#e50914;transform:translateY(-1px)}
.form-actions{margin-top:8px}

.alert{padding:10px 12px;border-radius:10px;margin-bottom:10px;border:1px solid #2b2b31}
.alert.success{background:rgba(0,224,164,.1);border-color:#1f3b2c;color:#caffea}
.alert.danger{background:rgba(229,9,20,.1);border-color:#3b1b1e;color:#ffd3d6}

/* Customers page helpers */
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* Items grid in debit modal */
#itemsWrap{display:block;background:#0f0f12;border:1px solid #24242a;border-radius:10px;padding:8px}
.item-row{display:grid;grid-template-columns:1.5fr .6fr .8fr .8fr .4fr;gap:8px;align-items:center;margin:6px 0}
.item-row.head{color:#ccc;font-size:12px;border-bottom:1px dashed #2b2b31;padding-bottom:6px;margin-bottom:8px}
.item-row input[type="text"], .item-row input[type="number"]{background:#121215;border:1px solid #24242a;border-radius:8px;color:#f0f0f0;padding:8px 10px;outline:none;width:100%}
.item-row .mini{padding:8px 10px;border-radius:8px;border:1px solid #2b2b31;background:#1c1c21;color:#eee}
.line-total{text-align:right}
.totals{margin-top:10px;text-align:right;font-size:16px}

/* === Global Modal Fix === */
body.modal-open { overflow: hidden; }

.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 10000;
  min-height: 100dvh;
}

.modal.is-open { display: flex; }

.modal-content{
  width: min(96vw, 820px);
  max-height: 90dvh;
  overflow: auto;
  margin: 0;
  background: #131316;
  border: 1px solid #24242a;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  color: #fff;
}

.modal-content h3{margin:0 0 12px}
.modal .close {position:absolute;top:10px;right:14px;font-size:20px;cursor:pointer;color:#bbb}
.modal .close:hover{color:#fff}

/* Animations */
.fade-in{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---- Customers tablosu: 6 kolon düzen ---- */
.customers-table .table-row{
  /* Kod | Ad | Telefon | E-posta | Bakiye | İşlem */
  grid-template-columns: 1fr 1.6fr 1.2fr 1.6fr .9fr 1fr;
  align-items: center;
}

.customers-table .table-row.head > div{
  color: var(--muted);
  font-weight: 600;
}

/* Bakiye ve İşlem hücrelerini sağa hizala */
.customers-table .table-row > div:nth-child(5),
.customers-table .table-row > div:nth-child(6){
  text-align: right;
}

/* Satır içindeki buton grubu */
.customers-table .table-row .actions-cell{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Dar ekranlarda 2 satıra kır (opsiyonel, daha okunaklı) */
@media (max-width: 900px){
  .customers-table .table-row{
    grid-template-columns: 1fr 1fr; /* 2 kolon */
    grid-row-gap: 8px;
  }
  .customers-table .table-row.head{ display: none; } /* mobilde başlığı gizle */
  .customers-table .table-row > div{
    text-align: left !important;
  }
  .customers-table .table-row > div:nth-child(1){ font-weight: 700; } /* Kod vurgulu */
}