/* ============================ BUTONLAR ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-s); border: 1px solid transparent;
  font: 600 var(--fs-13)/1.2 var(--font-body); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-danger  { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost   { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-ok      { background: var(--ok); color:#fff; }
.btn-sm { padding: 4px 10px; font-size: var(--fs-12); }
.btn-lg { padding: 10px 20px; font-size: var(--fs-14); }

/* ============================ BADGE / CHIP ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .02em;
  background: var(--neutral-bg); color: var(--slate); white-space: nowrap;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.7; }
.badge-ok   { background: var(--ok-bg);   color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err  { background: var(--err-bg);  color: var(--err); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-ink  { background: #E3ECE9; color: var(--ink); }
.badge.duz::before { display:none; }

/* diff çipi: eski → yeni */
.chip-diff { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-12);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-s);
  padding:3px 8px; margin:2px 4px 2px 0; }
.chip-diff .alan { font-weight:700; color:var(--slate); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:.04em; }
.chip-diff .eski { color:var(--muted); text-decoration: line-through; }
.chip-diff .ok-isareti { color:var(--line-2); }
.chip-diff .yeni { font-weight:600; color:var(--ink-text); }
.chip-diff.kritik { border-color: #F1B9C0; background: #FDF3F4; }
.chip-diff.kritik .alan { color: var(--red); }

/* ============================ KARTLAR ============================ */
.kart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--shadow-1); }
.kart-baslik { display:flex; align-items:center; gap:var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.kart-baslik h2 { font-size: var(--fs-16); color: var(--ink); }
.kart-baslik .sag { margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; }
.kart-govde { padding: var(--sp-5); }
.kart-alt { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line);
  display:flex; align-items:center; gap:var(--sp-3); background: var(--surface-2);
  border-radius: 0 0 var(--r-m) var(--r-m); }

.stat { padding: var(--sp-4) var(--sp-5); }
.stat .deger { font-family: var(--font-display); font-size: var(--fs-34); line-height:1; color: var(--ink); }
.stat .etiket { margin-top:6px; font-size: var(--fs-12); color: var(--muted); font-weight:600; }
.stat.uyari .deger { color: var(--warn); }
.stat.hata .deger  { color: var(--red); }

/* ============================ TABLO ============================ */
.tablo-kap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); box-shadow: var(--shadow-1); }
table.tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.tablo thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-2); color: var(--slate);
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tablo thead th.sirala { cursor: pointer; user-select:none; }
.tablo thead th.sirala:hover { color: var(--ink); }
.tablo tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tablo tbody tr:hover { background: #F2F7FB; }
.tablo tbody tr.secili { background: var(--info-bg); }
.tablo tbody tr.tiklanir { cursor: pointer; }
.tablo td.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tablo tr:last-child td { border-bottom: 0; }

.sayfalayici { display:flex; align-items:center; gap:var(--sp-3);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-12); color: var(--muted); }
.sayfalayici .btn { min-width: 34px; justify-content:center; }

/* filtre çubuğu */
.filtre-bar { display:flex; flex-wrap:wrap; gap: var(--sp-2); align-items:center;
  padding: var(--sp-3) 0 var(--sp-4); }
.filtre-bar .ara { flex: 1 1 260px; max-width: 380px; }

/* ============================ FORM ============================ */
.alan { display:flex; flex-direction:column; gap:5px; }
.alan label { font-size: var(--fs-12); font-weight: 700; color: var(--slate); }
.girdi, select.girdi, textarea.girdi {
  font: 400 var(--fs-13)/1.3 var(--font-body); color: var(--ink-text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
  padding: 7px 10px; min-height: 34px;
}
.girdi:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(11,143,88,.16); outline: none; }
.onay-kutusu { display:flex; align-items:center; gap:8px; font-size:var(--fs-13); cursor:pointer; }
.onay-kutusu input { width:16px; height:16px; accent-color: var(--ink); }

/* ============================ SEKMELER ============================ */
.sekmeler { display:flex; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: var(--sp-4); flex-wrap:wrap; }
.sekme { border:0; background:transparent; padding: 9px 14px; font: 600 var(--fs-13) var(--font-body);
  color: var(--muted); cursor:pointer; border-bottom: 2px solid transparent; margin-bottom:-2px;
  display:flex; align-items:center; gap:7px; }
.sekme:hover { color: var(--ink); }
.sekme.aktif { color: var(--ink); border-bottom-color: var(--primary); }
.sekme .say { background: var(--neutral-bg); border-radius: var(--r-pill);
  font-size: var(--fs-11); padding: 1px 7px; }
.sekme.aktif .say { background: var(--ink); color:#fff; }

/* ============================ MODAL / DRAWER ============================ */
.ortu { position: fixed; inset: 0; background: rgba(10,32,49,.45); z-index: 60;
  display: grid; place-items: center; animation: belir .12s ease; }
@keyframes belir { from { opacity: 0 } to { opacity: 1 } }
.modal { width: min(520px, calc(100vw - 32px)); background: var(--surface);
  border-radius: var(--r-l); box-shadow: var(--shadow-2); overflow: hidden; }
.modal-baslik { padding: var(--sp-4) var(--sp-5) 0; font-size: var(--fs-16); font-weight:700; color: var(--ink); }
.modal-govde { padding: var(--sp-3) var(--sp-5) var(--sp-4); font-size: var(--fs-13); color: var(--ink-text); }
.modal-alt { padding: var(--sp-3) var(--sp-5); background: var(--surface-2);
  display:flex; justify-content:flex-end; gap: var(--sp-2); }

.drawer-kap { position: fixed; inset: 0; z-index: 55; }
.drawer-kap .fon { position:absolute; inset:0; background: rgba(10,32,49,.35); }
.drawer { position: absolute; top:0; right:0; bottom:0; width: min(520px, 94vw);
  background: var(--surface); box-shadow: var(--shadow-2);
  display:flex; flex-direction:column; animation: kay .16s ease; }
@keyframes kay { from { transform: translateX(24px); opacity:.6 } to { transform:none; opacity:1 } }
.drawer-baslik { padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap: var(--sp-3); }
.drawer-baslik h2 { font-family: var(--font-display); font-size: var(--fs-20); color: var(--ink); }
.drawer-govde { padding: var(--sp-4) var(--sp-5); overflow-y: auto; flex:1; }
.drawer .kapat { margin-left:auto; }

.ozellik-listesi { display:grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: var(--fs-13); }
.ozellik-listesi dt { color: var(--muted); font-size: var(--fs-12); font-weight:600; padding-top:1px; }
.ozellik-listesi dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ============================ TOAST ============================ */
.toast-alan { position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-s);
  box-shadow: var(--shadow-2); font-size: var(--fs-13); max-width: 380px;
  animation: kay .16s ease; display:flex; gap:10px; align-items:center; }
.toast.hata { background: var(--err); }
.toast.ok { background: var(--ok); }

/* ============================ DURUM EKRANLARI ============================ */
.durum { display: grid; place-items: center; text-align: center;
  padding: var(--sp-8) var(--sp-4); color: var(--muted); }
.durum .ikon { font-size: 36px; margin-bottom: var(--sp-3); opacity:.85; }
.durum h3 { color: var(--ink); font-size: var(--fs-16); margin-bottom: 4px; }
.durum p { margin: 0 0 var(--sp-4); font-size: var(--fs-13); max-width: 420px; }

.yukleniyor { padding: var(--sp-5); }
.iskelet { position: relative; overflow: hidden; background: var(--neutral-bg);
  border-radius: var(--r-s); height: 14px; margin: 10px 0; }
.iskelet::after { content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: parla 1.1s infinite; }
@keyframes parla { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

.hata-kutu { border:1px solid #F1B9C0; background: var(--err-bg); color: var(--err);
  border-radius: var(--r-m); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-13); }
.hata-kutu b { display:block; margin-bottom:2px; }

.bos-tablo td { padding: 0 !important; }

/* dropzone */
.birak-alani { border: 2px dashed var(--line-2); border-radius: var(--r-m);
  padding: var(--sp-8); text-align:center; color: var(--muted); background: var(--surface);
  transition: border-color .12s, background .12s; cursor:pointer; }
.birak-alani.uzerinde { border-color: var(--info); background: var(--info-bg); }
.birak-alani .display { font-size: var(--fs-20); color: var(--ink); }

/* özet sınıf kutuları (import sonucu) */
.sinif-izgara { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--sp-3); }
.sinif-kutu { border:1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); }
.sinif-kutu .deger { font-family: var(--font-display); font-size: var(--fs-26); line-height:1; }
.sinif-kutu .etiket { font-size: var(--fs-11); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color: var(--muted); margin-top:4px; }
.sinif-kutu.s-new .deger { color: var(--ok); }
.sinif-kutu.s-changed .deger { color: var(--warn); }
.sinif-kutu.s-missing .deger { color: var(--red); }
.sinif-kutu.s-dupe .deger, .sinif-kutu.s-invalid .deger { color: var(--slate); }

/* ============================ KURBAN GRUPLARI / SEÇİM ============================ */
.grup-baslik td { background: var(--surface-2); border-top: 2px solid var(--line-2);
  font-weight: 700; color: var(--ink); padding: 7px 12px; }
.grup-baslik .hisse-rozet { font-family: var(--font-display); font-size: var(--fs-16);
  color: var(--ink); background: var(--neutral-bg); border-radius: var(--r-s); padding: 0 8px; margin-left: 6px; }
.grup-baslik .hisse-rozet.dolu { background: var(--ok-bg); color: var(--ok); }
.grup-baslik .hisse-rozet.asim { background: var(--err-bg); color: var(--err); }
.secim-bar[hidden] { display: none; }
.secim-bar { position: sticky; bottom: 12px; margin-top: var(--sp-4);
  background: var(--ink); color: #fff; border-radius: var(--r-m); box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); z-index: 30; }
.secim-bar .display { font-size: var(--fs-20); }
.satir-pasif td { opacity: .55; }
.mini-dosya { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line);
  font-size: var(--fs-12); }
.mini-dosya .rol { min-width: 62px; }