/* ════════════════════════════════════════════════════
   1. GLOBAL VARIABLES & FONTS
════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Color Palette Modern */
  --primary: #4f46e5;         /* Indigo 600 */
  --primary-hover: #4338ca;   /* Indigo 700 */
  --primary-light: #e0e7ff;   /* Indigo 100 */
  
  --bg-body: #f8fafc;         /* Slate 50 - Sangat nyaman di mata */
  --bg-surface: #ffffff;      
  
  --text-dark: #0f172a;       /* Slate 900 */
  --text-muted: #64748b;      /* Slate 500 */
  
  --border-color: #e2e8f0;    /* Slate 200 */
  
  /* Sidebar & Topbar */
  --topbar-bg: #1e1b4b;       /* Indigo 950 */
  --sidebar-w: 240px;
  
  /* Shadows untuk kesan premium */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-focus: 0 0 0 4px rgba(79, 70, 229, 0.15);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* ════════════════════════════════════════════════════
   2. RESET & BASE
════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  background: var(--bg-body); 
  color: var(--text-dark); 
  font-size: 14px; 
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; outline: none; }
input, select, textarea { font-family: inherit; outline: none; }
.hidden { display: none !important; }

/* Custom Scrollbar Premium */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ════════════════════════════════════════════════════
   3. LOGIN SCREEN
════════════════════════════════════════════════════ */
#login-screen {
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  padding: 24px;
}
.login-wrap { width: 100%; max-width: 400px; }
.login-logo {
  display: flex; align-items: center; gap: 16px; margin-bottom: 32px;
  justify-content: center; text-align: left;
}
.login-icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.1); 
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.login-title { font-size: 24px; font-weight: 800; color: white; letter-spacing: -0.5px; }
.login-sub   { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; }

.login-card { 
  background: var(--bg-surface); 
  border-radius: var(--radius-xl); 
  padding: 40px 32px; 
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4); 
}
.form-label { 
  font-size: 12px; font-weight: 700; color: var(--text-muted); 
  margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: 0.5px;
}
.form-input {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color); font-size: 14px; font-weight: 500;
  transition: all 0.2s ease; color: var(--text-dark); background: #f8fafc;
}
.form-input:focus, .form-select:focus { 
  border-color: var(--primary); 
  background: white;
  box-shadow: var(--shadow-focus);
}
.form-select {
  padding: 10px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--border-color);
  font-size: 13px; font-weight: 500; background: white; color: var(--text-dark);
  cursor: pointer; min-width: 150px; transition: all 0.2s ease;
}
textarea.form-input { resize: vertical; min-height: 100px; line-height: 1.5; }
.err-msg { color: #dc2626; font-size: 13px; font-weight: 600; margin-top: 14px; text-align: center; background: #fee2e2; padding: 10px; border-radius: 8px; }

/* ════════════════════════════════════════════════════
   4. BUTTONS
════════════════════════════════════════════════════ */
.btn-primary {
  padding: 10px 20px; border-radius: var(--radius-sm); border: none;
  background: var(--primary); color: white; font-size: 14px; font-weight: 600;
  transition: all 0.2s ease; white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}
.btn-primary:hover { 
  background: var(--primary-hover); 
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px -2px rgba(79, 70, 229, 0.4);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-secondary {
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color);
  background: white; color: var(--text-dark); font-size: 13px; font-weight: 600;
  transition: all 0.2s ease; box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--bg-body); border-color: #cbd5e1; }

.btn-danger {
  padding: 8px 14px; border-radius: var(--radius-sm); border: none;
  background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 700;
  transition: all 0.2s ease;
}
.btn-danger:hover { background: #fecaca; transform: translateY(-1px); }

.btn-edit {
  padding: 8px 14px; border-radius: var(--radius-sm); border: none;
  background: var(--primary-light); color: var(--primary-hover); font-size: 12px; font-weight: 700;
  transition: all 0.2s ease;
}
.btn-edit:hover { background: #c7d2fe; transform: translateY(-1px); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-logout {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 99px; border: none;
  background: rgba(255,255,255,0.1); color: white; font-size: 13px; font-weight: 600;
  transition: all 0.2s ease; backdrop-filter: blur(5px);
}
.btn-logout:hover { background: rgba(239, 68, 68, 0.9); color: white; }

/* ════════════════════════════════════════════════════
   5. TOPBAR
════════════════════════════════════════════════════ */
.topbar {
  height: 64px; background: var(--topbar-bg); display: flex;
  align-items: center; justify-content: space-between;
  padding: 0 24px; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.tb-left { display: flex; align-items: center; gap: 14px; }
.tb-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)); 
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.tb-title { font-size: 16px; font-weight: 800; color: white; letter-spacing: -0.3px;}
.tb-sub   { font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 500;}
.tb-right { display: flex; align-items: center; gap: 20px; }
.tb-guru-info { display: flex; flex-direction: column; align-items: flex-end; }
.tb-nama  { font-size: 14px; font-weight: 700; color: white; }
.tb-kelas-badge {
  font-size: 10px; font-weight: 700; color: var(--topbar-bg);
  background: #a5b4fc; border-radius: 99px; padding: 3px 10px; margin-top: 2px;
}

/* ════════════════════════════════════════════════════
   6. DASHBOARD LAYOUT & SIDEBAR
════════════════════════════════════════════════════ */
.dashboard-body { display: flex; padding-top: 64px; min-height: 100vh; }

.g-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg-surface); border-right: 1px solid var(--border-color);
  height: calc(100vh - 64px); position: fixed; top: 64px; left: 0;
  overflow-y: auto; padding: 20px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.g-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md); border: none; background: transparent;
  color: var(--text-muted); font-size: 14px; font-weight: 600; text-align: left; width: 100%;
  transition: all 0.2s ease; 
}
.g-nav-item svg { flex-shrink: 0; stroke: currentColor; transition: transform 0.2s ease; }
.g-nav-item:hover { 
  background: var(--bg-body); color: var(--text-dark); 
}
.g-nav-item:hover svg { transform: scale(1.1); }
.g-nav-item.active { 
  background: var(--primary-light); color: var(--primary-hover); 
}

/* ════════════════════════════════════════════════════
   7. MAIN CONTENT & HEADER
════════════════════════════════════════════════════ */
.g-content {
  flex: 1; margin-left: var(--sidebar-w); padding: 32px 40px;
  min-height: calc(100vh - 64px); position: relative;
}
.g-page { display: none; animation: fadeIn 0.4s ease; }
.g-page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.page-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.page-title { font-size: 24px; font-weight: 800; color: var(--text-dark); margin-bottom: 4px; letter-spacing: -0.5px;}
.page-desc  { font-size: 14px; color: var(--text-muted); font-weight: 500;}
.header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }

/* ════════════════════════════════════════════════════
   8. CARDS & PANELS
════════════════════════════════════════════════════ */
.card {
  background: var(--bg-surface); border-radius: var(--radius-lg); 
  border: 1px solid var(--border-color);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-subhead {
  padding: 16px 20px; font-size: 14px; font-weight: 700; color: var(--text-dark);
  border-bottom: 1px solid var(--border-color); display: flex; align-items: center;
  background: rgba(248, 250, 252, 0.5);
}

.twin-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Stats Row */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px; margin-bottom: 8px;
}
.stat-card {
  background: var(--bg-surface); border-radius: var(--radius-lg); padding: 20px;
  border: 1px solid var(--border-color); text-align: center;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary-light); }
.stat-num { font-size: 32px; font-weight: 800; letter-spacing: -1px;}
.stat-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px;}

/* ════════════════════════════════════════════════════
   9. DATA TABLES
════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 14px 20px; font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  background: #f8fafc; text-align: left; border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.data-table td {
  padding: 16px 20px; font-size: 14px; font-weight: 500; color: var(--text-dark);
  border-bottom: 1px solid #f1f5f9; vertical-align: middle;
  transition: background 0.2s ease;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #f8fafc; }
.table-search-row { display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); background: #f8fafc; }
.table-search-row .form-input { flex: 1; }

/* ════════════════════════════════════════════════════
   10. BADGES & PROGRESS BARS
════════════════════════════════════════════════════ */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px;}
.badge-green  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0;}
.badge-amber  { background: #fef3c7; color: #b45309; border: 1px solid #fde68a;}
.badge-red    { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca;}
.badge-blue   { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd;}
.badge-purple { background: #f3e8ff; color: #6d28d9; border: 1px solid #e9d5ff;}

.prog-bar-wrap { width: 100%; height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; min-width: 100px; }
.prog-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #818cf8); border-radius: 99px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* ════════════════════════════════════════════════════
   11. SPECIFIC CARDS (Karya, SKL, Jadwal, Kurikulum)
════════════════════════════════════════════════════ */
/* Karya */
.karya-grid-guru { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 16px; }
.karya-card-guru {
  background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.3s ease; display: flex; flex-direction: column;
}
.karya-card-guru:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary-light); }
.karya-card-guru img { width: 100%; height: 150px; object-fit: cover; }
.karya-nopic-guru { width: 100%; height: 150px; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); display: flex; align-items: center; justify-content: center; }
.karya-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.karya-card-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin: 10px 0 6px; line-height: 1.4; }
.karya-card-meta  { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 12px; flex: 1; }
.karya-card-acts  { display: flex; gap: 8px; margin-top: auto;}

/* SKL */
.skl-card-guru {
  background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  padding: 20px; box-shadow: var(--shadow-sm); transition: all 0.2s ease;
}
.skl-card-guru:hover { box-shadow: var(--shadow-md); border-color: #cbd5e1;}
.skl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.skl-card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); }
.skl-card-acts  { display: flex; gap: 8px; flex-shrink: 0; }
.skl-sub-guru   { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--border-color); padding-top: 16px;}
.skl-sub-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f8fafc; border-radius: var(--radius-sm); border: 1px solid #f1f5f9;}
.skl-sub-name   { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-dark); }

/* Jadwal */
.jadwal-day-block {
  background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.jadwal-day-head {
  background: #f8fafc; padding: 14px 20px; font-size: 15px; font-weight: 800; color: var(--primary);
  border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px;
}
.jadwal-item { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; transition: background 0.2s; }
.jadwal-item:hover { background: #f8fafc; }
.jadwal-item:last-child { border-bottom: none; }
.jadwal-time { font-size: 13px; font-weight: 700; color: var(--primary); width: 120px; flex-shrink: 0; background: var(--primary-light); padding: 6px 10px; border-radius: 6px; text-align: center;}
.jadwal-mapel { font-size: 15px; font-weight: 700; color: var(--text-dark); flex: 1; }
.jadwal-guru  { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 4px;}
.jadwal-acts  { display: flex; gap: 8px; }

/* Kurikulum */
.bab-card-guru {
  background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.2s;
}
.bab-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid var(--border-color);
  cursor: pointer; transition: background 0.2s;
}
.bab-card-head:hover { background: var(--primary-light); }
.bab-card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); }
.bab-card-meta  { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 8px;}
.bab-card-acts  { display: flex; gap: 8px; align-items: center; }
.materi-sub-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.materi-sub-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; 
  background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02); transition: all 0.2s;
}
.materi-sub-item:hover { border-color: var(--primary-light); transform: translateX(4px); box-shadow: var(--shadow-md);}
.materi-sub-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--text-dark); }
.materi-sub-acts { display: flex; gap: 8px; }

/* ════════════════════════════════════════════════════
   12. MODALS & OVERLAYS
════════════════════════════════════════════════════ */
.modal-wrap {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
  z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--bg-surface); border-radius: var(--radius-xl); width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn { 
  from { opacity: 0; transform: scale(0.95) translateY(20px); } 
  to { opacity: 1; transform: scale(1) translateY(0); } 
}
.modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; 
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-radius: var(--radius-xl) var(--radius-xl) 0 0; z-index: 10;
}
.modal-title { font-size: 18px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.3px;}
.modal-close-btn { 
  background: #f1f5f9; border: none; border-radius: 50%; width: 32px; height: 32px; 
  cursor: pointer; font-size: 14px; color: var(--text-muted); transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.modal-close-btn:hover { background: #e2e8f0; color: var(--text-dark); transform: rotate(90deg);}
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--border-color);}

/* Loading */
.loading-overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(2px);
  z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: var(--radius-lg);
}
.loading-spinner {
  width: 44px; height: 44px; border: 4px solid var(--primary-light);
  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; color: var(--primary); font-weight: 700; letter-spacing: 0.5px;}

/* Toast */
.toast {
  position: fixed; bottom: 32px; right: 32px;
  background: var(--text-dark); color: white; padding: 14px 24px;
  border-radius: var(--radius-md); font-size: 14px; font-weight: 600;
  z-index: 600; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; align-items: center; gap: 10px;
}
.toast.toast-success { background: #15803d; }
.toast.toast-error   { background: #b91c1c; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Empty State */
.empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-size: 14px; font-weight: 500; background: #f8fafc; border-radius: var(--radius-md); border: 2px dashed var(--border-color);}
.empty-state svg { margin-bottom: 12px; opacity: 0.5; }

/* Inline Form */
.inline-form-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px; background: var(--primary-light); border-radius: var(--radius-md); border: 1px dashed var(--primary); margin-top: 10px;
}
.inline-form-row .form-input { flex: 1; min-width: 120px; padding: 10px 14px; font-size: 13px; }
.inline-form-row .form-select { min-width: 140px; padding: 10px 14px; font-size: 13px; }

/* ════════════════════════════════════════════════════
   13. RESPONSIVE & MOBILE LAYOUT (Perbaikan Layar Geser)
════════════════════════════════════════════════════ */
/* Kunci Layar Utama agar tidak bisa digeser ke samping (Anti-Horizontal Scroll Global) */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Tombol Hamburger & Overlay */
.mobile-menu-btn {
  display: none; background: transparent; border: none; padding: 6px; 
  cursor: pointer; transition: 0.2s ease; border-radius: 8px;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.1); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); 
  backdrop-filter: blur(4px); z-index: 150; opacity: 0; transition: opacity 0.3s ease;
}

@media (max-width: 1024px) {
  .twin-panel { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* ── TOPBAR ── */
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  .tb-sub { display: none; }
  .tb-logo-icon { width: 30px; height: 30px; }
  .tb-guru-info { display: none; } 
  .tb-right { gap: 10px; }

  /* ── LAYOUT UTAMA ── */
  .g-content { 
    margin-left: 0; 
    padding: 16px 12px; 
    width: 100%; 
    max-width: 100vw; 
    box-sizing: border-box;
    overflow-x: hidden; /* Pastikan konten tidak mendorong layar */
  }
  .page-title { font-size: 20px; }
  .page-header-row { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ── SIDEBAR DRAWER ── */
  .g-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; 
    z-index: 200; transform: translateX(-100%); 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15); padding-top: 24px;
  }
  .g-sidebar.open { transform: translateX(0); }
  .sidebar-overlay.active { display: block; opacity: 1; pointer-events: auto; }

  /* ── PERBAIKAN TABEL (Scroll HANYA di dalam Tabel) ── */
  .card { 
    width: 100%; 
    max-width: 100vw; /* Paksa kartu tetap selebar layar */
    overflow: hidden; 
  } 
  
  .data-table { 
    display: block !important; 
    width: 100% !important; 
    max-width: 100% !important;
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch; /* Efek usap mulus di HP */
    white-space: nowrap; /* Mencegah kolom tergencet berantakan */
  }
  .data-table th, .data-table td { padding: 12px 14px; } 

  /* ── FORM & FILTER ── */
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .filter-row { flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; }
  .filter-row select, .filter-row input, .filter-row button { width: 100%; box-sizing: border-box; }
  
  /* Kolom Pencarian Tabel Siswa agar tidak menabrak samping */
  .table-search-row { flex-direction: column; width: 100%; box-sizing: border-box; }
  .table-search-row .form-input, .table-search-row .form-select { width: 100%; box-sizing: border-box; }

  .header-actions { width: 100%; justify-content: flex-start; }
  .header-actions select, .header-actions button { flex: 1; width: 100%; }

  /* ── MODAL BOTTOM-SHEET ── */
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal-box { 
    border-radius: 24px 24px 0 0; max-height: 85vh; 
    animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .modal-hd { border-radius: 24px 24px 0 0; }
  
  @keyframes slideUpModal {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* ── PERBAIKAN CARD KURIKULUM & JADWAL ── */
  .bab-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bab-card-acts { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  
  .materi-sub-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .materi-sub-acts { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  
  .jadwal-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .jadwal-acts { width: 100%; justify-content: flex-start; }
  .skl-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .skl-card-acts { width: 100%; justify-content: flex-start; }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .stat-card { padding: 16px 12px; }
  .stat-num { font-size: 24px; }
  .stat-lbl { font-size: 10px; }
  .beranda-progres-grid { grid-template-columns: 1fr; }
  .karya-grid-guru { grid-template-columns: 1fr; }
  .btn-primary, .btn-secondary, .btn-danger, .btn-edit, .btn-sm { font-size: 11px; padding: 8px 12px; }
}

/* ════════════════════════════════════════════════════
   14. BERANDA WIDGETS
════════════════════════════════════════════════════ */
.beranda-progres-grid { 
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 20px; padding: 16px 20px 20px; 
}
.kelas-prog-item { display: flex; flex-direction: column; gap: 10px; }
.kelas-prog-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 800; color: var(--text-dark); }
.beranda-list { display: flex; flex-direction: column; }
.beranda-list-item { 
  display: flex; justify-content: space-between; align-items: center; 
  padding: 16px 20px; border-bottom: 1px solid var(--border-color); font-size: 14px; transition: background 0.2s ease;
}
.beranda-list-item:hover { background: var(--bg-body); }
.beranda-list-item:last-child { border-bottom: none; }
.beranda-list-item .bli-title { font-weight: 700; color: var(--text-dark); }
.beranda-list-item .bli-meta { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }