body { background: #f8fafc; }
.container { max-width: 1300px; margin-top: 40px; }
h2 { color: #2d3748; }
.table { background: #fff; border-radius: 8px; overflow: hidden; min-width: 900px; }
.table th, .table td { vertical-align: middle; }
.btn { border-radius: 20px; }
form input, form button { border-radius: 10px; }
.alert { border-radius: 10px; }
.card { border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }

/* Responsive */
@media (max-width: 1300px) {
  .container { max-width: 98vw; }
  .table { min-width: 700px; }
}
@media (max-width: 900px) {
  .container { max-width: 100vw; padding: 0 2vw; }
  .table { min-width: 500px; font-size: 14px; }
  .card, .table { box-shadow: none; }
}
@media (max-width: 600px) {
  .container { max-width: 100vw; padding: 0 1vw; }
  .table { min-width: 350px; font-size: 12px; }
  .card { padding: 10px !important; }
  h2 { font-size: 1.2rem; }
  .btn, form input, form button { font-size: 13px; }
}
.table-responsive { overflow-x: auto; }

/* Modern alt kutular için */
.dashboard-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.dashboard-card {
  flex: 1 1 260px;
  min-width: 260px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 28px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
}
.dashboard-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-card .main-value {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0;
}
.dashboard-card .main-value-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}
.dashboard-card .badge {
  font-size: 1rem;
  padding: 0.4em 0.8em;
  margin-left: 8px;
}
.dashboard-card .progress {
  width: 100%;
  margin-top: 10px;
  background: #f1f3f6;
  border-radius: 10px;
}
.dashboard-card .progress-bar {
  font-size: 1rem;
  font-weight: 600;
}
.dashboard-card .progress-bar span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.dashboard-card .text-muted, .dashboard-card .text-danger {
  font-size: 1rem;
}
.dashboard-card .text-danger {
  font-weight: 500;
}
@media (max-width: 900px) {
  .dashboard-cards-row { flex-direction: column; gap: 16px; }
  .dashboard-card { min-width: 0; padding: 18px 10px 14px 10px; }
}