:root { --gap: 12px; }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Container */
.container {
    width: 100%;
    padding: 10px;
}

/* Grid */
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
    padding: 5px;
}

/* Mobil */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
}


* { box-sizing: border-box; }
body.bg { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#f5f6f8; color:#111; }
a { color: inherit; text-decoration: none; }

.container { padding: 16px; }
.container.narrow { max-width: 420px; margin: 0 auto; }

.card { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.card.action { display:block; }

h1 { margin: 0 0 12px; font-size: 22px; }
h2 { margin: 0 0 6px; font-size: 18px; }
p { margin: 0; color: #555; }

label { display:block; margin-top: 10px; margin-bottom: 6px; font-size: 14px; color:#333; }
input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #d9dbe1; font-size: 16px; }

.btn { display:inline-block; padding: 10px 12px; border-radius: 10px; background:#eef0f6; border: 1px solid #e2e4ec; }
.btn.primary { width:100%; margin-top: 14px; text-align:center; background:#111; color:#fff; border-color:#111; }

.alert { margin: 10px 0; padding: 10px; border-radius: 10px; }
.alert.error { background: #ffe9e9; border: 1px solid #ffd0d0; color: #8a1f1f; }

.page { display:flex; min-height: 100vh; }
.sidebar { width: 240px; padding: 14px; background:#fff; border-right: 1px solid #eceef3; }
.brand { font-weight: 700; margin-bottom: 12px; }
.nav a { display:block; padding: 10px; border-radius: 10px; }
.nav a:hover { background:#f3f4f7; }

.content { flex:1; padding: 14px; }
.topbar { display:flex; justify-content: space-between; align-items:center; margin-bottom: 14px; }
.who { color:#333; }

.grid { display:grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .sidebar { width: 200px; }
}
@media (max-width: 760px) {
  .page { display:block; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eceef3; }
  .grid { grid-template-columns: 1fr; }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}
button, input, select {
    height: 45px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 8px;
}
.menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .menu {
        display: none;
    }

    .menu.active {
        display: block;
    }

    .menu-toggle {
        display: block;
        background: #333;
        color: #fff;
        padding: 10px;
    }
}