/* =========================================================
   NAURALIBRARY — AESTHETIC BRIGHT THEME
   ========================================================= */
:root{
  --peach:#FF9A62;
  --pink:#FF6FA0;
  --purple:#7C6BFF;
  --yellow:#FFD34D;
  --mint:#5FE3C0;
  --bg-1:#FFF7EE;
  --bg-2:#FDEFFB;
  --ink:#3A2E4D;
  --ink-soft:#7A6E93;
  --card:#FFFFFF;
  --radius:20px;
  --shadow:0 10px 30px rgba(124,107,255,0.12);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Poppins','Segoe UI',sans-serif;
  background:linear-gradient(135deg,var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--ink);
  min-height:100vh;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}

/* ---------- Star decoration background ---------- */
.stars-bg{
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.stars-bg span{
  position:absolute; color:var(--yellow); opacity:0.55;
  font-size:18px; animation:twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:0.25; transform:scale(0.85) rotate(0deg);}
  50%{opacity:0.85; transform:scale(1.15) rotate(15deg);}
}

/* ---------- Login Page ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; padding:20px;
}
.login-card{
  background:var(--card); border-radius:28px; box-shadow:var(--shadow);
  width:100%; max-width:400px; padding:40px 34px; text-align:center;
  position:relative; z-index:2;
}
.login-card .naura-logo{margin-bottom:10px;}
.login-card h1{
  font-size:22px; margin:6px 0 2px; letter-spacing:0.5px;
  background:linear-gradient(90deg,var(--peach),var(--pink),var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.login-card p.sub{color:var(--ink-soft); font-size:13px; margin-bottom:26px;}
.form-group{text-align:left; margin-bottom:16px;}
.form-group label{font-size:13px; font-weight:600; color:var(--ink); display:block; margin-bottom:6px;}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border-radius:14px; border:1.5px solid #F0E4FB;
  background:#FFFBF6; font-size:14px; font-family:inherit; color:var(--ink);
  transition:0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 4px rgba(124,107,255,0.12);
}
.btn{
  display:inline-block; border:none; cursor:pointer; padding:12px 22px;
  border-radius:14px; font-weight:600; font-size:14px; font-family:inherit;
  transition:0.2s; text-align:center;
}
.btn-primary{
  background:linear-gradient(90deg,var(--peach),var(--pink)); color:#fff; width:100%;
  box-shadow:0 8px 20px rgba(255,111,160,0.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,111,160,0.45);}
.btn-purple{background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff;}
.btn-mint{background:var(--mint); color:#0B5E4C;}
.btn-outline{background:#fff; border:1.5px solid var(--purple); color:var(--purple);}
.btn-danger{background:#FF5B70; color:#fff;}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:10px;}
.alert{
  padding:12px 16px; border-radius:14px; font-size:13px; margin-bottom:16px; text-align:left;
}
.alert-error{background:#FFE3E7; color:#B3283D; border:1px solid #FFC2CC;}
.alert-success{background:#E4FBF1; color:#0E7A56; border:1px solid #BDF2DC;}

/* ---------- Layout: sidebar + main ---------- */
.app{display:flex; min-height:100vh; position:relative; z-index:1;}
.sidebar{
  width:250px; background:linear-gradient(180deg,#7C6BFF, #FF6FA0);
  color:#fff; padding:26px 18px; flex-shrink:0;
  border-radius:0 32px 32px 0; box-shadow:var(--shadow);
}
.sidebar-logo{display:flex; align-items:center; gap:10px; margin-bottom:30px; padding:0 6px;}
.sidebar-logo h2{font-size:17px; margin:0; letter-spacing:0.3px;}
.sidebar-logo span{display:block; font-size:10.5px; opacity:0.85; font-weight:400;}
.sidebar nav ul li{margin-bottom:4px;}
.sidebar nav ul li a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px;
  font-size:13.5px; font-weight:500; color:#fff; opacity:0.88; transition:0.18s;
}
.sidebar nav ul li a:hover, .sidebar nav ul li a.active{
  background:rgba(255,255,255,0.22); opacity:1; transform:translateX(3px);
}
.sidebar .grp-label{font-size:10.5px; text-transform:uppercase; opacity:0.6; margin:18px 6px 6px; letter-spacing:1px;}

.main{flex:1; padding:26px 34px; min-width:0;}
.topbar{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
  background:var(--card); padding:16px 22px; border-radius:18px; box-shadow:var(--shadow);
}
.topbar h1{font-size:19px; margin:0;}
.topbar .user-chip{display:flex; align-items:center; gap:10px; font-size:13px;}
.topbar .user-chip img{width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--yellow);}

/* ---------- Cards / stats ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:24px;}
.stat-card{
  background:var(--card); border-radius:20px; padding:20px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat-card .num{font-size:28px; font-weight:700;}
.stat-card .lbl{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.stat-card .ico{
  position:absolute; right:16px; top:16px; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;
}

.panel{background:var(--card); border-radius:20px; padding:24px; box-shadow:var(--shadow); margin-bottom:22px;}
.panel h3{margin-top:0; font-size:16px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}

/* ---------- Table ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; padding:12px 14px; background:#FBF3FF; color:var(--ink);
  font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.4px;
}
thead th:first-child{border-radius:12px 0 0 12px;}
thead th:last-child{border-radius:0 12px 12px 0;}
tbody td{padding:12px 14px; border-bottom:1px solid #F3ECFB; vertical-align:middle;}
tbody tr:hover{background:#FFFBF3;}
.badge{padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block;}
.badge-green{background:#E4FBF1; color:#0E7A56;}
.badge-red{background:#FFE3E7; color:#B3283D;}
.badge-yellow{background:#FFF3D6; color:#9A6B00;}
.badge-purple{background:#EFEAFF; color:#5B47D6;}
.thumb{width:40px; height:40px; border-radius:10px; object-fit:cover;}

.search-bar{display:flex; gap:10px; flex-wrap:wrap;}
.search-bar input, .search-bar select{
  padding:10px 14px; border-radius:12px; border:1.5px solid #F0E4FB; font-size:13px; font-family:inherit;
}

/* ---------- Member card (kartu anggota) ---------- */
.kartu-anggota{
  width:340px; height:214px; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--purple) 0%, var(--pink) 55%, var(--peach) 100%);
  color:#fff; padding:16px 18px; box-shadow:0 14px 30px rgba(124,107,255,0.35);
  font-family:'Poppins',sans-serif;
}
.kartu-anggota .kartu-stars{position:absolute; inset:0; overflow:hidden;}
.kartu-anggota .kartu-stars span{position:absolute; color:rgba(255,255,255,0.55); font-size:14px;}
.kartu-anggota .kartu-head{display:flex; align-items:center; gap:8px; position:relative; z-index:2;}
.kartu-anggota .kartu-head b{font-size:13.5px; letter-spacing:0.3px;}
.kartu-anggota .kartu-head small{display:block; font-size:8.5px; opacity:0.85;}
.kartu-anggota .kartu-body{display:flex; gap:14px; margin-top:14px; position:relative; z-index:2;}
.kartu-anggota .kartu-foto{
  width:70px; height:86px; border-radius:10px; object-fit:cover; border:2.5px solid #fff;
  background:#fff;
}
.kartu-anggota .kartu-info p{margin:0 0 3px; font-size:11.5px; line-height:1.3;}
.kartu-anggota .kartu-info .nama{font-size:14.5px; font-weight:700; margin-bottom:4px;}
.kartu-anggota .kartu-foot{
  position:absolute; bottom:12px; left:18px; right:18px; display:flex; justify-content:space-between;
  align-items:center; font-size:9px; opacity:0.9; z-index:2;
}
.kartu-anggota .kartu-no{
  font-family:'Courier New',monospace; letter-spacing:1.5px; font-size:11px; font-weight:700;
}
@media print{
  body *{visibility:hidden;}
  .print-area, .print-area *{visibility:visible;}
  .print-area{position:absolute; left:0; top:0;}
  .no-print{display:none !important;}
}

/* ---------- OPAC ---------- */
.opac-hero{
  background:linear-gradient(120deg,var(--purple),var(--pink) 60%, var(--peach));
  border-radius:0 0 40px 40px; padding:60px 20px 90px; text-align:center; color:#fff; position:relative; z-index:1;
}
.opac-hero h1{font-size:30px; margin:14px 0 6px;}
.opac-hero p{opacity:0.9; font-size:14px;}
.opac-search{
  max-width:560px; margin:26px auto 0; background:#fff; border-radius:18px; padding:8px;
  display:flex; gap:8px; box-shadow:0 14px 34px rgba(0,0,0,0.18);
}
.opac-search input{flex:1; border:none; padding:12px 16px; border-radius:14px; font-size:14px; font-family:inherit;}
.opac-search input:focus{outline:none;}
.opac-search button{border:none; background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff; padding:0 22px; border-radius:14px; cursor:pointer; font-weight:600;}
.opac-body{max-width:1100px; margin:-50px auto 40px; padding:0 20px; position:relative; z-index:2;}
.book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin-top:20px;}
.book-card{background:#fff; border-radius:18px; padding:14px; box-shadow:var(--shadow); transition:0.2s;}
.book-card:hover{transform:translateY(-4px);}
.book-cover{width:100%; height:170px; object-fit:cover; border-radius:12px; background:#F3ECFB; margin-bottom:10px;}
.book-card h4{font-size:13.5px; margin:0 0 4px; line-height:1.3; min-height:34px;}
.book-card p{font-size:11.5px; color:var(--ink-soft); margin:2px 0;}
.opac-topbar{display:flex; justify-content:space-between; align-items:center; max-width:1100px; margin:0 auto; padding:20px 20px 0; position:relative; z-index:2;}
.opac-topbar .naura-logo{filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));}

.modal-detail{
  position:fixed; inset:0; background:rgba(58,46,77,0.55); display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.modal-box{background:#fff; border-radius:22px; max-width:560px; width:100%; padding:28px; max-height:86vh; overflow-y:auto;}

.pagination{display:flex; gap:6px; margin-top:18px; flex-wrap:wrap;}
.pagination a{padding:8px 13px; border-radius:10px; background:#FBF3FF; font-size:13px; font-weight:600; color:var(--purple);}
.pagination a.active{background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff;}

.foto-preview{width:110px; height:130px; object-fit:cover; border-radius:14px; border:2px solid #F0E4FB; margin-top:8px; background:#FBF3FF;}
.footer-note{text-align:center; color:var(--ink-soft); font-size:12px; padding:20px 0;}