/* ============================= */
/* GLOBAL / BODY */
/* ============================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:Georgia, serif;
  color:#2e1065;
}

.dashboard-bg{
  min-height:100vh;
  background:linear-gradient(135deg,#ede9fe,#c7d2fe);
}

.page-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.content{
  flex:1;
  padding:20px;
}

/* ============================= */
/* HEADER */
/* ============================= */
.header{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(6px);
  border-bottom:2px solid #c4b5fd;
}

/* LOGO PUISI ANIMASI */
.logo-animasi{
  font-size:34px;
  font-weight:bold;
  letter-spacing:6px;
}

.logo-animasi span{
  display:inline-block;
  color:#5b21b6;
  animation:breathe 3s ease-in-out infinite;
}

.logo-animasi span:nth-child(2){animation-delay:.2s}
.logo-animasi span:nth-child(3){animation-delay:.4s}
.logo-animasi span:nth-child(4){animation-delay:.6s}
.logo-animasi span:nth-child(5){animation-delay:.8s}

@keyframes breathe{
  0%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.15)}
  100%{opacity:.6;transform:scale(1)}
}

/* ============================= */
/* BANNER */
/* ============================= */
.banner img{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:0 0 22px 22px;
  box-shadow:0 15px 35px rgba(0,0,0,.2);
  margin-bottom:30px;
}

/* ============================= */
/* DASHBOARD */
/* ============================= */
.dashboard{
  text-align:center;
}

.quote{
  font-style:italic;
  font-size:16px;
  opacity:.75;
  margin-bottom:35px;
}

/* MENU DASHBOARD */
.menu-dashboard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
  max-width:1000px;
  margin:0 auto;
}

.menu-dashboard a{
  background:rgba(255,255,255,.7);
  padding:22px;
  border-radius:20px;
  text-decoration:none;
  color:#4c1d95;
  font-size:16px;
  box-shadow:0 15px 30px rgba(0,0,0,.15);
  transition:.4s;
  position:relative;
  overflow:hidden;
}

/* ANIMASI DAUN */
.menu-dashboard a::after{
  content:"🍃";
  position:absolute;
  right:18px;
  bottom:14px;
  font-size:22px;
  opacity:.4;
  transition:.4s;
}

.menu-dashboard a:hover{
  transform:translateY(-8px);
  background:#ede9fe;
}

.menu-dashboard a:hover::after{
  transform:rotate(20deg) scale(1.4);
  opacity:.85;
}

/* ============================= */
/* FOOTER */
/* ============================= */
.footer{
  margin-top:auto;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(6px);
  text-align:center;
  padding:18px;
  font-size:14px;
  color:#4c1d95;
  border-top:2px solid #c4b5fd;
}

.footer em{
  opacity:.75;
  font-style:italic;
}

/* ===================== */
/* CATATAN MAKNA TENGAH */
/* ===================== */
.center-menu{
  grid-column:1 / -1;
  max-width:260px;
  margin:0 auto;
}

/* ===== CRUD GLOBAL STYLE ===== */
.crud-container{
  max-width:900px;
  margin:40px auto;
  padding:25px;
  background:rgba(0,0,0,.5);
  border-radius:15px;
  box-shadow:0 0 25px rgba(124,58,237,.4);
}

.crud-container h2{
  text-align:center;
  margin-bottom:20px;
}

/* FORM */
.crud-container form{
  display:grid;
  gap:12px;
}
.crud-container input,
.crud-container textarea,
.crud-container select{
  padding:10px;
  border-radius:8px;
  border:none;
  outline:none;
}

/* BUTTON */
.crud-container button{
  background:#7c3aed;
  color:white;
  border:none;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  transition:.3s;
}
.crud-container button:hover{
  background:#a78bfa;
}

/* TABLE */
.crud-container table{
  width:100%;
  margin-top:25px;
  border-collapse:collapse;
}
.crud-container th,
.crud-container td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.2);
  text-align:left;
}
.crud-container tr:hover{
  background:rgba(124,58,237,.15);
}

/* LINK AKSI */
.crud-container a{
  color:#c4b5fd;
  text-decoration:none;
}
.crud-container a:hover{
  text-decoration:underline;
}
/* ===================== */
/* RUANG AKSARA */
/* ===================== */
.ruang-aksara{
  color:#fff;
}

.keterangan{
  text-align:center;
  margin-bottom:25px;
  opacity:.8;
  font-style:italic;
}

/* ===================== */
/* NOTIF / POPUP */
/* ===================== */
.popup{
  position: relative;           /* BUKAN fixed */
  margin: 15px 0 20px 0;         /* jarak atas-bawah */
  padding: 10px 16px;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #c8facc;
  border-radius: 10px;
  font-size: 14px;
  animation: fadeNotif 4s ease forwards; /* lebih lama */
}

/* animasi muncul & hilang pelan */
@keyframes fadeNotif{
  0%{
    opacity:0;
    transform: translateY(-8px);
  }
  10%{
    opacity:1;
    transform: translateY(0);
  }
  85%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}

/* ===================== */
/* RAK BUKU */
/* ===================== */
.rak-buku{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:30px;
}

/* ===================== */
/* BUKU */
/* ===================== */
.buku{
  background:rgba(255,255,255,.1);
  padding:18px;
  border-radius:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.3);
  position:relative;
  animation: fadeUp .6s ease;
}

.buku h4{
  margin-bottom:5px;
  color:#c4b5fd;
}

.buku small{
  font-size:12px;
  opacity:.7;
}

.buku p{
  margin-top:10px;
  font-size:14px;
  line-height:1.6;
}

/* ===================== */
/* AKSI */
/* ===================== */
.buku .aksi{
  margin-top:12px;
  display:flex;
  gap:10px;
}

.buku .aksi a{
  font-size:13px;
  color:#c4b5fd;
}

/* ===================== */
/* INLINE EDIT FIX */
/* ===================== */

/* sembunyikan form edit default */
.buku .form-inline-edit{
  display:none;
  width:100%;
}

/* saat mode editing */
.buku.editing .buku-view{
  display:none;
}

.buku.editing .form-inline-edit{
  display:block;
}

/* form edit full lebar & estetik */
.buku .form-inline-edit input,
.buku .form-inline-edit textarea,
.buku .form-inline-edit select{
  width:100%;
  margin-bottom:10px;
  padding:10px;
  border-radius:8px;
  border:none;
  font-size:14px;
}

/* tombol edit */
.buku .form-inline-edit button{
  padding:8px 14px;
  border-radius:8px;
  border:none;
  font-size:13px;
  cursor:pointer;
}

.buku .form-inline-edit .btn-cancel{
  background:#6c5ce7;
  color:#fff;
}

/* ===================== */
/* Tombol Kembali ke Dashboard */
/* ===================== */
.tombol-nav {
  margin-bottom: 15px;
  text-align: right;
}

.tombol-nav .btn-back {
  padding: 6px 12px;
  background: #6c5ce7;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  transition: 0.2s;
}

.tombol-nav .btn-back:hover {
  background: #5a4bcf;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */
@media(max-width:768px){
  .rak-buku{
    grid-template-columns:1fr;
  }
}
/* ===================== */
/* UKM PAGE (ANTI CRUD) */
/* ===================== */
.ukm-page{
  max-width:900px;
  margin:40px auto;
  padding:30px;
  background:linear-gradient(135deg,#fefce8,#ecfccb);
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  color:#14532d;
}

/* ===================== */
/* NARASI UKM */
/* ===================== */
.narasi-ukm h2{
  animation: fadeup .8s ease;
  background:linear-gradient(90deg,#14532d,#5b4636);

  /* standar + webkit */
  background-clip:text;
  -webkit-background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  text-align:center;
}

.narasi-ukm h3{
  margin-top:25px;
  color:#3f2f1f;
}

.narasi-ukm p,
.narasi-ukm li{
  color:#5b4636;
  line-height:1.7;
}

.narasi-ukm ul{
  padding-left:18px;
}

/* ===================== */
/* FORM GABUNG UKM */
/* ===================== */
.form-join{
  margin-top:40px;
  background:rgba(255,255,255,.85);
  padding:25px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.form-join h3{
  text-align:center;
  color:#14532d;
  margin-bottom:15px;
}

.form-join input,
.form-join textarea{
  width:100%;
  margin-bottom:12px;
  padding:10px;
  border-radius:10px;
  border:1px solid #d6c7a1;
  font-family:Georgia, serif;
  color:#14532d;
}

.form-join textarea{
  resize:vertical;
}

.form-join button{
  width:100%;
  background:linear-gradient(135deg,#4d7c0f,#a16207);
  color:white;
  border:none;
  padding:12px;
  border-radius:12px;
  font-weight:bold;
  cursor:pointer;
  transition:.3s;
}

.form-join button:hover{
  opacity:.9;
}

/* ===================== */
/* NOTIF UKM */
/* ===================== */
.ukm-page .popup{
  position:fixed;
  top:30px;
  right:30px;
  background:linear-gradient(135deg,#4d7c0f,#a16207);
  color:white;
  padding:16px 22px;
  border-radius:18px;
  font-weight:500;
  box-shadow:0 15px 30px rgba(0,0,0,.25);
  animation: slideIn .6s ease;
  z-index:9999;
}
/* Tombol Kembali ke Dashboard / Logout / Hapus */
.tombol-nav {
    margin-bottom: 15px;
    text-align: right; /* posisikan ke kanan */
}

.tombol-nav .btn-back {
    padding: 6px 12px;
    background: #6c5ce7; /* ungu lembut */
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    transition: 0.2s;
}

.tombol-nav .btn-back:hover {
    background: #5a4bcf; /* sedikit gelap saat hover */
}
/* ===================== */
/* PENJAGA KATA / RAK BUKU */
/* ===================== */
.anggota-page{
  max-width:1000px;
  margin:40px auto;
  padding:30px;
  color:#5b4636; /* teks subjudul tetap coklat */
}

.anggota-page h2{
  text-align:center;
  background:linear-gradient(90deg,#14532d,#5b4636);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  font-size:2em;
}

.sub{
  text-align:center;
  color:#5b4636; /* teks subjudul tetap coklat */
  margin-bottom:30px;
  font-style:italic;
}

/* FORM */
.form-anggota{
  background:linear-gradient(135deg,#D0F0C0,#C7EA46);
  padding:25px;
  border-radius:16px;
  margin-bottom:40px;
  box-shadow:0 8px 20px rgba(199,234,70,.4);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.form-anggota input,
.form-anggota select,
.form-anggota textarea{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:none;
  font-size:1em;
  outline:none;
  font-family:Georgia, serif;
  color:#000; /* teks hitam */
  background:rgba(0,0,0,.2);
}

.form-anggota textarea{
  resize:vertical;
  min-height:80px;
}

.form-anggota button{
  padding:12px;
  border:none;
  border-radius:12px;
  font-weight:bold;
  cursor:pointer;
  background:linear-gradient(135deg,#fde68a,#fff);
  color:#14532d;
  transition:.3s;
}
.form-anggota button:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(255,255,255,.5);
}

/* GRID / KARTU ANGGOTA */
.rak-buku{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

/* KARTU */
.buku{
  background:linear-gradient(135deg,#D0F0C0,#C7EA46);
  padding:20px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 10px 25px rgba(199,234,70,.3);
  transition:.3s;
}
.buku:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 30px rgba(199,234,70,.5);
}

/* UBAH WARNA TEKS DI KARTU SAMA SEPERTI FORM INPUT */
.buku h4,
.buku small,
.buku .emoji,
.buku .harapan,
.buku .puisi{
  color:#000; /* teks hitam sama seperti form input */
}

.buku .puisi{
  font-size:0.9em;
  margin-bottom:10px;
}

.buku .aksi{
  display:flex;
  justify-content:center;
  gap:10px;
}
.buku .aksi a{
  text-decoration:none;
  color:#14532d;
  background:linear-gradient(135deg,#fde68a,#fff);
  padding:5px 10px;
  border-radius:8px;
  font-size:0.85em;
  transition:.3s;
}
.buku .aksi a:hover{
  background:linear-gradient(135deg,#fff,#fde68a);
}

/* AVATAR BULAT */
.avatar{
  width:70px;
  height:70px;
  margin:0 auto 10px;
  border-radius:50%;
  background:linear-gradient(135deg,#fde68a,#a7f3d0); /* tetap kuning ke ungu */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:bold;
  color:#14532d;
  cursor:pointer;
  transition: all 0.3s ease;
}
.avatar:hover{
  transform:scale(1.15);
  box-shadow:0 5px 20px rgba(255,255,255,.5);
}
.avatar:active{
  transform:scale(0.95);
  box-shadow:0 2px 10px rgba(255,255,255,.5);
}
.notif{
    text-align:center;
    background:linear-gradient(135deg,#fde68a,#fff);
    color:#14532d;
    padding:12px;
    border-radius:12px;
    margin-bottom:20px;
    font-weight:bold;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
/* Tombol Kembali ke Dashboard / Logout */
.tombol-nav {
    margin-bottom: 15px;
    text-align: right; /* posisikan ke kanan */
}

.tombol-nav .btn-back {
    padding: 6px 12px;
    background: #6c5ce7; /* ungu lembut */
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    transition: 0.2s;
}

.tombol-nav .btn-back:hover {
    background: #5a4bcf; /* sedikit gelap saat hover */
}
/* ===================== */
/* JEJAK KEGIATAN PAGE */
/* ===================== */
.jejak-kegiatan-page {
    max-width:900px;
    margin:40px auto;
    padding:30px;
    background:linear-gradient(135deg,#f0f8ff,#dbeafe); /* putih gradasi biru muda */
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    color:#1e3a8a;
}

/* FORM KEGIATAN */
.jejak-kegiatan-page .form-join{
    margin-top:30px;
    background:rgba(255,255,255,.95);
    padding:25px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.jejak-kegiatan-page .form-join input,
.jejak-kegiatan-page .form-join textarea,
.jejak-kegiatan-page .form-join select{
    width:100%;
    margin-bottom:12px;
    padding:12px;
    border-radius:12px;
    border:1px solid #93c5fd;
    font-family:Georgia, serif;
    color:#1e3a8a;
    background:linear-gradient(135deg,#ffffff,#bfdbfe);
}

.jejak-kegiatan-page .form-join textarea{
    resize:vertical;
    min-height:60px;
}

.jejak-kegiatan-page .form-join button{
    width:100%;
    background:linear-gradient(135deg,#6366f1,#4f46e5);
    color:white;
    border:none;
    padding:12px;
    border-radius:12px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}
.jejak-kegiatan-page .form-join button:hover{
    opacity:.9;
}

/* LIST KEGIATAN */
.jejak-kegiatan-page .rak-buku{
    margin-top:30px;
}
.jejak-kegiatan-page .buku{
    background:rgba(255,255,255,.95);
    padding:20px;
    margin-bottom:20px;
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.jejak-kegiatan-page .buku h4{
    color:#1e3a8a;
    margin-bottom:6px;
}
.jejak-kegiatan-page .buku small{
    color:#2563eb;
}
.jejak-kegiatan-page .buku p{
    margin:6px 0;
}
.jejak-kegiatan-page .buku .aksi a{
    margin-right:12px;
    color:#6366f1;
    text-decoration:none;
}
.jejak-kegiatan-page .buku .aksi a:hover{
    text-decoration:underline;
}

/* Tombol Kembali ke Dashboard */
.tombol-nav{
    margin-bottom:15px;
    text-align:right;
}
.tombol-nav .btn-back{
    padding:6px 12px;
    background:#6366f1;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-size:13px;
    transition:.2s;
}
.tombol-nav .btn-back:hover{
    background:#4f46e5;
}
/* ===================== */
/* Laporan / Review Page CSS */
/* ===================== */

/* Container Page */
.ukm-page.laporan-page{
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    background: linear-gradient(135deg,#fefce8,#ecfccb);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
    color: #14532d;
    font-family: Georgia, serif;
}

/* Tombol Kembali ke Dashboard */
.tombol-nav {
    text-align:right;
    margin-bottom:15px;
}
.tombol-nav .btn-back {
    padding:6px 12px;
    background:#4d7c0f;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-size:13px;
    transition:.2s;
}
.tombol-nav .btn-back:hover {
    background:#6c9e1f;
}

/* Table Review / Laporan */
.laporan-table, .rak-buku{
    width:100%;
    margin-top:20px;
    border-collapse:collapse;
}
.laporan-table th, .laporan-table td,
.rak-buku .buku h4, .rak-buku .buku small {
    border:1px solid #c4b5fd;
    padding:10px;
}
.laporan-table th{
    background:linear-gradient(135deg,#d9f99d,#86efac);
}
.view-refleksi{
    white-space:pre-wrap;
}

/* Rak Buku (Review Puisi) */
.rak-buku{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.buku{
    background:#fff;
    padding:12px;
    border-radius:12px;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Form Inline Edit */
.form-inline-edit{
    display:none;
    background:#fdf6e3;
    padding:12px;
    border-radius:12px;
    margin-top:10px;
    border:1px solid #e6d8b5;
}
.form-inline-edit input,
.form-inline-edit textarea{
    width:100%;
    padding:8px;
    margin-bottom:8px;
    border-radius:8px;
    border:1px solid #d6c7a1;
}
.form-inline-edit button{
    padding:8px 14px;
    border-radius:8px;
    border:none;
    font-weight:bold;
    cursor:pointer;
}
.form-inline-edit button[name="update"]{
    background:linear-gradient(135deg,#4d7c0f,#a16207);
    color:#fff;
}
.btn-cancel{background:#ccc}

/* Button */
.btn-edit{
    background:linear-gradient(135deg,#facc15,#ca8a04);
    color:#fff;
    border:none;
    padding:6px 12px;
    border-radius:8px;
    margin-right:6px;
    cursor:pointer;
}
.btn-hapus{
    background:#e11d48;
    color:#fff;
    padding:6px 12px;
    border-radius:8px;
    text-decoration:none;
    margin-right:6px;
}

/* Toggle Inline Edit */
.buku.editing .buku-view{display:none}
.buku.editing .form-inline-edit{display:block}

/* Popup Notifikasi */
.popup{
    position:fixed;
    top:30px;
    right:30px;
    background:linear-gradient(135deg,#4d7c0f,#a16207);
    color:white;
    padding:16px 22px;
    border-radius:18px;
    font-weight:500;
    box-shadow:0 15px 30px rgba(0,0,0,.25);
    animation: slideIn .6s ease;
    z-index:9999;
}

@keyframes slideIn{
    0%{opacity:0; transform:translateY(-20px);}
    100%{opacity:1; transform:translateY(0);}
}
/* ===== AUTH (LOGIN & REGISTER) ===== */
.auth-bg{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#ede9fe,#c7d2fe);
  font-family:Georgia, serif;
}

.auth-card{
  width:360px;
  background:white;
  padding:30px;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  text-align:center;
  animation: fadeUp .8s ease;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.judul{
  margin-bottom:5px;
  color:#4c1d95;
}

.tagline{
  font-size:14px;
  margin-bottom:20px;
  opacity:.7;
}

.auth-card input{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid #ddd;
}

.password-box{
  position:relative;
}
.password-box span{
  position:absolute;
  right:12px;
  top:10px;
  cursor:pointer;
}

.auth-card button{
  width:100%;
  padding:10px;
  background:#7c3aed;
  border:none;
  border-radius:12px;
  color:white;
  cursor:pointer;
}

.auth-card button:hover{
  background:#6d28d9;
}

.ajak{
  margin-top:15px;
  font-size:14px;
}
.ajak a{
  color:#7c3aed;
  text-decoration:none;
}

.error{
  background:#fee2e2;
  color:#991b1b;
  padding:8px;
  border-radius:8px;
  margin-bottom:10px;
}

/* ===== DAUN BERGUGURAN ===== */
.leaves{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

.leaves span{
  position:absolute;
  top:-50px;
  font-size:22px;
  animation: fall linear infinite;
  opacity:.7;
}

/* POSISI & KECEPATAN BEDA-BEDA */
.leaves span:nth-child(1){
  left:10%;
  animation-duration:12s;
}
.leaves span:nth-child(2){
  left:30%;
  animation-duration:15s;
  font-size:26px;
}
.leaves span:nth-child(3){
  left:50%;
  animation-duration:18s;
}
.leaves span:nth-child(4){
  left:70%;
  animation-duration:14s;
  font-size:24px;
}
.leaves span:nth-child(5){
  left:90%;
  animation-duration:20s;
}

/* ANIMASI JATUH */
@keyframes fall{
  0%{
    transform:translateY(0) rotate(0deg);
  }
  100%{
    transform:translateY(110vh) rotate(360deg);
  }
}

/* PASTIKAN CARD DI ATAS DAUN */
.auth-card{
  position:relative;
  z-index:2;
}
/* ============================= */
/* RESPONSIVE GLOBAL UNTUK HP */
/* ============================= */
@media (max-width: 768px) {

  /* Banner */
  .banner img {
    max-height:160px;
  }

  /* Quote */
  .quote {
    font-size:13px;
    margin-bottom:15px;
  }

  /* Menu Dashboard */
  .menu-dashboard {
    grid-template-columns:1fr;
    gap:12px;
    padding:0 8px;
  }

  .menu-dashboard a {
    font-size:14px;
    padding:14px;
  }

  .center-menu {
    max-width:100%;
  }

  /* Container halaman */
  .crud-container,
  .ukm-page,
  .jejak-kegiatan-page,
  .anggota-page {
    padding:16px;
    margin:15px 8px;
    border-radius:14px;
  }

  /* Table */
  .laporan-table,
  .crud-container table {
    font-size:12px;
  }

  /* LOGIN CARD (INI YANG PENTING) */
  .auth-card {
    width:90%;
    padding:20px;
    border-radius:16px;
  }

  .judul {
    font-size:18px;
  }

  .tagline {
    font-size:12px;
  }

  .auth-card input,
  .auth-card button {
    font-size:14px;
    padding:10px;
  }
}