:root{
  --brand:#6e0ba6; --brand-d:#58087d; --bg:#0f1220; --card:#111428; --text:#e9e9f1; --muted:#a8adc2; --grid:#1f2545;
  --ok:#16a34a; --warn:#ca8a04; --bad:#ef4444; --chip:#1b2042; --border:#252b53; --th:#0f1330; --cell:#0c1030;
  --th-text:#a7afff; --accent:#c6cbff;
}
body.light{
  --bg:#f6f7fb; --card:#ffffff; --text:#12131a; --muted:#5b6176; --grid:#e6e8f0; --border:#e3e5ee; --th:#eef1fb; --cell:#ffffff; --th-text:#445; --chip:#eef1fb; --accent:#334;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg));
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial
}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
.title{display:flex;gap:10px;align-items:center}
.brand{font-weight:700;letter-spacing:.3px}
.toolbar,.stylebar{display:flex;gap:8px;flex-wrap:wrap}
button,.btn{
  background:var(--brand);
  border:none;
  color:white;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600
}
button:hover{background:var(--brand-d)}
.ghost{background:#1a1e3a;border:1px solid var(--border);color:#d6d9ff}
body.light .ghost{background:#fff;color:#334}
.row{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
input[type="text"], .formula{
  flex:1 1 280px;
  background:var(--th);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace
}
.label{font-size:12px;color:var(--muted)}
.sheet{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  min-height:55vh;
  -webkit-overflow-scrolling:touch;
}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
thead th{
  position:sticky;
  top:0;
  background:var(--th);
  color:var(--th-text);
  text-align:center;
  z-index:3
}
th, td{
  border-right:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
  padding:6px 10px;
  min-width:92px;
  max-width:320px
}
th:first-child, td:first-child{
  position:sticky;
  left:0;
  background:var(--th);
  color:var(--th-text);
  z-index:4
}
td{background:var(--cell);vertical-align:middle}
td.sel{outline:2px solid var(--brand);outline-offset:-2px}
td.inputting{background:rgba(110,11,166,.08)}
td[error="true"]{background:rgba(239,68,68,.12)}
.status{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.chip{
  background:var(--chip);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  color:var(--accent);
  font-size:12px
}
.footer{margin:18px 0;color:var(--muted);font-size:12px}
.hidden{display:none}
.toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--chip);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:999px;
  color:var(--accent)
}
.toggle input{accent-color:var(--brand)}

/* Autocomplete */
.ac{position:relative;flex:1}
.ac-list{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--th);
  border:1px solid var(--border);
  border-radius:10px;
  margin-top:6px;
  z-index:9;
  max-height:220px;
  overflow:auto
}
.ac-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--border)}
.ac-item:hover,.ac-item.active{background:rgba(110,11,166,.13)}

/* Column & row resizer */
.col-resizer{
  position:absolute;
  top:0;
  right:-3px;
  width:6px;
  height:100%;
  cursor:col-resize;
  z-index:10
}
th{position:sticky}
th[data-col]{position:relative}
.row-resizer{
  position:absolute;
  bottom:-3px;
  left:0;
  right:0;
  height:6px;
  cursor:row-resize;
  z-index:10;
}

/* Simple dialog */
dialog{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  padding:16px;
  max-width:520px
}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog form{display:grid;gap:10px}
dialog label{font-size:12px;color:var(--muted)}
dialog input, dialog select{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--th);
  color:var(--text)
}
.danger{background:#b42318}

/* Format select look */
.stylebar select{
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--accent);
  padding:9px 10px;
  border-radius:10px
}
.hotkeys{font-size:12px;color:var(--muted)}

/* 🔹 Tarih filtresi barı */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px;
  padding:10px 12px;
  margin:4px 0 8px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--border);
}
.filter-bar .field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:140px;
}
.filter-bar input[type="date"]{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--th);
  color:var(--text);
}
.filter-info{
  margin-left:auto;
  font-size:12px;
}

/* === Mobil Optimizasyon – v4.2 === */
@media (max-width: 600px){
  body{font-size:14px}
  header{flex-direction:column;align-items:flex-start}
  .toolbar{display:flex;flex-wrap:wrap;gap:6px}
  .toolbar button,.toolbar .btn{padding:8px 10px;font-size:13px;border-radius:8px}
  .stylebar{display:none} /* Küçük ekranda stil bar gizlensin */
  th,td{min-width:70px;padding:5px}
  input[type="text"],.formula{font-size:13px;padding:8px 10px}
  .filter-bar{
    flex-direction:column;
    align-items:flex-start;
  }
  .filter-info{
    margin-left:0;
  }
}

/* Küçük ekranda sadece temel butonlar görünsün */
@media (max-width:480px){
  .toolbar button:not(#saveBtn):not(#loadBtn):not(#themeToggle){display:none}
}

/* Dokunmatik aktif durum */
td:active{
  background:rgba(110,11,166,.12);
}