@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{--ink:#182c3b;--muted:#71808c;--navy:#102b40;--teal:#168c82;--mint:#e9f5f1;--gold:#e8b65b;--line:#e3e9e8;--paper:#f7faf9}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:#fff;font-size:15px}a{color:var(--teal);text-decoration:none}.topbar{height:76px;padding:0 max(calc((100% - 1160px)/2),24px);display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid #edf0ef;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}.brand-logo{width:46px;height:46px;object-fit:contain;display:block;flex:0 0 46px;border-radius:8px;background:#fff;padding:2px}.footer-logo{background:#fff}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--mint);font-size:22px}.nav{display:flex;align-items:center;gap:25px}.nav a{color:#51616b;font-size:13px;font-weight:600}.nav a.active,.nav a:hover{color:var(--teal)}.nav .nav-login{padding:11px 16px;background:var(--navy);color:white;border-radius:8px}.menu-toggle{display:none;background:none;border:0;font-size:24px}.hero{background:radial-gradient(circle at 83% 25%,#236e69 0,#164a51 23%,transparent 24%),linear-gradient(115deg,#102b40,#173c4b 72%,#1b5a57);color:white;min-height:440px;display:flex;align-items:center;overflow:hidden}.hero-inner{max-width:1160px;width:100%;margin:auto;padding:68px 24px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#b9d9d0}.eyebrow.dark{color:var(--teal)}h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;margin-top:0}h1{font-size:43px;line-height:1.16;max-width:650px;margin:15px 0}h2{font-size:27px;margin-bottom:9px}h3{font-size:16px}.hero p{color:#d5e3e0;max-width:560px;line-height:1.7}.searchbar{display:flex;background:white;border-radius:10px;padding:6px;max-width:610px;margin-top:28px;box-shadow:0 14px 35px #071d2b55}.searchbar input,.catalog-search input{border:0;outline:0;flex:1;padding:14px;font:inherit;min-width:0}.searchbar button,.btn{border:0;background:var(--teal);color:white;padding:13px 20px;border-radius:7px;font-weight:700;cursor:pointer;font:inherit}.hero-points{display:flex;gap:22px;margin-top:23px;font-size:12px;color:#d4e6e1}.container{max-width:1160px;margin:auto;padding-left:24px;padding-right:24px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:62px 0 24px}.section-head p,.lead{color:var(--muted);line-height:1.7}.text-link{font-size:13px;font-weight:700}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.book-card{display:flex;gap:17px;border:1px solid var(--line);border-radius:12px;padding:15px;background:white;transition:.2s}.book-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #183c3810}.cover{width:105px;min-width:105px;height:145px;border-radius:6px;background:linear-gradient(145deg,#d9eee7,#8ec4b6);display:flex;align-items:center;justify-content:center;font:800 58px 'Plus Jakarta Sans';color:#347c71;position:relative;box-shadow:inset 7px 0 #ffffff66}.cover small{position:absolute;bottom:10px;font:600 9px 'DM Sans';letter-spacing:1px}.book-info{min-width:0}.book-info h3{margin:10px 0 5px;line-height:1.35}.book-info p{font-size:12px;color:var(--muted);margin:5px 0 13px}.book-info a,.article-card a{font-size:12px;font-weight:700}.tag{display:inline-block;background:var(--mint);color:#267b70;padding:5px 8px;border-radius:20px;font-size:10px;font-weight:700}.stock{font-size:11px!important}.feature-band{margin:68px 0;background:#eaf4f0;border-radius:16px;padding:38px 48px;display:flex;align-items:center;justify-content:space-between}.feature-band h2{max-width:480px;margin-top:12px}.feature-band p{max-width:570px;color:#62736f;line-height:1.7}.feature-icon{font-size:90px;opacity:.8}.btn-light{display:inline-block;background:var(--navy);margin-top:8px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin:65px 0}.compact{margin:0 0 20px}.compact h2{font-size:22px}.event-row{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}.event-row h3{margin:0 0 5px}.event-row p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.date-box{width:54px;height:58px;border-radius:9px;background:var(--mint);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--teal)}.date-box b{font-size:22px}.date-box small{font-size:9px;font-weight:700}.article-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}.article-row small{display:block;color:var(--muted);margin-top:6px;font-size:11px}.article-icon{width:38px;height:38px;border-radius:10px;background:#fff3dc;color:#c58d2d;display:grid;place-items:center}.page-content{padding-top:55px;padding-bottom:80px;min-height:65vh}.page-content>h1{font-size:36px}.catalog-search{display:flex;border:1px solid var(--line);padding:5px;border-radius:9px;margin:25px 0 30px;max-width:700px}.catalog-search .btn{padding:10px 17px}.detail-layout{display:grid;grid-template-columns:220px 1fr;gap:38px;margin-top:30px;max-width:800px}.cover-large{width:220px;height:300px;font-size:100px}.detail-layout p{line-height:1.8;color:#627078}.btn-outline{display:inline-block;background:white;color:var(--teal);border:1px solid #9dc9c0;margin-right:8px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}.service-card,.article-card,.contact-card{border:1px solid var(--line);border-radius:13px;padding:25px;line-height:1.7}.service-card{font-size:30px}.service-card h3{font-size:18px;margin:15px 0 5px}.service-card p,.article-card p{font-size:13px;color:var(--muted)}.narrow{max-width:850px}.form-card{border:1px solid var(--line);padding:25px;border-radius:12px;background:white;display:flex;flex-direction:column;gap:9px}.form-card label,.admin-form label{font-size:12px;font-weight:700;margin-top:8px}.form-card input,.form-card textarea,.form-card select,.admin-form input,.admin-form textarea{border:1px solid #dce4e2;border-radius:7px;padding:12px;font:inherit;width:100%;background:white}.form-card textarea,.admin-form textarea{min-height:90px}.form-card .btn{margin-top:10px}.notice,.error{padding:12px 15px;border-radius:8px;margin:15px 0;font-size:13px}.notice{background:#e9f6ed;color:#287447}.error{background:#fff0ef;color:#a33}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.article-card{margin:15px 0}.article-detail{max-width:760px;line-height:1.9}.contact-card{display:flex;justify-content:space-between;align-items:center;background:var(--mint);margin-top:25px}.contact-emoji{font-size:75px}footer{background:#102b40;color:#d6e2e0;padding:45px 0 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:65px;padding-bottom:35px}.footer-brand{color:white}.footer-grid p{font-size:12px;line-height:1.8;color:#b8c9c6;max-width:380px}.footer-grid h3{color:white;font-size:14px}.footer-grid>div>a:not(.brand){display:block;color:#b8c9c6;font-size:12px;margin:10px 0}.footer-bottom{text-align:center;border-top:1px solid #ffffff18;padding:17px;font-size:11px;color:#9eb2ae}
.admin-body{background:#f4f7f6;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#102b40;padding:25px 17px;display:flex;flex-direction:column;gap:7px}.sidebar .brand{color:white;margin-bottom:28px}.sidebar small{color:#77958f;font-size:10px;letter-spacing:1.5px;padding:0 12px 8px}.sidebar>a:not(.brand){color:#bdceca;padding:12px;border-radius:7px;font-size:13px}.sidebar>a.side-active,.sidebar>a:not(.brand):hover{background:#1e4b54;color:white}.admin-main{margin-left:245px;padding:35px;max-width:1500px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.admin-top h1{font-size:32px;margin:7px 0}.admin-top p{color:var(--muted);margin:0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:25px}.stat-card,.admin-panel{background:white;border:1px solid var(--line);border-radius:12px;padding:20px}.stat-card span,.stat-card small{display:block;color:var(--muted);font-size:12px}.stat-card b{display:block;font:700 32px 'Plus Jakarta Sans';margin:8px 0}.admin-panel{margin:18px 0}.admin-panel h2{font-size:18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}th{color:#71817e;background:#f8faf9}.admin-form{display:grid;grid-template-columns:1fr 2fr;gap:10px;max-width:850px;align-items:center}.admin-form .btn{grid-column:2}.inline-form{display:inline-flex;gap:5px;align-items:center}.inline-form select{padding:6px;border:1px solid var(--line);border-radius:5px}.mini-btn,.delete-btn{border:0;padding:7px 9px;border-radius:5px;background:var(--mint);color:var(--teal);cursor:pointer}.delete-btn{background:#fff0ef;color:#a33}.login-bg{min-height:100vh;background:linear-gradient(135deg,#102b40,#1e625d);display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);box-shadow:0 20px 60px #071d2b44}.login-card h1{font-size:30px}.login-card p{color:var(--muted);font-size:13px}.login-card .big{font-size:30px;width:60px;height:60px;margin-bottom:15px}
@media(max-width:900px){.nav{gap:12px}.nav a{font-size:11px}.book-grid{grid-template-columns:repeat(2,1fr)}.two-col{gap:25px}.sidebar{width:205px}.admin-main{margin-left:205px;padding:22px}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.topbar{height:66px;padding:0 17px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:66px;left:0;right:0;background:white;padding:15px 22px;box-shadow:0 12px 20px #0001;flex-direction:column;align-items:stretch}.nav.show{display:flex}.nav a{font-size:14px;padding:8px}.hero{min-height:440px}.hero-inner{padding:50px 22px}.hero h1{font-size:34px}.hero-points{flex-direction:column;gap:8px}.searchbar{flex-direction:column}.searchbar button{width:100%}.section-head{align-items:start;gap:12px;flex-direction:column;margin-top:45px}.book-grid,.two-col,.service-grid,.auth-grid,.footer-grid{grid-template-columns:1fr}.book-card{padding:12px}.cover{width:88px;min-width:88px;height:125px}.feature-band{padding:27px; margin:45px 0}.feature-icon{display:none}.two-col{margin:45px 0}.detail-layout{grid-template-columns:1fr}.cover-large{width:170px;height:230px}.contact-emoji{display:none}.footer-grid{gap:20px}.sidebar{position:static;width:auto;display:grid;grid-template-columns:1fr 1fr;padding:12px}.sidebar .brand{grid-column:1/-1;margin:0}.sidebar small{display:none}.sidebar>a:not(.brand){padding:9px;font-size:11px}.admin-main{margin:0;padding:17px}.admin-top{align-items:start;gap:10px;flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr}.admin-form{grid-template-columns:1fr}.admin-form .btn{grid-column:1}.page-content{padding-top:35px}.page-content>h1{font-size:30px}}
.notice{padding:12px 14px;margin:12px 0 18px;border:1px solid #d8a84e;background:#fff8e8;color:#704b0b;border-radius:8px;line-height:1.5}.current-upload{padding:10px 12px;margin:6px 0 10px;background:#f7faf9;border:1px solid #dce8e5;border-radius:8px}.muted{display:block;color:#687b83;font-size:.88rem;margin:4px 0 8px}

/* Aksi katalog hanya aktif untuk anggota yang sudah masuk dan berstatus Aktif. */
.book-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.book-actions form{margin:0}
.book-actions button:disabled,.book-actions [aria-disabled="true"]{opacity:.48;cursor:not-allowed;pointer-events:none}
.member-hint{display:block;flex-basis:100%;color:#8a5a16;font-size:13px;line-height:1.45;margin-top:2px}

/* Tampilan status tombol layanan katalog */
.book-actions .btn:not(:disabled):not([aria-disabled="true"]){background:#168c82;color:#fff;opacity:1;filter:none;}
.book-actions .btn:disabled,.book-actions [aria-disabled="true"]{background:#c5cecc!important;color:#52615f!important;border:1px solid #b5c1be!important;opacity:1!important;cursor:not-allowed!important;pointer-events:none;}
.member-hint{flex-basis:100%;display:block;margin:7px 0 0;color:#65716f;font-size:12px;line-height:1.5;}
.member-register-link{display:inline-block;flex-basis:100%;width:max-content;margin-top:2px;color:#168c82;font-size:12px;font-weight:700;text-decoration:underline;}

/* FIX WARNA TOMBOL KATALOG - prioritas tinggi */
.book-actions button.btn:disabled,
.book-actions .btn[disabled],
.book-actions .btn[aria-disabled="true"]{
  background-color:#aebbb8 !important;
  background-image:none !important;
  color:#354642 !important;
  border:1px solid #91a29d !important;
  opacity:1 !important;
  filter:none !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}
.book-actions a.btn:not([aria-disabled="true"]),
.book-actions button.btn:not(:disabled):not([aria-disabled="true"]){
  background-color:#168c82 !important;
  background-image:none !important;
  color:#ffffff !important;
  border:1px solid #168c82 !important;
  opacity:1 !important;
  filter:none !important;
}
.book-actions .member-hint{
  display:block !important;
  flex-basis:100% !important;
}
.book-actions .member-register-link{
  display:inline-block !important;
  flex-basis:100% !important;
}

/* Foto cover buku pada katalog dan halaman detail */
.book-card .cover img,.cover-large img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px;background:#fff;
}
.book-card .cover:has(img),.cover-large:has(img){padding:0;overflow:hidden;background:#fff;}
.book-card .cover img + small,.cover-large img + small{
  background:rgba(16,43,64,.78);color:#fff;padding:5px 7px;border-radius:0 0 5px 5px;
  bottom:0;left:0;right:0;text-align:center;letter-spacing:.3px;
}

/* Gambar artikel edukasi */
.article-row-image{width:58px;height:58px;flex:0 0 58px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}.article-card-image{width:100%;height:210px;object-fit:cover;border-radius:9px;margin-bottom:16px;display:block}.article-detail-image{width:100%;max-height:430px;object-fit:cover;border-radius:12px;margin:0 0 22px;display:block}.article-detail h2{margin-top:12px}.article-detail p{white-space:normal}
@media(max-width:760px){.article-card-image{height:180px}.article-detail-image{max-height:280px}}


/* Navigasi panel admin: ikon SVG konsisten dan logo website di sidebar. */
.sidebar{overflow-y:auto;z-index:30;scrollbar-width:thin;scrollbar-color:#315b61 transparent}
.sidebar .brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;min-height:44px}
.sidebar .sidebar-logo{width:42px;height:42px;flex:0 0 42px;object-fit:contain;border-radius:10px;background:#fff;padding:3px}
.sidebar .sidebar-brand-text{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px;color:#fff}
.sidebar .sidebar-brand-text b{font-weight:700}
.sidebar .sidebar-brand-text small{padding:0;margin:0;letter-spacing:.5px;font-size:10px;color:#9db8b1}
.sidebar .sidebar-section{margin-top:3px}
.sidebar .nav-link{display:flex;align-items:center;gap:11px;min-height:42px;padding:10px 12px!important;text-decoration:none;transition:background .15s ease,color .15s ease}
.sidebar .nav-link>span:last-child{min-width:0;line-height:1.35}
.sidebar .nav-icon{display:grid;place-items:center;width:21px;flex:0 0 21px;color:#91b1aa}
.sidebar .nav-link:hover .nav-icon,.sidebar .nav-link.side-active .nav-icon{color:#fff}
.sidebar .nav-link.side-active{font-weight:700}
.logo-settings-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:12px}
.logo-preview-box{width:150px;height:125px;border:1px dashed #cbd8d5;border-radius:12px;background:#f8fbfa;display:grid;place-items:center;padding:12px;color:#74837f;font-size:12px;text-align:center}
.logo-preview-box img{max-width:100%;max-height:100%;object-fit:contain}
.logo-upload-form{display:flex;flex-direction:column;gap:10px;min-width:min(360px,100%)}
.logo-upload-form label{font-size:12px;font-weight:700}
.logo-upload-form input[type=file]{max-width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.logo-upload-form .btn{width:max-content}
.role-pill{display:inline-block;padding:5px 9px;border-radius:20px;background:#edf4f2;color:#426b63;font-size:11px;font-weight:700}
.role-pill.admin{background:#fff4dc;color:#8a621d}
.role-form select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff}
.role-explainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.role-explainer-grid>div{padding:16px;border:1px solid var(--line);border-radius:9px;background:#fbfdfc}
.role-explainer-grid h3{margin:0 0 7px;font-size:14px}
.role-explainer-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
@media(max-width:650px){
 .sidebar .nav-link{gap:7px;padding:9px 7px!important;font-size:11px!important}
 .sidebar .nav-icon{width:18px;flex-basis:18px}
 .sidebar .nav-icon svg{width:16px;height:16px}
 .sidebar .sidebar-brand-text{font-size:12px}
 .logo-settings-row{align-items:flex-start;flex-direction:column}
 .logo-upload-form{min-width:0;width:100%}
 .role-explainer-grid{grid-template-columns:1fr}
}

/* Kontrol akun dan hak akses administrator */
.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.section-title-row h2{margin-bottom:6px}
.section-title-row .muted,.admin-panel>.muted{font-size:12px;line-height:1.6}
.account-edit-form{margin-top:16px}
.account-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.account-actions form{margin:0}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;font:600 11px 'DM Sans',sans-serif;white-space:nowrap}
.mini-btn.role-grant{background:#e8f6ed;color:#247447}
.mini-btn.role-revoke{background:#fff4dc;color:#8a621d}
.mini-btn.edit-btn{background:#eaf1fb;color:#315d92}
.role-form{margin:0}
@media(max-width:650px){.section-title-row{align-items:flex-start}.account-actions{min-width:120px}}

/* ==========================================================
   REDESAIN v5.12 — modern, ringan, dan responsif
   ========================================================== */
:root{
  --ink:#172d3d;--muted:#6d7f89;--navy:#102b40;--teal:#168c82;
  --mint:#e8f5f1;--gold:#e7b85f;--line:#e4ece9;--paper:#f5f9f7;
  --shadow-soft:0 14px 40px rgba(18,52,65,.08);
  --shadow-card:0 8px 24px rgba(18,52,65,.06);
}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{color:var(--ink);background:#fbfdfc;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{transition:color .18s ease,background .18s ease,border-color .18s ease}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid rgba(22,140,130,.35);outline-offset:2px}

/* Navigasi publik */
.topbar{height:82px;padding:0 max(calc((100% - 1220px)/2),28px);background:rgba(255,255,255,.94);border-bottom:1px solid rgba(222,234,230,.8);box-shadow:0 5px 24px rgba(19,51,62,.035);backdrop-filter:blur(14px)}
.brand{gap:13px;min-width:0}
.brand-logo{width:48px;height:48px;flex-basis:48px;border-radius:14px;padding:4px;box-shadow:0 4px 12px rgba(15,54,65,.08)}
.brand b{font:800 14px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.2px}
.brand small{font-size:10px;letter-spacing:.15px;color:#80918e}
.brand-mark{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#e8f6f1,#cfe9df);color:#147d73;box-shadow:inset 0 0 0 1px rgba(22,140,130,.08)}
.nav{gap:clamp(12px,1.7vw,25px)}
.nav a{font-size:12px;font-weight:700;color:#52656c;white-space:nowrap}
.nav a.active,.nav a:hover{color:var(--teal)}
.nav .nav-login{padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#14364a,#1b5d5a);box-shadow:0 7px 18px rgba(16,57,68,.15);color:#fff}
.nav .nav-login:hover{color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px rgba(16,57,68,.22)}
.menu-toggle{display:none}

/* Hero beranda */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:560px;color:#fff;background:radial-gradient(ellipse at 83% 12%,rgba(55,145,126,.38),transparent 30%),radial-gradient(ellipse at 3% 95%,rgba(33,101,112,.48),transparent 34%),linear-gradient(116deg,#102a40 0%,#143d4b 55%,#17605a 100%)}
.hero:before{content:"";position:absolute;z-index:-1;width:650px;height:650px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-190px;top:-300px;box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.018)}
.hero:after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:110px;background:linear-gradient(0deg,rgba(7,28,40,.17),transparent)}
.hero-inner{max-width:1220px;min-height:560px;padding:76px 28px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);align-items:center;gap:38px}
.hero-copy{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:2px;font-weight:800;color:#b8ded3}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#e8bd69;box-shadow:0 0 0 5px rgba(232,189,105,.14)}
.eyebrow.dark{color:#16877d}
.hero h1{max-width:700px;margin:20px 0 16px;font-size:clamp(38px,4.4vw,62px);line-height:1.1;letter-spacing:-2.2px;font-weight:800}
.hero p{max-width:590px;color:#d1e4df;font-size:16px;line-height:1.8;margin:0}
.searchbar{max-width:620px;margin-top:30px;padding:7px;border-radius:15px;box-shadow:0 18px 44px rgba(4,23,34,.25)}
.searchbar input{padding:14px 16px;color:var(--ink);font-size:14px}
.searchbar input::placeholder{color:#98a7a5}
.searchbar button{padding:14px 20px;border-radius:11px;background:linear-gradient(135deg,#15988a,#11776f);font-size:13px;font-weight:800;white-space:nowrap}
.hero-points{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;color:#d6e8e2;font-size:11px;font-weight:600}
.hero-points span{display:inline-flex;align-items:center;gap:6px}
.hero-points span:first-letter{color:#edc16d}
.hero-visual{height:410px;position:relative;display:grid;place-items:center;isolation:isolate}
.hero-orbit{position:absolute;border:1px solid rgba(225,249,239,.17);border-radius:50%;transform:rotate(-23deg)}
.orbit-one{width:390px;height:290px}
.orbit-two{width:480px;height:350px;transform:rotate(27deg);border-style:dashed;opacity:.6}
.hero-book-card{position:relative;z-index:2;width:290px;height:345px;padding:25px 26px;border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(231,246,239,.95));color:#17394a;box-shadow:0 28px 70px rgba(4,25,37,.34);transform:rotate(4deg);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-book-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:#d9eee4;right:-65px;top:-70px}
.hero-book-kicker{position:relative;z-index:1;color:#17877c;font-size:9px;font-weight:800;letter-spacing:2px}
.hero-book-illustration{position:relative;z-index:1;height:150px;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding-bottom:5px}
.hero-book-illustration:after{content:"";position:absolute;bottom:0;left:12%;right:12%;height:7px;border-radius:50%;background:rgba(24,76,75,.14);filter:blur(4px)}
.hero-book-illustration i{display:block;width:54px;height:128px;border-radius:5px 8px 8px 5px;background:linear-gradient(160deg,#e7b965,#c88b42);box-shadow:inset 5px 0 rgba(255,255,255,.35),4px 8px 15px rgba(23,63,67,.16);transform:rotate(-8deg)}
.hero-book-illustration i:nth-child(2){height:145px;width:60px;background:linear-gradient(160deg,#4c9b88,#216c69);transform:rotate(2deg)}
.hero-book-illustration i:nth-child(3){height:116px;background:linear-gradient(160deg,#d98b75,#ad5f58);transform:rotate(9deg)}
.hero-book-card>b{position:relative;z-index:1;font:800 23px/1.23 'Plus Jakarta Sans',sans-serif;letter-spacing:-.8px}
.hero-book-card>span{position:relative;z-index:1;color:#7a918b;font-size:8px;letter-spacing:1.5px;font-weight:800}
.hero-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(255,255,255,.4);border-radius:14px;background:rgba(255,255,255,.94);color:#193b48;box-shadow:0 14px 35px rgba(4,24,34,.2);backdrop-filter:blur(10px)}
.hero-float>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#e7f4ee;color:#16877d;font-size:18px}
.hero-float b,.hero-float small{display:block}.hero-float b{font:800 10px 'Plus Jakarta Sans',sans-serif}.hero-float small{margin-top:3px;color:#7d8e8a;font-size:9px}
.float-top{top:38px;right:0}.float-bottom{bottom:38px;left:-5px}

/* Bagian konten publik */
.container{max-width:1220px;padding-left:28px;padding-right:28px}
.section-head{margin:76px 0 27px;gap:20px}
.section-head h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.8px;margin:9px 0}
.section-head p,.lead{color:#71828a;line-height:1.8;font-size:14px}
.text-link{font-weight:800;color:#16877d}
.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.book-card{align-items:flex-start;gap:17px;padding:17px;border:1px solid #e5eeeb;border-radius:17px;background:linear-gradient(145deg,#fff,#fcfefd);box-shadow:0 5px 18px rgba(19,52,63,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.book-card:hover{transform:translateY(-5px);border-color:#cde4dc;box-shadow:0 16px 34px rgba(19,52,63,.1)}
.cover{width:108px;min-width:108px;height:150px;border-radius:9px;background:linear-gradient(145deg,#e6f3ed,#a6d0c0);box-shadow:inset 7px 0 rgba(255,255,255,.42),0 8px 16px rgba(21,70,68,.1);font-size:56px}
.book-info h3{font-size:14px;letter-spacing:-.25px;margin:11px 0 6px}
.book-info p{font-size:11px;line-height:1.5}
.book-info a,.article-card a{font-weight:800;color:#147e75}
.tag{background:#eaf6f1;color:#237d70;padding:6px 9px;border-radius:7px;font-size:9px;letter-spacing:.25px}
.feature-band{position:relative;overflow:hidden;margin:78px 0 65px;padding:42px 48px;border:1px solid #d8ebe3;border-radius:22px;background:radial-gradient(circle at 90% 15%,rgba(255,255,255,.85),transparent 30%),linear-gradient(115deg,#e9f5ef,#dcefe8);box-shadow:0 12px 32px rgba(25,82,73,.05)}
.feature-band h2{max-width:520px;font-size:clamp(23px,2.6vw,32px);letter-spacing:-1px;line-height:1.2}
.feature-band p{max-width:600px;color:#607771;line-height:1.8;font-size:13px}
.feature-icon{font-size:82px;filter:drop-shadow(0 10px 14px rgba(23,83,69,.15));opacity:.9}
.btn{background:linear-gradient(135deg,#168f83,#116e68);border-radius:10px;font-weight:800;box-shadow:0 6px 15px rgba(20,126,115,.12);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(20,126,115,.2)}
.btn-light{background:linear-gradient(135deg,#12384b,#1c625b);border-radius:10px}
.two-col{gap:58px;margin:70px 0 85px}
.event-row{gap:16px;padding:18px 0;border-bottom:1px solid #e9efec}
.date-box{width:58px;height:62px;flex:0 0 58px;border-radius:13px;background:linear-gradient(145deg,#eaf6f0,#d9eee5);color:#17877c}
.date-box b{font:800 22px 'Plus Jakarta Sans',sans-serif}
.article-row{align-items:center;padding:16px 0;border-bottom:1px solid #e9efec;transition:transform .18s ease}
.article-row:hover{transform:translateX(4px)}
.article-row>span:last-child{min-width:0;line-height:1.45}
.article-row b{font-size:13px}.article-row small{font-size:10px}
.article-icon{flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#fff5e2}
.page-content{padding-top:62px;padding-bottom:90px}
.page-content>h1{font-size:clamp(30px,3.5vw,42px);letter-spacing:-1.2px}
.catalog-search{max-width:760px;padding:7px;border:1px solid #dfeae6;border-radius:13px;background:#fff;box-shadow:0 6px 20px rgba(18,52,65,.04)}
.catalog-search input{padding:13px 15px;font-size:14px}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card,.article-card,.contact-card{border:1px solid #e4eeea;border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.service-card{padding:27px;font-size:35px;transition:transform .2s ease,box-shadow .2s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.service-card h3{font-size:17px}
.article-card{padding:24px;margin:18px 0}
.article-card h2{font-size:21px;line-height:1.3}
.article-card-image{border-radius:13px}
.form-card{padding:28px;border:1px solid #e3ece8;border-radius:17px;box-shadow:var(--shadow-card);gap:11px}
.form-card input,.form-card textarea,.form-card select{border-color:#dce8e3;border-radius:10px;padding:13px 14px}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:3px solid rgba(22,140,130,.12);border-color:#65b6a7}
.contact-card{padding:34px;background:linear-gradient(120deg,#e9f5f0,#f5faf7);box-shadow:none}
footer{background:linear-gradient(125deg,#102a40,#123c48 70%,#15544f);padding-top:54px}
.footer-grid{gap:60px;padding-bottom:42px}
.footer-grid h3{font:800 13px 'Plus Jakarta Sans',sans-serif;letter-spacing:.3px}
.footer-grid p{line-height:1.9}
.footer-bottom{padding:19px;font-size:10px}

/* Panel admin */
.admin-body{background:#f3f7f6;color:#193344;min-height:100vh}
.sidebar{width:260px;padding:25px 17px 22px;background:linear-gradient(180deg,#102b40 0%,#123c49 60%,#124b49 100%);box-shadow:8px 0 30px rgba(11,39,51,.08);border-right:1px solid rgba(255,255,255,.06);gap:8px}
.sidebar .brand{padding:0 8px 18px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar .sidebar-logo{width:44px;height:44px;flex-basis:44px;border-radius:13px}
.sidebar .sidebar-brand-text{font-size:14px;letter-spacing:-.2px}
.sidebar .sidebar-brand-text small{font-size:10px;color:#a3c4bb}
.sidebar .sidebar-section{padding:4px 12px 9px;color:#83aaa1;font-size:9px;letter-spacing:1.7px}
.sidebar .nav-link{min-height:44px;padding:11px 12px!important;border-radius:11px;color:#c2d5d0;font-size:12px!important;font-weight:600;gap:12px}
.sidebar .nav-link:hover{background:rgba(255,255,255,.09);color:#fff}
.sidebar .nav-link.side-active{background:linear-gradient(100deg,rgba(42,157,139,.34),rgba(255,255,255,.1));color:#fff;box-shadow:inset 3px 0 #e8bd69;font-weight:800}
.sidebar .nav-icon{width:22px;flex-basis:22px;color:#91bcb0}
.sidebar .nav-link.side-active .nav-icon{color:#f0cb82}
.admin-main{margin-left:260px;max-width:none;width:auto;padding:36px clamp(22px,3.2vw,48px) 60px}
.admin-top{position:relative;align-items:center;margin-bottom:25px;padding:23px 26px;border:1px solid #e3eeea;border-radius:19px;background:linear-gradient(110deg,#fff,#f0f8f4);box-shadow:0 7px 22px rgba(19,57,65,.035)}
.admin-top h1{font-size:clamp(25px,2.7vw,34px);letter-spacing:-1px;margin:6px 0 4px}
.admin-top p{font-size:12px;line-height:1.6;color:#72848a}
.admin-top .eyebrow{font-size:9px}
.admin-top>.btn{flex:0 0 auto}
.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.stat-card{position:relative;overflow:hidden;min-height:135px;padding:21px 22px;border:1px solid #e4eeea;border-radius:17px;background:linear-gradient(145deg,#fff,#f9fcfa);box-shadow:0 6px 20px rgba(19,57,65,.04)}
.stat-card:after{content:"";position:absolute;width:88px;height:88px;right:-22px;top:-24px;border-radius:50%;background:rgba(22,140,130,.07)}
.stat-card span{font-size:11px;font-weight:700;color:#6b7f84}
.stat-card b{position:relative;z-index:1;font-size:34px;letter-spacing:-1.2px;color:#173c4a;margin:12px 0 4px}
.stat-card small{font-size:10px;color:#8a9b9b}
.admin-panel{margin:18px 0;padding:24px;border:1px solid #e3ece8;border-radius:17px;background:#fff;box-shadow:0 6px 22px rgba(19,57,65,.035)}
.admin-panel h2{font:800 16px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.3px;margin-bottom:12px;color:#1a3a49}
.admin-panel p{font-size:13px;line-height:1.7;color:#718187}
.admin-panel .btn{margin:4px 5px 4px 0}
.table-wrap{width:100%;overflow-x:auto;border:1px solid #e7eeeb;border-radius:12px;-webkit-overflow-scrolling:touch}
table{font-size:12px;white-space:nowrap;background:#fff}
th,td{padding:13px 14px;border-bottom:1px solid #edf2ef}
th{background:#f4f8f6;color:#63777a;font-size:10px;letter-spacing:.3px;text-transform:uppercase}
tbody tr:hover{background:#fbfdfc}
.admin-form{gap:13px;max-width:900px}
.admin-form label,.form-card label{color:#536a70;font-size:11px;font-weight:800}
.admin-form input,.admin-form textarea,.admin-form select{border:1px solid #dce8e3;border-radius:9px;padding:12px 13px;min-width:0}
.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{outline:3px solid rgba(22,140,130,.12);border-color:#69b9aa}
.mini-btn,.delete-btn{border-radius:8px;padding:8px 10px;font-weight:800}
.login-bg{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 15%,rgba(53,148,126,.35),transparent 30%),radial-gradient(circle at 85% 85%,rgba(39,113,119,.4),transparent 35%),linear-gradient(135deg,#102b40,#1d625b)}
.login-bg:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.12);border-radius:50%;top:-250px;right:-150px;box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.02)}
.login-card{position:relative;width:min(460px,100%);padding:34px;border:1px solid rgba(255,255,255,.65);border-radius:22px;box-shadow:0 28px 80px rgba(3,22,33,.28)}
.login-card h1{font-size:31px;letter-spacing:-1px}
.login-card .big{border-radius:17px}
.login-card .btn{width:100%;margin-top:12px}
.login-card .text-link{display:inline-block;margin-top:15px}
.notice,.error{border-radius:10px;line-height:1.6}

/* Navigasi admin off-canvas pada tablet dan ponsel */
.admin-menu-toggle,.sidebar-backdrop{display:none}
@media(max-width:1050px){
 .topbar{padding-left:22px;padding-right:22px}
 .nav{gap:12px}.nav a{font-size:11px}
 .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
 .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(290px,86vw);height:100dvh;z-index:70;transform:translateX(-105%);transition:transform .25s ease;display:flex;overflow-y:auto;padding-top:26px}
 body.admin-menu-open .sidebar{transform:translateX(0)}
 .sidebar-backdrop{position:fixed;inset:0;z-index:60;border:0;padding:0;background:rgba(8,28,38,.48);backdrop-filter:blur(2px)}
 body.admin-menu-open .sidebar-backdrop{display:block}
 .admin-menu-toggle{position:fixed;z-index:80;top:13px;left:14px;display:flex;align-items:center;gap:9px;border:1px solid rgba(217,232,226,.9);border-radius:11px;padding:10px 13px;background:#fff;color:#183c49;font-size:12px;font-weight:800;box-shadow:0 7px 20px rgba(14,50,60,.12);cursor:pointer}
 .menu-toggle-lines{display:flex;flex-direction:column;gap:4px}.menu-toggle-lines i{display:block;width:16px;height:2px;border-radius:2px;background:#16877d}
 .admin-main{margin-left:0;padding:78px 24px 45px}
 .admin-top{padding-left:22px}
 .sidebar .brand{grid-column:auto;margin-bottom:12px}
 .sidebar small{display:block}
 .sidebar>a:not(.brand){font-size:12px}
}
@media(max-width:760px){
 .topbar{height:72px;padding:0 18px}
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:42px;border:1px solid #e3ece8;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(18,52,65,.06);cursor:pointer}
 .menu-toggle span{display:block;width:17px;height:2px;margin:0 auto;border-radius:3px;background:#1b6f69}
 .nav{display:none;position:absolute;top:72px;left:12px;right:12px;padding:12px;border:1px solid #e5eeea;border-radius:15px;background:#fff;box-shadow:0 18px 35px rgba(14,46,57,.16);flex-direction:column;align-items:stretch;gap:3px}
 .nav.show{display:flex}
 .nav a{padding:12px 13px;border-radius:9px;font-size:13px}
 .nav a.active{background:#eef7f3}
 .nav .nav-login{text-align:center;margin-top:5px}
 .hero{min-height:0}
 .hero-inner{min-height:0;grid-template-columns:1fr;padding:62px 22px 58px;gap:10px}
 .hero h1{font-size:clamp(35px,8vw,48px);letter-spacing:-1.5px}
 .hero p{font-size:14px}
 .hero-visual{height:310px;max-width:420px;width:100%;margin:5px auto 0;transform:scale(.9)}
 .hero-book-card{width:240px;height:285px;padding:20px 22px}
 .hero-book-illustration{height:120px}.hero-book-illustration i{height:100px;width:44px}.hero-book-illustration i:nth-child(2){height:116px;width:50px}.hero-book-illustration i:nth-child(3){height:92px;width:44px}
 .hero-book-card>b{font-size:20px}
 .orbit-one{width:310px;height:230px}.orbit-two{width:380px;height:280px}
 .float-top{top:18px;right:-2px}.float-bottom{bottom:18px;left:-2px}
 .container{padding-left:20px;padding-right:20px}
 .section-head{margin:52px 0 22px}
 .feature-band{margin:50px 0;padding:28px;border-radius:18px}
 .two-col{grid-template-columns:1fr;gap:30px;margin:50px 0}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
 .footer-grid>div:first-child{grid-column:1/-1}
 .page-content{padding-top:42px;padding-bottom:60px}
 .admin-main{padding:76px 18px 35px}
 .admin-top{align-items:flex-start;flex-direction:column;gap:12px;padding:19px;border-radius:15px}
 .admin-top>.btn{align-self:flex-start}
 .admin-panel{padding:18px}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .stat-card{min-height:120px;padding:16px}
 .stat-card b{font-size:29px}
 .admin-form{grid-template-columns:1fr}
 .admin-form .btn{grid-column:1}
 .role-explainer-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
 .hero-inner{padding:50px 20px 42px}
 .hero h1{font-size:36px}
 .hero-visual{height:275px;transform:scale(.82);transform-origin:top center;margin-bottom:-35px}
 .hero-points{flex-direction:column;gap:9px}
 .searchbar{flex-direction:column;padding:6px;border-radius:13px}
 .searchbar input{width:100%;padding:13px 12px}
 .searchbar button{width:100%}
 .book-grid,.service-grid,.auth-grid,.footer-grid{grid-template-columns:1fr}
 .book-card{gap:13px;padding:12px;border-radius:14px}
 .cover{width:88px;min-width:88px;height:124px;font-size:46px}
 .book-info h3{font-size:13px;margin-top:8px}
 .feature-band{padding:24px}.feature-icon{display:none}
 .section-head{align-items:flex-start;flex-direction:column;gap:9px}
 .detail-layout{grid-template-columns:1fr;gap:22px}
 .cover-large{width:165px;height:225px}
 .contact-card{padding:23px}
 .contact-emoji{display:none}
 .footer-grid>div:first-child{grid-column:auto}
 .stats-grid{grid-template-columns:1fr 1fr}
 .stat-card span{font-size:10px}
 .admin-panel{padding:15px}
 .admin-panel h2{font-size:15px}
 .admin-main{padding-left:13px;padding-right:13px}
 .admin-top{padding:17px}
 .admin-top h1{font-size:26px}
 .login-card{padding:25px 21px}
 .form-card{padding:20px}
 .logo-settings-row{align-items:flex-start;flex-direction:column}
 .logo-upload-form{min-width:0;width:100%}
 .section-title-row{align-items:flex-start;flex-direction:column}
 .account-actions{min-width:0}
}
@media(max-width:360px){
 .brand b{font-size:12px}.brand small{font-size:9px}
 .brand-logo,.brand-mark{width:40px;height:40px;flex-basis:40px}
 .hero h1{font-size:32px}
 .hero-visual{transform:scale(.72);margin-bottom:-65px}
 .stats-grid{grid-template-columns:1fr}
 .book-card{gap:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* Versi 5.13 — hero beranda lebih ringkas */
.hero{min-height:440px}
.hero-inner{min-height:440px;padding:40px 28px;gap:26px}
.hero-visual{height:340px}
.hero-book-card{width:265px;height:315px;padding:22px 23px}
.hero-book-illustration{height:132px}
.hero-book-illustration i{width:49px;height:112px}
.hero-book-illustration i:nth-child(2){height:128px;width:54px}
.hero-book-illustration i:nth-child(3){height:102px;width:49px}
.float-top{top:26px}.float-bottom{bottom:26px}

/* Kontrol hak akses menu Petugas */
.staff-menu-form{margin-top:16px}
.staff-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.staff-menu-option{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 15px;border:1px solid #e2ece7;border-radius:12px;background:linear-gradient(145deg,#fff,#f9fcfa);cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.staff-menu-option:hover{border-color:#9bcfc0;background:#f4fbf7;transform:translateY(-1px)}
.staff-menu-option input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:#168c82}
.staff-menu-option span{display:block;min-width:0}
.staff-menu-option b,.staff-menu-option small{display:block}
.staff-menu-option b{font-size:12px;color:#24434b}
.staff-menu-option small{margin-top:4px;color:#84938f;font-size:10px;line-height:1.4}
.staff-menu-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:17px}
.staff-menu-actions .btn{margin:0}
@media(max-width:760px){
 .hero{min-height:0}
 .hero-inner{min-height:0;grid-template-columns:1fr;padding:40px 22px 32px;gap:0}
 .hero-visual{height:245px;max-width:380px;width:100%;margin:0 auto;transform:none}
 .hero-book-card{width:205px;height:245px;padding:18px 19px}
 .hero-book-illustration{height:102px;gap:6px}
 .hero-book-illustration i{width:40px;height:86px}
 .hero-book-illustration i:nth-child(2){height:98px;width:44px}
 .hero-book-illustration i:nth-child(3){height:78px;width:40px}
 .hero-book-card>b{font-size:19px}
 .hero-book-card>span{font-size:7px;letter-spacing:1px}
 .orbit-one{width:280px;height:210px}.orbit-two{width:340px;height:250px}
 .float-top{top:10px;right:0}.float-bottom{bottom:10px;left:0}
}
@media(max-width:560px){
 .hero-inner{padding:34px 20px 24px}
 .hero h1{font-size:34px}
 .hero-visual{height:205px;transform:scale(.82);transform-origin:top center;margin-bottom:-36px}
 .staff-menu-grid{grid-template-columns:1fr}
 .staff-menu-actions{align-items:flex-start;flex-direction:column;gap:9px}
}

/* Versi 5.14 — tinggi hero desktop dipadatkan menjadi 300px */
@media (min-width:1000px){
 .hero{height:300px;min-height:300px}
 .hero-inner{height:300px;min-height:300px;padding:18px 28px;gap:22px;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr)}
 .hero h1{font-size:clamp(34px,3.2vw,44px);line-height:1.05;letter-spacing:-1.6px;margin:12px 0 10px}
 .hero p{font-size:14px;line-height:1.5}
 .searchbar{margin-top:15px;padding:5px;border-radius:12px}
 .searchbar input{padding:10px 13px;font-size:13px}
 .searchbar button{padding:10px 16px;font-size:12px}
 .hero-points{margin-top:12px;gap:9px 17px;font-size:10px}
 .hero-visual{height:255px}
 .orbit-one{width:330px;height:240px}
 .orbit-two{width:390px;height:285px}
 .hero-book-card{width:210px;height:242px;padding:17px 19px;border-radius:18px}
 .hero-book-card:before{width:145px;height:145px;right:-54px;top:-58px}
 .hero-book-kicker{font-size:8px}
 .hero-book-illustration{height:98px;gap:6px}
 .hero-book-illustration i{width:42px;height:82px}
 .hero-book-illustration i:nth-child(2){height:94px;width:46px}
 .hero-book-illustration i:nth-child(3){height:75px;width:42px}
 .hero-book-card>b{font-size:18px;line-height:1.18}
 .hero-book-card>span{font-size:7px;letter-spacing:1px}
 .hero-float{gap:8px;padding:9px 11px;border-radius:12px}
 .hero-float>span{width:30px;height:30px;font-size:15px}
 .float-top{top:12px;right:0}
 .float-bottom{bottom:12px;left:0}
}


/* v5.15 — kontras tombol panel admin dan kontrol hak akses per akun */
.admin-body .btn,
.admin-body .btn:visited,
.admin-body .btn:hover,
.admin-body button.btn{
  color:#fff !important;
  text-decoration:none;
}
.admin-body .btn.btn-outline,
.admin-body .btn.btn-outline:visited{
  background:#fff !important;
  color:#147e75 !important;
  border:1px solid #9dc9c0 !important;
  box-shadow:0 4px 12px rgba(20,126,115,.07) !important;
}
.admin-body .btn.btn-outline:hover,
.admin-body .btn.btn-outline:focus-visible{
  background:#eef8f4 !important;
  color:#105f59 !important;
  border-color:#72b9aa !important;
}
.admin-body .btn:focus-visible,
.admin-body button.btn:focus-visible{
  outline:3px solid rgba(22,140,130,.24);
  outline-offset:2px;
}
.staff-menu-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.staff-menu-toolbar .mini-btn,.reset-menu-form .mini-btn,.menu-access-btn{border:1px solid #d5e6df;background:#f1f8f5;color:#176b60;padding:9px 12px;border-radius:8px;cursor:pointer}
.staff-menu-toolbar .mini-btn:hover,.reset-menu-form .mini-btn:hover,.menu-access-btn:hover{background:#e4f3ec;color:#10594f}
.reset-menu-form{margin-top:12px}
.menu-access-btn{font-weight:800}
@media(max-width:760px){
  .staff-menu-toolbar{align-items:stretch}
  .staff-menu-toolbar .mini-btn{flex:1 1 auto}
  .reset-menu-form .mini-btn{width:100%}
}


/* Versi 5.16 — nama perpustakaan satu baris pada header HP */
@media(max-width:760px){
  .topbar{gap:8px;padding-left:12px;padding-right:12px}
  .topbar .brand{flex:1 1 auto;min-width:0;max-width:calc(100% - 46px);gap:8px}
  .topbar .brand-logo,.topbar .brand-mark{width:36px;height:36px;flex:0 0 36px}
  .topbar .brand>span{display:block;flex:1 1 auto;min-width:0}
  .topbar .brand b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(9px,2.65vw,10.5px);line-height:1.2;letter-spacing:-.35px}
  .topbar .brand small{font-size:8px;line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .menu-toggle{flex:0 0 38px;width:38px;height:38px}
}