*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f8f7;color:#19352b}.wrap{width:min(1120px,calc(100% - 32px));margin:auto}.ico{width:17px;height:17px;flex:0 0 17px}.title-icon{width:28px;height:28px;vertical-align:-5px;margin-right:6px}.login-logo-icon{width:27px;height:27px}.brand-icon{width:20px;height:20px}.card-logo-icon{width:6mm;height:6mm}header{background:#fff;border-bottom:1px solid #e2e9e5;position:sticky;top:0;z-index:5}.top{min-height:72px;display:flex;align-items:center;gap:22px}.logo{display:grid;grid-template-columns:38px auto;text-decoration:none;color:#173e30;align-items:center}.logo>span{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:#155b42;color:#fff;display:grid;place-items:center}.logo b{font-size:17px}.logo small{font-size:10px;color:#77877f}.top nav{display:flex;gap:5px;flex:1}.top nav a,.logout{color:#52665d;text-decoration:none;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:9px}.top nav a:hover,.top nav a.active{background:#edf5f1;color:#165a41}.logout{color:#8b4b4b}.main{padding:34px 0 60px}.hero{background:linear-gradient(135deg,#123f30,#1d6b4d);color:#fff;padding:34px;border-radius:22px;display:flex;justify-content:space-between;align-items:center}.hero h1,.pagehead h1{margin:6px 0 7px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:900;color:#8ab8a4}.hero .eyebrow{color:#b9d8cb}.primary,.outline,.inputrow button{border:0;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary,.inputrow button{background:#176347;color:#fff}.outline{background:#fff;border:1px solid #cbdad3;color:#285244}.wide{width:100%}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.stats div,.panel,.book{background:#fff;border:1px solid #e0e8e4;border-radius:16px;padding:20px}.stats div{position:relative}.stats b{display:block;font-size:27px}.stats>div>span:last-child{font-size:12px;color:#708078}.stat-icon{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:10px;background:#edf5f1;color:#176347;display:grid;place-items:center}.panel{margin:18px 0}.panel h2{margin:0;font-size:17px}.panel-title{display:flex;align-items:center;gap:8px;margin-bottom:15px;color:#234d3c}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.steps div{background:#f5f8f6;padding:14px;border-radius:12px}.steps b{width:32px;height:32px;border-radius:9px;background:#dfeee7;display:grid;place-items:center;margin-bottom:8px;color:#176347}.steps span{font-size:12px;font-weight:700}.pagehead{margin-bottom:18px}.pagehead p{color:#6d7e76}.narrow{max-width:720px}.inputrow{display:flex;gap:8px}.inputrow input,.member-select{flex:1;padding:12px 13px;border:1px solid #ccd9d3;border-radius:10px;font-size:14px;background:#fff}.member-select{width:100%;margin:6px 0 14px}.hint{margin-top:12px;font-size:11px;color:#84928b;display:flex;align-items:center;gap:6px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.book h3{margin:13px 0 5px}.book p{color:#73837b;font-size:12px}.book dl{display:grid;grid-template-columns:90px 1fr;font-size:12px}.book dt{color:#87958e}.status{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;background:#eef2f0}.status .ico{width:12px;height:12px}.status.active,.status.approved{background:#e1f2e9;color:#176347}.status.waiting{background:#fff0cf;color:#956500}.status.rejected{background:#fbe4e4;color:#a83a3a}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf1ef;vertical-align:top}td small{display:block;color:#839089;margin-top:3px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:13px;display:flex;align-items:center;gap:8px}.good{background:#e4f4eb;color:#155a41}.bad{background:#fbe8e8;color:#9a3535}.empty{background:#fff;border:1px dashed #ccd8d2;border-radius:14px;padding:25px;text-align:center;color:#819087;display:flex;align-items:center;justify-content:center;gap:8px}.loginbody{min-height:100vh;display:grid;place-items:center;background:#eef4f1}.loginbox{width:min(460px,calc(100% - 30px));background:#fff;border:1px solid #dde7e2;border-radius:22px;padding:34px;box-shadow:0 18px 60px rgba(20,60,45,.08)}.brandmark{width:48px;height:48px;border-radius:14px;background:#155b42;color:#fff;display:grid;place-items:center;margin-bottom:20px}.loginbox h1{margin:7px 0}.loginbox>p{color:#718078}.loginbox label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;margin:12px 0 7px}.found{background:#f1f7f4;border:1px solid #dceae3;border-radius:12px;padding:14px;margin:12px 0;display:flex;align-items:center;gap:11px}.found-icon{width:34px;height:34px;border-radius:10px;background:#176347;color:#fff;display:grid;place-items:center;font-weight:900}.found b,.found span,.found small{display:block}.found span{font-size:12px;margin-top:4px}.found small{font-size:10px;color:#789087;margin-top:4px}.cart-head{display:flex;align-items:center;justify-content:space-between}.cart-count{font-size:11px;font-weight:900;background:#edf5f1;color:#176347;border-radius:999px;padding:6px 10px}.cart-list{display:grid;gap:9px}.cart-item{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #e1e9e5;border-radius:12px;background:#fbfcfb}.cart-book-icon{width:42px;height:42px;border-radius:10px;background:#e6f2ec;color:#176347;display:grid;place-items:center}.cart-copy b,.cart-copy span,.cart-copy small{display:block}.cart-copy b{font-size:13px}.cart-copy span{font-size:11px;color:#6e7f77;margin-top:3px}.cart-copy small{font-size:10px;color:#87948e;margin-top:3px}.icon-danger{width:34px;height:34px;border-radius:9px;border:0;background:#fbe8e8;color:#a43c3c;display:grid;place-items:center;cursor:pointer}.submit-cart{margin-top:14px}.membercard{width:86mm;height:54mm;background:linear-gradient(145deg,#0e3e2d,#176347);color:#fff;border-radius:4mm;padding:5mm;box-shadow:0 15px 40px rgba(0,0,0,.16);margin:28px auto;display:flex;flex-direction:column;justify-content:space-between}.cardtop{display:flex;align-items:center;gap:3mm}.cardlogo{width:9mm;height:9mm;border-radius:2.5mm;background:#fff;color:#155b42;display:grid;place-items:center}.cardtop b,.cardtop small{display:block}.cardtop b{font-size:3.3mm}.cardtop small{font-size:2.1mm;opacity:.75;margin-top:1mm}.cardbody{display:flex;gap:4mm;align-items:center}.avatar{width:15mm;height:15mm;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:7mm;font-weight:900}.identity small,.identity strong{display:block}.identity small{font-size:1.7mm;opacity:.65;margin-top:1mm}.identity strong{font-size:2.7mm}.cardfoot{border-top:1px solid rgba(255,255,255,.2);padding-top:2mm;display:flex;justify-content:space-between;font-size:2.2mm}.printactions{text-align:center;display:flex;justify-content:center;gap:8px}footer{text-align:center;padding:25px;color:#8a9891;font-size:11px}@media(max-width:900px){.top{flex-wrap:wrap;padding:12px 0}.top nav{order:3;width:100%;overflow:auto;padding-bottom:5px}.top nav a{white-space:nowrap}.top nav a span{display:inline}.hero{align-items:flex-start;gap:20px;flex-direction:column}.stats,.cards,.steps{grid-template-columns:1fr}.inputrow{flex-direction:column}}@media(max-width:560px){.wrap{width:min(100% - 22px,1120px)}.top nav a{padding:8px}.top nav a span{display:none}.top nav .ico{width:20px;height:20px}.cart-item{grid-template-columns:38px 1fr auto}.membercard{transform:scale(.92);transform-origin:top center;margin-bottom:-10mm}}@media print{body{background:#fff}.noprint,header,footer{display:none!important}.main{padding:0}.membercard{margin:0;box-shadow:none;transform:none!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}@page{size:86mm 54mm;margin:0}}
/* Tombol Ajukan Peminjaman di Hero */
.hero .primary {
    background: #e4bb4f !important;
    color: #123f30 !important;
    border-color: #e4bb4f !important;
}

.hero .primary:hover {
    background: #f0c95b !important;
    color: #123f30 !important;
}
/* ===== MOBILE MENU FRIENDLY v23.1 ===== */
.mobile-menu-btn,.mobile-nav-head,.mobile-logout,.mobile-menu-overlay{display:none}
@media(max-width:900px){
 .top{min-height:64px;padding:9px 0;flex-wrap:nowrap;gap:10px}
 .logo{margin-right:auto}
 .top>.logout{display:none}
 .mobile-menu-btn{display:flex;width:42px;height:42px;border:1px solid #dbe6e0;background:#f7faf8;border-radius:12px;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;padding:0;z-index:31}
 .mobile-menu-btn span{display:block;width:18px;height:2px;background:#174d39;border-radius:3px;transition:.2s}
 .mobile-menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .mobile-menu-btn.open span:nth-child(2){opacity:0}
 .mobile-menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 .top nav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);background:#fff;z-index:30;padding:18px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px;overflow-y:auto;box-shadow:-18px 0 50px rgba(16,75,55,.16);transform:translateX(105%);transition:transform .24s ease;order:initial}
 .top nav.mobile-open{transform:translateX(0)}
 .mobile-nav-head{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;padding:3px 2px 12px;border-bottom:1px solid #edf1ef;margin-bottom:4px;color:#173e30}
 .mobile-nav-head b{font-size:16px}
 .mobile-nav-head button{width:36px;height:36px;border:0;border-radius:10px;background:#f1f5f3;color:#49645a;font-size:25px;line-height:1;cursor:pointer}
 .top nav>a{min-height:82px;padding:12px 8px!important;border:1px solid #e3ebe7;border-radius:14px!important;background:#fafcfb;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px!important;text-align:center;white-space:normal!important;color:#476158!important;font-size:11px!important}
 .top nav>a .ico{width:23px!important;height:23px!important;flex-basis:23px;color:#176347}
 .top nav>a span{display:block!important}
 .top nav>a.active{background:#eaf4ef!important;border-color:#cfe2d8;color:#155b42!important;box-shadow:inset 0 0 0 1px #d7e9df}
 .top nav>a:hover{background:#f0f6f3!important}
 .top nav .mobile-logout{display:flex!important;grid-column:1/-1;min-height:50px!important;flex-direction:row!important;background:#fff5f5!important;border-color:#f1dddd!important;color:#9b4242!important;margin-top:5px}
 .top nav .mobile-logout .ico{color:#a44444}
 .mobile-menu-overlay{display:block;position:fixed;inset:0;background:rgba(9,31,23,.42);z-index:29;opacity:0;visibility:hidden;transition:.2s}
 .mobile-menu-overlay.show{opacity:1;visibility:visible}
 body.menu-open{overflow:hidden}
}
@media(max-width:380px){
 .top nav{width:90vw;padding:15px}
 .top nav>a{min-height:74px}
}

/* ===== FIX MOBILE MENU CLICK v23.2 ===== */
@media(max-width:900px){
 header{z-index:100}
 .mobile-menu-btn{z-index:120;position:relative;pointer-events:auto}
 .top nav{z-index:115;pointer-events:auto}
 .top nav.mobile-open{pointer-events:auto}
 .top nav>a,.mobile-nav-head,.mobile-nav-head button{pointer-events:auto}
 .mobile-menu-overlay{z-index:90;pointer-events:none}
 .mobile-menu-overlay.show{pointer-events:auto}
}