.kaviRow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.kaviFilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kaviInput,.kaviSelect,.kaviTextarea{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text-main);min-height:40px}
.kaviInput{min-width:240px}
.kaviSelect{min-width:220px}
.kaviTextarea{width:100%}
.kaviInput:focus,.kaviSelect:focus,.kaviTextarea:focus{outline:none;border-color:rgba(59,130,246,.6);box-shadow:0 0 0 4px rgba(59,130,246,.12)}

.icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.icon svg{width:1em;height:1em;display:block}
.icon-small svg{width:16px;height:16px}
.icon-medium svg{width:18px;height:18px}

.kaviBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;border:none;cursor:pointer}
.kaviBtn:hover{filter:brightness(1.05)}
.kaviBtnSecondary{background:#64748B}
.kaviBtnDanger{background:#ef4444}

.kaviLayout{display:flex;min-height:100vh}
.kaviSidebar{width:270px;flex:0 0 270px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column}
.kaviLogo{padding:18px 16px;border-bottom:1px solid var(--border)}
.kaviLogoTitle{font-weight:900;letter-spacing:.2px;line-height:1.2}
.kaviLogoSub{margin-top:6px;color:var(--text-sub);font-size:12px}
.kaviSidebarNav{padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.kaviSidebarNav a{display:flex;align-items:center;gap:10px;color:var(--text-sub);text-decoration:none;padding:10px 12px;border-radius:12px;transition:var(--transition-fast);border:1px solid transparent}
.kaviSidebarNav a .icon{color:var(--text-sub)}
.kaviSidebarNav a.kaviActive .icon{color:var(--primary)}
.kaviSidebarNav a:hover{background:var(--bg-hover);color:var(--text-main);border-color:var(--border)}
.kaviSidebarNav a.kaviActive{background:rgba(59,130,246,.12);color:var(--text-main);border-color:rgba(59,130,246,.35)}
.kaviSidebarFooter{margin-top:auto;padding:12px 10px;border-top:1px solid var(--border)}
.kaviMain{flex:1;min-width:0}
.kaviTopbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.kaviPageHeader{font-weight:900}
.kaviContent{
    /* max-width:1200px;
    margin:0 auto; */
    padding:18px
}

.filterButtons a, .filterButtons button, .kaviFilters input, .kaviFilters select {
    width: 100% !important;
}
.kaviFilters{
    flex-wrap:nowrap;
    width: 100%;
}

.filterButtons {
    display: flex;
    gap: 10px;
    width: 100%;
}
 
.kaviCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.kaviCard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kaviCardTitle{color:var(--text-sub);font-size:13px;margin-bottom:8px}
.kaviCardValue{font-size:26px;font-weight:800}
.kaviPageTitle{font-size:22px;font-weight:800;margin:4px 0 14px}
.kaviHint{color:var(--text-sub);font-size:14px}

.kaviAlert{padding:10px 12px;border-radius:12px;margin:0 0 12px;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);background:#fff}
.kaviAlert strong{display:block;font-size:14px}
.kaviAlertText{font-size:14px;color:var(--text-sub)}
.kaviAlertSuccess{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.kaviAlertSuccess .kaviAlertText{color:#065f46}
.kaviAlertError{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.kaviAlertError .kaviAlertText{color:#991b1b}
.kaviAlertWarning{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}
.kaviAlertWarning .kaviAlertText{color:#92400e}
.kaviAlertInfo{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}
.kaviAlertInfo .kaviAlertText{color:#1e3a8a}

.kaviFormGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.kaviFieldTitle{color:var(--text-sub);font-size:13px;margin-bottom:8px;font-weight:600}
.kaviFieldError{margin-top:6px;color:#b91c1c;font-size:13px}
.kaviFormActions{display:flex;gap:10px;margin-top:14px}

.kaviTableWrap{overflow:auto}
.kaviTable{width:100%;border-collapse:collapse;min-width:980px}
.kaviTable th{padding:10px;border-bottom:1px solid var(--border);text-align:left;color:var(--text-sub);font-weight:700;font-size:13px}
.kaviTable td{padding:10px;border-bottom:1px solid rgba(148,163,184,.35);color:var(--text-main);vertical-align:middle}
.kaviTableEmpty{padding:14px;color:var(--text-sub)}
.kaviTdActions{display:flex;gap:8px}

.kaviBadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text-sub);font-size:12px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.kaviBadgeNeutral{background:rgba(100,116,139,.10);border-color:rgba(100,116,139,.28);color:#334155}
.kaviBadgeInfo{background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.28);color:#1e3a8a}
.kaviBadgeSuccess{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.28);color:#065f46}
.kaviBadgeWarning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.30);color:#92400e}
.kaviBadgeDanger{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28);color:#991b1b}

.kaviBtn.kaviBtnSecondary{
  width: 100% !important;
}
@media (max-width: 980px){
  .kaviSidebar{width:220px;flex-basis:220px}
}
@media (max-width: 760px){
  .kaviLayout{flex-direction:column}
  .kaviSidebar{width:100%;flex-basis:auto;border-right:none;border-bottom:1px solid var(--border)}
  .kaviInput{min-width:180px}
  .kaviFilters{flex-wrap: wrap;}
}
.kaviAddBtn {
  width: max-content !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.kaviOffcanvasOverlay{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:270px; /* desktop’ta sadece içerik alanını karart */
  background:rgba(15,23,42,.25);
  z-index:60;
}

.kaviOffcanvas{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  min-width:420px;
  max-width:100%;
  background:var(--bg-elevated);
  box-shadow:-16px 0 40px rgba(15,23,42,.35);
  z-index:61;
  display:flex;
  flex-direction:column;
}

.kaviOffcanvasBody {
  background: white;
  height: 100vh;
}

.kaviOffcanvasHeader {
  background: white;
}

.kaviOffcanvasHeader{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.kaviOffcanvasTitle{
  font-weight:600;
  font-size:15px;
}

.kaviOffcanvasBody{
  padding:16px 18px 20px;
  overflow:auto;
}

.kaviOffcanvasLoading{
  padding:16px;
  font-size:14px;
  color:var(--text-sub);
}

/* offcanvas başlangıçta tamamen gizli olsun (HTML'deki hidden attribute ile) */
.kaviOffcanvasOverlay[hidden],
.kaviOffcanvas[hidden]{
  display:none !important;
}

@media (max-width: 640px){
  .kaviOffcanvas{
    width:100%;
  }
}

@media (max-width: 760px){
  .kaviOffcanvasOverlay{
    left:0; /* mobilde tam ekran */
  }
}

.text-right{
  text-align: right !important;
  text-wrap-mode: nowrap !important;
}

.kaviPagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kaviPagination ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.kaviPagination li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.kaviPagination li a,
.kaviPagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid #E5E7EB;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.kaviPagination li a:hover {
  background: #F8FAFC;
  border-color: #3B82F6;
  color: #3B82F6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.kaviPagination li.kaviPaginationActive span {
  background: #3B82F6;
  color: #fff;
  border-color: #3B82F6;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.kaviPagination li a:disabled,
.kaviPagination li span:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: #F3F4F6;
  color: #94A3B8;
}

.kaviPagination li:first-child a,
.kaviPagination li:first-child span {
  padding: 0 16px;
  font-weight: 600;
}

.kaviPagination li:last-child a,
.kaviPagination li:last-child span {
  padding: 0 16px;
  font-weight: 600;
}