@media (max-width: 768px) {
  /* Bu class olan tablolar kart gibi olur */
  table.table-mobile thead { display: none !important; }

  table.table-mobile,
  table.table-mobile tbody,
  table.table-mobile tr,
  table.table-mobile td {
    display: block !important;
    width: 100% !important;
  }

  table.table-mobile tr {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }

  table.table-mobile td {
    border: 0 !important;
    padding: 6px 0 !important;
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  table.table-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgba(0,0,0,.55);
    flex: 0 0 45%;
    max-width: 45%;
  }

  table.table-mobile td > * {
    flex: 1 1 auto;
    max-width: 55%;
  }

  table.table-mobile td.text-end,
  table.table-mobile td .text-end {
    text-align: left !important;
  }

  table.table-mobile td.actions {
    justify-content: flex-end;
  }

  table.table-mobile a {
    word-break: break-word;
  }
}