*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background:#f1f5f9;
color:#1e293b;
line-height:1.6;
}

/* =========================
HEADER FRONTEND
========================= */

.main-header{
width:100%;
background:linear-gradient(to right,#dc2626,#be123c);
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 50px;
position:sticky;
top:0;
z-index:999;
}

.logo-area{
display:flex;
align-items:center;
gap:15px;
color:#fff;
}

.logo-box{
width:55px;
height:55px;
background:#fff;
color:#dc2626;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:bold;
}

.logo-area h1{
font-size:24px;
}

.logo-area p{
font-size:13px;
opacity:0.8;
}

/* =========================
LOGO
========================= */

.logo-image{
width:60px;
height:60px;
border-radius:18px;
overflow:hidden;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
}

.logo-image img{
width:100%;
height:100%;
object-fit:contain;
}

/* =========================
SIDEBAR LOGO
========================= */

.sidebar-logo-image{
width:60px;
height:60px;
border-radius:18px;
overflow:hidden;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
}

.sidebar-logo-image img{
width:100%;
height:100%;
object-fit:contain;
}

.menu-header{
display:flex;
align-items:center;
gap:30px;
}

.menu-header a{
color:#fff;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.menu-header a:hover{
opacity:0.7;
}

.header-button{
display:flex;
align-items:center;
gap:12px;
}

.btn-login,
.btn-register,
.btn-primary,
.btn-secondary,
.btn-auth-full{
padding:13px 24px;
border-radius:14px;
text-decoration:none;
border:none;
font-weight:600;
cursor:pointer;
transition:0.3s;
display:inline-flex;
align-items:center;
justify-content:center;
}

.btn-login{
background:rgba(255,255,255,0.15);
color:#fff;
}

.btn-login:hover{
background:rgba(255,255,255,0.25);
}

.btn-register,
.btn-primary,
.btn-auth-full{
background:#af0000;
color:#ffffff;
}

.btn-register:hover,
.btn-primary:hover,
.btn-auth-full:hover{
background:#570000;
}

.btn-secondary{
border:1px solid #fff;
color:#fff;
background:transparent;
}

.btn-secondary:hover{
background:rgba(255,255,255,0.1);
}

/* =========================
HERO SECTION
========================= */

.hero-section{
background:linear-gradient(to right,#dc2626,#be123c);
padding:90px 50px;
color:#fff;
}

.hero-content{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.hero-badge{
display:inline-block;
padding:10px 18px;
background:rgba(255,255,255,0.15);
border-radius:50px;
margin-bottom:20px;
font-size:14px;
}

.hero-left h2{
font-size:56px;
line-height:1.2;
margin-bottom:25px;
font-weight:800;
}

.hero-left p{
font-size:18px;
opacity:0.9;
margin-bottom:35px;
}

.hero-button{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.preview-box{
background:#fff;
padding:35px;
border-radius:30px;
color:#1e293b;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.preview-box h3{
margin-bottom:25px;
font-size:24px;
}

.preview-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.preview-card{
padding:25px;
border-radius:22px;
background:#fee2e2;
}

.preview-card.blue{
background:#dbeafe;
}

.preview-card p{
font-size:14px;
margin-bottom:10px;
}

.preview-card h2{
font-size:34px;
}

/* =========================
FEATURE SECTION
========================= */

.feature-section{
padding:90px 50px;
background:#fff;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
font-size:42px;
margin-bottom:15px;
}

.section-title p{
color:#64748b;
}

.feature-grid{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.feature-card{
background:#f8fafc;
padding:35px;
border-radius:28px;
transition:0.3s;
border:1px solid #e2e8f0;
}

.feature-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}


.feature-card h3{
margin-bottom:12px;
font-size:22px;
}

.feature-card p{
color:#64748b;
}

/* =========================
FOOTER
========================= */

.main-footer{
background:#0f172a;
padding:70px 50px 30px;
color:#cbd5e1;
}

.footer-grid{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
}

.footer-grid h3,
.footer-grid h4{
margin-bottom:18px;
color:#fff;
}

.footer-grid ul{
list-style:none;
}

.footer-grid ul li{
margin-bottom:10px;
}

.footer-bottom{
max-width:1300px;
margin:50px auto 0;
padding-top:20px;
border-top:1px solid #334155;
text-align:center;
}

/* =========================
AUTH
========================= */

.auth-page{
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
}

.auth-left{
background:linear-gradient(to right,#dc2626,#be123c);
display:flex;
align-items:center;
justify-content:center;
padding:40px;
color:#fff;
}

.auth-overlay{
max-width:500px;
}

.auth-overlay h1{
font-size:52px;
margin-bottom:20px;
}

.auth-overlay p{
font-size:18px;
opacity:0.9;
line-height:1.8;
}

.auth-right{
display:flex;
align-items:center;
justify-content:center;
padding:40px;
background:#f8fafc;
}

.auth-form{
width:100%;
max-width:450px;
background:#fff;
padding:40px;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.auth-form h2{
font-size:34px;
margin-bottom:10px;
}

.auth-subtitle{
color:#64748b;
margin-bottom:30px;
}

.form-group{
margin-bottom:22px;
}

.form-group label{
display:block;
margin-bottom:10px;
font-weight:600;
}

.input-group{
display:flex;
align-items:center;
border:1px solid #cbd5e1;
border-radius:16px;
overflow:hidden;
background:#fff;
}

.input-group i{
width:55px;
text-align:center;
color:#64748b;
}

.input-group input{
flex:1;
padding:15px;
border:none;
outline:none;
font-size:15px;
}

.remember-group{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
font-size:14px;
}

.remember-group a{
text-decoration:none;
color:#dc2626;
}

.auth-footer{
text-align:center;
margin-top:25px;
}

.auth-footer a{
color:#dc2626;
text-decoration:none;
font-weight:600;
}

.alert-error{
background:#fee2e2;
color:#b91c1c;
padding:15px;
border-radius:15px;
margin-bottom:20px;
}

/* =========================
BACKEND
========================= */

.layout-container{
display:flex;
min-height:100vh;
}

.sidebar-admin{
width:280px;
background:#0f172a;
color:#fff;
padding:25px;
transition:0.3s;
}

.sidebar-hide{
margin-left:-280px;
}

.sidebar-logo{
display:flex;
align-items:center;
gap:15px;
margin-bottom:35px;
}

.sidebar-logo p{
font-size:13px;
opacity:0.7;
}

.sidebar-menu{
list-style:none;
}

.sidebar-menu li{
margin-bottom:10px;
}

.sidebar-menu li a{
display:flex;
align-items:center;
gap:15px;
padding:16px 18px;
border-radius:16px;
text-decoration:none;
color:#cbd5e1;
transition:0.3s;
}

.sidebar-menu li a:hover{
background:#1e293b;
}

.main-wrapper{
flex:1;
display:flex;
flex-direction:column;
}

.topbar-admin{
height:85px;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 30px;
border-bottom:1px solid #e2e8f0;
}

.topbar-left{
display:flex;
align-items:center;
gap:20px;
}

.toggle-sidebar{
width:45px;
height:45px;
border:none;
border-radius:14px;
background:#f1f5f9;
cursor:pointer;
font-size:18px;
}

.topbar-right{
display:flex;
align-items:center;
gap:20px;
}

.notif-box{
position:relative;
font-size:22px;
cursor:pointer;
}

.notif-box span{
position:absolute;
top:-8px;
right:-10px;
background:red;
color:#fff;
font-size:10px;
padding:4px 7px;
border-radius:50px;
}

.profile-box{
display:flex;
align-items:center;
gap:12px;
background:#f8fafc;
padding:10px 15px;
border-radius:18px;
}

.profile-box img{
width:45px;
height:45px;
border-radius:50%;
object-fit:cover;
}

.profile-box h4{
font-size:15px;
}

.profile-box p{
font-size:12px;
color:#64748b;
}

.content-area{
padding:30px;
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-bottom:30px;
}

.dashboard-card{
background:#fff;
padding:30px;
border-radius:25px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.dashboard-card p{
color:#64748b;
margin-bottom:10px;
}

.dashboard-card h2{
font-size:42px;
}

.table-card{

background:#fff;

padding:30px;

border-radius:25px;

box-shadow:
0 5px 20px rgba(0,0,0,0.05);

overflow-x:auto;

overflow-y:visible;

position:relative;

z-index:1;

}

.table-header{
margin-bottom:20px;
}

.table-card table{
width:100%;
border-collapse:collapse;
}

.table-card table th{
background:#f8fafc;
padding:15px;
text-align:left;
}

.table-card table td{
padding:15px;
border-bottom:1px solid #e2e8f0;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px){

.hero-content,
.auth-page{
grid-template-columns:1fr;
}

.sidebar-admin{
position:fixed;
left:0;
top:0;
height:100%;
z-index:999;
}

.sidebar-hide{
left:-280px;
margin-left:0;
}

.main-header{
padding:20px;
flex-wrap:wrap;
gap:20px;
}

.menu-header{
display:none;
}

.hero-left h2{
font-size:42px;
}

}

@media(max-width:768px){

.main-header,
.hero-section,
.feature-section,
.main-footer,
.content-area{
padding-left:20px;
padding-right:20px;
}

.topbar-admin{
padding:0 20px;
}

.preview-grid,
.dashboard-grid{
grid-template-columns:1fr;
}

.hero-left h2{
font-size:34px;
}

.auth-form{
padding:30px 20px;
}

}


.dropdown-menu{
position:absolute;
top:80px;
right:0;
width:220px;
background:#fff;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
padding:10px;
display:none;
z-index:9999;
}

.dropdown-menu.show{
display:block;
}

.dropdown-menu a{
display:flex;
align-items:center;
gap:12px;
padding:14px 15px;
border-radius:14px;
text-decoration:none;
font-size:15px;
color:#0f172a;
transition:0.3s;
}

.dropdown-menu a:hover{
background:#f1f5f9;
}

.logout-link{
color:#dc2626 !important;
}

.topbar-right{
display:flex;
align-items:center;
gap:20px;
}

.notif-box{
position:relative;
font-size:22px;
cursor:pointer;
}

.notif-box span{
position:absolute;
top:-8px;
right:-10px;
background:red;
color:#fff;
font-size:10px;
padding:4px 7px;
border-radius:50px;
}

.profile-box{
display:flex;
align-items:center;
gap:12px;
background:#f8fafc;
padding:10px 15px;
border-radius:18px;
}

.profile-box img{
width:45px;
height:45px;
border-radius:50%;
object-fit:cover;
}

.profile-box h4{
font-size:15px;
}

.profile-box p{
font-size:12px;
color:#64748b;
}

/* =========================
TOPBAR RIGHT
========================= */

.topbar-right{
display:flex;
align-items:center;
gap:20px;
}

/* =========================
NOTIFICATION
========================= */

.notif-box{
width:48px;
height:48px;
border-radius:15px;
background:#f8fafc;
display:flex;
align-items:center;
justify-content:center;
position:relative;
font-size:20px;
cursor:pointer;
color:#0f172a;
}

.notif-box span{
position:absolute;
top:-4px;
right:-4px;
background:#ef4444;
color:#fff;
font-size:11px;
padding:4px 7px;
border-radius:50px;
}

/* =========================
PROFILE DROPDOWN
========================= */

.profile-dropdown{
position:relative;
}

.profile-button{
display:flex;
align-items:center;
gap:15px;
border:none;
background:#f8fafc;
padding:10px 18px;
border-radius:20px;
cursor:pointer;
min-width:260px;
}

.profile-button img{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
background:#e2e8f0;
}

.profile-info{
flex:1;
text-align:left;
}

.profile-info h4{
font-size:18px;
margin-bottom:3px;
color:#0f172a;
}

.profile-info p{
font-size:13px;
color:#64748b;
}

.profile-button i{
font-size:13px;
color:#64748b;
}

/* =========================
DROPDOWN
========================= */

.dropdown-menu{
position:absolute;
top:80px;
right:0;
width:220px;
background:#fff;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
padding:10px;
display:none;
z-index:9999;
}

.dropdown-menu.show{
display:block;
}

.dropdown-menu a{
display:flex;
align-items:center;
gap:12px;
padding:14px 15px;
border-radius:14px;
text-decoration:none;
font-size:15px;
color:#0f172a;
transition:0.3s;
}

.dropdown-menu a:hover{
background:#f1f5f9;
}

.logout-link{
color:#dc2626 !important;
}
/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.topbar-admin{
padding:0 15px;
}

.profile-box{
min-width:auto;
padding:10px;
}

.profile-info{
display:none;
}

.arrow-down{
display:none;
}

}

/* =========================
PAGE HEADER
========================= */

.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.page-header h2{
font-size:32px;
margin-bottom:5px;
}

.page-header p{
color:#64748b;
}

/* =========================
BUTTON
========================= */

.btn-add,
.btn-save,
.btn-edit,
.btn-delete{
padding:12px 18px;
border-radius:14px;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:600;
}

.btn-add,
.btn-save{
background:#dc2626;
color:#fff;
border:none;
cursor:pointer;
}

.btn-edit{
background:#dbeafe;
color:#1d4ed8;
}

.btn-delete{
background:#fee2e2;
color:#dc2626;
}

/* =========================
FORM
========================= */

.form-card{
background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
max-width:900px;
}

.form-card h2{
margin-bottom:30px;
}

.form-control{
width:100%;
height:55px;
border:1px solid #cbd5e1;
border-radius:16px;
padding:0 18px;
font-size:15px;
outline:none;
}

textarea.form-control{
height:auto;
padding:18px;
}

/* =========================
DOCUMENT PAGE
========================= */

.document-section{
padding:80px 50px;
background:#f8fafc;
}

.container{
max-width:1300px;
margin:auto;
}

.document-header{
text-align:center;
margin-bottom:40px;
}

.document-header h2{
font-size:42px;
margin-bottom:10px;
}

.document-header p{
color:#64748b;
}

/* =========================
SEARCH
========================= */

.search-form{
display:flex;
gap:15px;
margin-bottom:40px;
}

.search-form input{
flex:1;
height:58px;
border:1px solid #cbd5e1;
border-radius:18px;
padding:0 20px;
font-size:15px;
outline:none;
}

.search-form button{
height:58px;
padding:0 30px;
border:none;
border-radius:18px;
background:#dc2626;
color:#fff;
cursor:pointer;
font-size:15px;
font-weight:600;
}

/* =========================
DOCUMENT GRID
========================= */

.document-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:25px;
}

.document-card{
background:#fff;
padding:30px;
border-radius:25px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
transition:0.3s;
}

.document-card:hover{
transform:translateY(-5px);
}

.doc-icon{
width:70px;
height:70px;
background:#fee2e2;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:#dc2626;
margin-bottom:20px;
}

.doc-category{
display:inline-block;
padding:8px 15px;
background:#f1f5f9;
border-radius:50px;
font-size:13px;
margin-bottom:15px;
}

.document-card h3{
font-size:22px;
margin-bottom:20px;
line-height:1.5;
}

.doc-meta{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:25px;
color:#64748b;
font-size:14px;
}


.btn-view,
.btn-download{
flex:1;
height:48px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight:600;
}

.btn-view{
background:#dbeafe;
color:#2563eb;
}

.btn-download{
background:#dc2626;
color:#fff;
}

/* =========================
FORM CREATE DOCUMENT
========================= */

.form-card{
background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
max-width:1000px;
}

.form-group{
margin-bottom:25px;
}

.form-group label{
display:block;
margin-bottom:10px;
font-weight:600;
color:#0f172a;
}

.form-control{
width:100%;
height:55px;
border:1px solid #cbd5e1;
border-radius:16px;
padding:0 18px;
font-size:15px;
outline:none;
background:#fff;
}

.form-control:focus{
border-color:#dc2626;
}

textarea.form-control{
height:auto;
padding:18px;
resize:none;
}

.form-upload{
width:100%;
padding:15px;
border:2px dashed #cbd5e1;
border-radius:18px;
background:#f8fafc;
}

.form-group small{
display:block;
margin-top:8px;
color:#64748b;
font-size:13px;
}

/* =========================
FORM ACTION
========================= */

.form-action{
display:flex;
justify-content:flex-end;
gap:15px;
margin-top:35px;
}

.btn-reset,
.btn-save,
.btn-back{
height:50px;
padding:0 24px;
border:none;
border-radius:15px;
font-size:14px;
font-weight:600;
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
cursor:pointer;
}

.btn-reset{
background:#e2e8f0;
color:#0f172a;
}

.btn-save{
background:#dc2626;
color:#fff;
}

.btn-back{
background:#0f172a;
color:#fff;
}
/* =========================
CATEGORY DOCUMENT
========================= */

.category-document-section{
margin-top:80px;
}

.category-title{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
gap:20px;
}

.category-title h2{
font-size:34px;
margin-bottom:8px;
color:#0f172a;
}

.category-title p{
color:#64748b;
}

.btn-category-more{
height:48px;
padding:0 24px;
background:#0f172a;
color:#fff;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:0.3s;
}

.btn-category-more:hover{
background:#1e293b;
}

/* =========================
DOCUMENT GRID
========================= */

.document-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:25px;
}

/* =========================
DOCUMENT CARD
========================= */

.document-card{
background:#fff;
padding:30px;
border-radius:28px;
border:1px solid #e2e8f0;
transition:0.3s;
display:flex;
flex-direction:column;
}

.document-card:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px rgba(0,0,0,0.05);
}

.doc-icon{
width:70px;
height:70px;
background:#fee2e2;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:#dc2626;
margin-bottom:20px;
}

.document-card h3{
font-size:22px;
line-height:1.5;
margin-bottom:18px;
color:#0f172a;
}

.doc-meta{
display:flex;
flex-direction:column;
gap:10px;
font-size:14px;
color:#64748b;
margin-bottom:25px;
}

/* =========================
BUTTON
========================= */

.doc-action{
display:flex;
gap:12px;
margin-top:auto;
}

.btn-view,
/* .btn-download{
flex:1;
height:48px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:0.3s;
} */

.btn-view{
background:#dbeafe;
color:#2563eb;
}

.btn-view:hover{
background:#bfdbfe;
}

.btn-download{
background:#dc2626;
color:#fff;
}

.btn-download:hover{
background:#b91c1c;
}

/* =========================
EMPTY
========================= */

.empty-document{
grid-column:1/-1;
background:#fff;
padding:50px;
border-radius:28px;
text-align:center;
}

.empty-document i{
font-size:55px;
color:#94a3b8;
margin-bottom:15px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.category-title{
flex-direction:column;
align-items:flex-start;
}

.doc-action{
flex-direction:column;
}

}

/* =========================
DETAIL DOCUMENT
========================= */

.detail-document-page{
padding:60px 40px;
background:#f8fafc;
}

.detail-container{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:1fr 550px;
gap:30px;
align-items:start;
}

/* =========================
CARD
========================= */

.detail-card,
.pdf-preview,
.download-box{
background:#fff;
border-radius:28px;
padding:30px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.detail-card h2{
font-size:34px;
line-height:1.5;
margin-bottom:30px;
}

/* =========================
TABLE
========================= */

.detail-table{
width:100%;
border-collapse:collapse;
}

.detail-table tr{
border-bottom:1px solid #e2e8f0;
}

.detail-table td{
padding:18px 0;
vertical-align:top;
}

.detail-table td:first-child{
width:220px;
font-weight:700;
color:#64748b;
}

/* =========================
PDF
========================= */

.pdf-preview iframe{
border:none;
border-radius:18px;
}

/* =========================
DOWNLOAD
========================= */

.download-box{
margin-top:25px;
}

.download-box h3{
margin-bottom:20px;
}

.btn-download-file{
height:55px;
border-radius:18px;
background:#2563eb;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
text-decoration:none;
font-weight:600;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px){

.detail-container{
grid-template-columns:1fr;
}

}
/* =========================
FEATURE BUTTON
========================= */

.btn-detail-doc{
width:45px;
height:45px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:16px;
transition:0.3s;
color:#fff;
}

/* =========================
BUTTON COLORS
========================= */

.btn-detail-red{
background:#dc2626;
}

.btn-detail-red:hover{
background:#b91c1c;
}

.btn-detail-blue{
background:#2563eb;
}

.btn-detail-blue:hover{
background:#1d4ed8;
}

.btn-detail-green{
background:#16a34a;
}

.btn-detail-green:hover{
background:#15803d;
}

.btn-detail-yellow{
background:#ca8a04;
}

.btn-detail-yellow:hover{
background:#a16207;
}

.btn-detail-purple{
background:#9333ea;
}

.btn-detail-purple:hover{
background:#7e22ce;
}

.btn-detail-orange{
background:#ea580c;
}

.btn-detail-orange:hover{
background:#c2410c;
}

/* =========================
ICON FEATURE
========================= */

.feature-icon{
width:80px;
height:80px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
margin:auto auto 25px;
font-size:34px;
background:#fee2e2;
color:#dc2626;
}

.feature-card:nth-child(2) .feature-icon{
background:#dbeafe;
color:#2563eb;
}

.feature-card:nth-child(3) .feature-icon{
background:#dcfce7;
color:#16a34a;
}

.feature-card:nth-child(4) .feature-icon{
background:#fef9c3;
color:#ca8a04;
}

.feature-card:nth-child(5) .feature-icon{
background:#f3e8ff;
color:#9333ea;
}

.feature-card:nth-child(6) .feature-icon{
background:#ffedd5;
color:#ea580c;
}


/* =========================================
EDIT BUTTON
========================================= */

.btn-edit{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border-radius:12px;

    background:#ede9fe;

    color:#6d28d9;

    font-weight:600;

    text-decoration:none;

    transition:0.3s;

    min-width:90px;

}

.btn-edit:hover{

    background:#6d28d9;

    color:#fff;

    transform:translateY(-2px);

}



/* =========================================
DETAIL BUTTON
========================================= */

.btn-detail{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border-radius:12px;

    background:#ede9fe;

    color:#6d28d9;

    font-weight:600;

    text-decoration:none;

    transition:0.3s;

    min-width:90px;

}

.btn-detail:hover{

    background:#6d28d9;

    color:#fff;

    transform:translateY(-2px);

}




/* =========================================
DELETE BUTTON
========================================= */

.btn-delete{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border-radius:12px;

    background:#fee2e2;

    color:#dc2626;

    font-weight:600;

    text-decoration:none;

    transition:0.3s;

    min-width:90px;

}

.btn-delete:hover{

    background:#dc2626;

    color:#fff;

    transform:translateY(-2px);

}


/* =========================================
ACTION BUTTON WRAPPER
========================================= */

.action-group{

    display:flex;

    gap:10px;

    align-items:center;

    flex-wrap:wrap;

}


/* =========================================
DETAIL CARD
========================================= */

.detail-card{

    background:#fff;

    padding:30px;

    border-radius:24px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}


/* =========================================
DETAIL PROFILE
========================================= */

.detail-profile{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:30px;

}

.detail-photo{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #f1f5f9;

}

.detail-info h3{

    font-size:28px;

    margin-bottom:8px;

    color:#0f172a;

}

.detail-info p{

    color:#64748b;

    font-size:16px;

}


/* =========================================
DETAIL TABLE
========================================= */

.detail-table{

    width:100%;

    border-collapse:collapse;

}

.detail-table tr{

    border-bottom:
    1px solid #e2e8f0;

}

.detail-table th{

    width:220px;

    text-align:left;

    padding:18px;

    background:#f8fafc;

    color:#334155;

    font-weight:700;

}

.detail-table td{

    padding:18px;

    color:#475569;

}


/* =========================================
BADGE STATUS
========================================= */

.badge-success{

    display:inline-block;

    background:#dcfce7;

    color:#166534;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.badge-danger{

    display:inline-block;

    background:#fee2e2;

    color:#991b1b;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

/* =========================================
FIX SIDEBAR SUBMENU
========================================= */

.sidebar-menu{

    list-style:none;

    padding:0;

    margin:25px 0;

}

.sidebar-menu > li{

    margin-bottom:8px;

}

/* =========================
PARENT MENU
========================= */

.sidebar-menu > li > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 18px;

    border-radius:16px;

    color:#cbd5e1;

    text-decoration:none;

    transition:0.3s;

    font-weight:600;

}

.sidebar-menu > li > a:hover{

    background:#1e293b;

    color:#fff;

}

/* =========================
MENU LEFT
========================= */

.menu-left{

    display:flex;

    align-items:center;

    gap:14px;

}

/* =========================
SUBMENU
========================= */

.submenu{

    list-style:none;

    margin-top:8px;

    margin-left:18px;

    padding-left:14px;

    border-left:
    1px solid rgba(255,255,255,0.08);

}

.submenu li{

    margin-bottom:5px;

}

/* =========================
SUBMENU LINK
========================= */

.submenu li a{

    display:flex !important;

    align-items:center;

    gap:12px;

    padding:11px 14px !important;

    border-radius:12px;

    color:#94a3b8 !important;

    font-size:14px;

    font-weight:500;

    background:transparent !important;

    transition:0.3s;

}

.submenu li a:hover{

    background:
    rgba(255,255,255,0.06) !important;

    color:#fff !important;

}

/* =========================
ACTIVE MENU
========================= */

.active-menu{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    ) !important;

    color:#fff !important;

}

/* =========================
ACTIVE SUBMENU
========================= */

.submenu .active-menu{

    background:
    rgba(37,99,235,0.2) !important;

    color:#fff !important;

}

/* =========================
ARROW
========================= */

.menu-arrow{

    font-size:11px;

    opacity:0.7;

}

/* =========================
COLLAPSE
========================= */

.sidebar-hide .submenu{

    display:none;

}/* =========================================
SUBMENU ANIMATION
========================================= */

.submenu{

    display:none;

    animation:
    fadeMenu 0.25s ease;

}

.submenu-open
.menu-arrow{

    transform:rotate(180deg);

}

.menu-arrow{

    transition:0.3s;

}

@keyframes fadeMenu{

    from{

        opacity:0;
        transform:translateY(-5px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }
}

/* =========================================
ICON GRID
========================================= */

.icon-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(70px,1fr));

    gap:12px;

    margin-top:12px;

}

/* =========================================
ICON ITEM
========================================= */

.icon-item{

    height:65px;

    border:
    1px solid #e2e8f0;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:0.3s;

    background:#fff;

}

.icon-item i{

    font-size:22px;

    color:#334155;

}

.icon-item:hover{

    border-color:#2563eb;

    transform:translateY(-2px);

}

/* =========================================
ACTIVE ICON
========================================= */

.active-icon{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

    border-color:#2563eb;

}

.active-icon i{

    color:#fff;

}

/* =========================================
PREVIEW
========================================= */

.selected-icon-preview{

    margin-top:18px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:14px;

    background:#f8fafc;

    border:
    1px solid #e2e8f0;

}

.selected-icon-preview i{

    font-size:28px;

    color:#2563eb;

}
.icon-item i{

    font-size:26px;

    color:#334155;

    display:block;

}

/* =========================================
FEATURE DOCUMENT ITEM
========================================= */

.feature-document-item{

    padding:18px;

    border-radius:18px;

    background:#fff;

    border:
    1px solid #e2e8f0;

    margin-top:14px;

    transition:0.3s;

}

.feature-document-item:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.06);

}

/* =========================================
TOP
========================================= */

.feature-document-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

}

/* =========================================
INFO
========================================= */

.feature-document-info{

    flex:1;

}

.feature-document-info h4{

    font-size:22px;

    font-weight:700;

    color:#1e293b;

    margin-bottom:8px;

    line-height:1.4;

}

.feature-document-info span{

    font-size:15px;

    color:#64748b;

}

/* =========================================
STATS
========================================= */

.feature-doc-stats{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:16px;

    padding-top:14px;

    border-top:
    1px dashed #cbd5e1;

}

.feature-doc-stats span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#64748b;

}

.feature-doc-stats i{

    color:#94a3b8;

}

/* =========================================
BUTTON
========================================= */

.feature-document-button{

    display:flex;

    align-items:center;

    justify-content:center;

}

.btn-detail-doc{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

    text-decoration:none;

    transition:0.3s;

}

.btn-detail-doc:hover{

    transform:scale(1.08);

}

/* =========================================
BUTTON COLORS
========================================= */

.btn-detail-purple{

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
    );

}

.btn-detail-blue{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

}

.btn-detail-green{

    background:
    linear-gradient(
    135deg,
    #059669,
    #10b981
    );

}

.btn-detail-yellow{

    background:
    linear-gradient(
    135deg,
    #d97706,
    #f59e0b
    );

}


/* =========================================
FOOTER
========================================= */

.feature-doc-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:16px;

    padding-top:14px;

    border-top:
    1px dashed #cbd5e1;

}

/* =========================================
STATS
========================================= */

.feature-doc-stats{

    display:flex;

    align-items:center;

    gap:18px;

}

.feature-doc-stats span{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:13px;

    color:#64748b;

}

.feature-doc-stats i{

    color:#94a3b8;

}

/* =========================================
BUTTON INLINE
========================================= */

.btn-detail-inline{

    width:36px;

    height:36px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    transition:0.3s;

    font-size:14px;

}

.btn-detail-inline:hover{

    transform:scale(1.08);

}

/* =========================================
FEATURE SECTION
========================================= */

.feature-section{

    padding:90px 0;

    background:#f8fafc;

}

/* =========================================
TITLE
========================================= */

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:48px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:16px;

}

.section-title p{

    font-size:18px;

    color:#64748b;

}

/* =========================================
GRID
========================================= */

.feature-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

/* =========================================
CARD LINK
========================================= */

.feature-card-link{

    text-decoration:none;

    color:inherit;

}

/* =========================================
CARD
========================================= */

.feature-document-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:
    1px solid #e2e8f0;

    transition:0.35s;

    height:100%;

    position:relative;

    overflow:hidden;

}

.feature-document-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 50px rgba(0,0,0,0.08);

}



/* =========================================
TITLE
========================================= */

.feature-document-card h3{

    font-size:32px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:16px;

    line-height:1.3;

}

/* =========================================
DESC
========================================= */

.feature-desc{

    font-size:16px;

    line-height:1.9;

    color:#64748b;

    margin-bottom:28px;

}

/* =========================================
TOTAL
========================================= */

.feature-total{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:35px;

}

.feature-total-box{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#dc2626;

}

.feature-total-box span{

    color:#fff;

    font-size:24px;

    font-weight:800;

}

.feature-total p{

    font-size:16px;

    font-weight:600;

    color:#475569;

}

/* =========================================
BUTTON
========================================= */

.feature-open-button{

    height:50px;

    padding:0 24px;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:15px;

    font-weight:700;

}

/* =========================================
BUTTON COLOR
========================================= */

.btn-detail-blue{

    background:#2563eb;

}

.btn-detail-green{

    background:#059669;

}

.btn-detail-yellow{

    background:#d97706;

}

.btn-detail-purple{

    background:#7c3aed;

}

.btn-detail-orange{

    background:#ea580c;

}


/* =========================================
SECTION
========================================= */

.document-section,
.detail-section{

    padding:80px 0;

    background:#f8fafc;

}

/* =========================================
HEADER
========================================= */

.document-header{

    margin-bottom:35px;

}

.document-header h2{

    font-size:42px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:12px;

}

.document-header p{

    color:#64748b;

    font-size:16px;

}

/* =========================================
TABLE
========================================= */

.document-table-wrapper{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:
    1px solid #e2e8f0;

}

.document-table{

    width:100%;

    border-collapse:collapse;

}

.document-table thead{

    background:#0f172a;

}

.document-table th{

    padding:18px;

    color:#fff;

    font-size:14px;

    text-align:left;

}

.document-table td{

    padding:18px;

    border-bottom:
    1px solid #f1f5f9;

    font-size:14px;

    color:#334155;

}

.document-table tr:hover{

    background:#f8fafc;

}

.doc-title{

    font-weight:700;

    color:#0f172a;

}

/* =========================================
BADGE
========================================= */

.table-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    font-size:13px;

    color:#64748b;

}

/* =========================================
BUTTON DETAIL
========================================= */

.btn-table-detail{

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

}

/* =========================================
DETAIL CARD
========================================= */

.detail-card{

    background:#fff;

    padding:45px;

    border-radius:28px;

    border:
    1px solid #e2e8f0;

}

/* =========================================
DETAIL HEADER
========================================= */

.detail-header h2{

    font-size:38px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:20px;

}

.detail-meta{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.detail-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748b;

}

/* =========================================
DESCRIPTION
========================================= */

.detail-description{

    line-height:2;

    color:#475569;

    margin-bottom:40px;

}

/* =========================================
ACTION
========================================= */

.detail-action{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/* =========================================
BUTTON
========================================= */

.btn-view-doc,
/* .btn-download-doc{

    height:52px;

    padding:0 26px;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

}

.btn-view-doc{

    background:#2563eb;

}

.btn-download-doc{

    background:#059669;

} */

/* =========================================
FEATURE SECTION
========================================= */

.feature-section{

    padding:90px 0;

    background:#f8fafc;

}

/* =========================================
SECTION TITLE
========================================= */

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:46px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:14px;

}

.section-title p{

    font-size:17px;

    color:#64748b;

}

/* =========================================
FEATURE GRID
========================================= */

.feature-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(240px,1fr));

    gap:18px;

}

/* =========================================
LINK
========================================= */

.feature-card-link{

    text-decoration:none;

    color:inherit;

}

/* =========================================
CARD
========================================= */

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:20px;

    border:
    1px solid #e2e8f0;

    transition:0.3s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.feature-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.06);

}

/* =========================================
TOP
========================================= */

.feature-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;

}

/* =========================================
ICON
========================================= */

.feature-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    color:#fff;

}

/* =========================================
TOTAL
========================================= */

.feature-total-box{

    min-width:54px;

    height:36px;

    padding:0 14px;

    border-radius:12px;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

}

.feature-total-box span{

    font-size:15px;

    font-weight:800;

    color:#0f172a;

}

/* =========================================
CONTENT
========================================= */

.feature-content{

    flex:1;

}

.feature-content h3{

    font-size:17px;

    font-weight:800;

    line-height:1.5;

    color:#0f172a;

    margin-bottom:8px;

}

.feature-desc{

    font-size:13px;

    line-height:1.7;

    color:#64748b;

    margin-bottom:18px;

}

/* =========================================
FOOTER
========================================= */

.feature-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding-top:14px;

    border-top:
    1px solid #e2e8f0;

}

/* =========================================
TOTAL TEXT
========================================= */

/* =========================================
TOTAL TEXT
========================================= */

.feature-total-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.4;

    font-size:13px;

    color:#64748b;

    font-weight:700;

    min-width:85px;

}

/* =========================================
BUTTON
========================================= */

.feature-open-button{

    display:flex;
white-space:nowrap;
flex-shrink:0;
    align-items:center;

    gap:8px;

    padding:9px 14px;

    border-radius:12px;

    font-size:12px;

    font-weight:700;

    color:#fff;

}

/* =========================================
BUTTON COLORS
========================================= */

.btn-detail-blue{

    background:#2563eb;

}

.btn-detail-green{

    background:#10b981;

}

.btn-detail-yellow{

    background:#f59e0b;

}

.btn-detail-purple{

    background:#7c3aed;

}

.btn-detail-orange{

    background:#f97316;

}

.btn-detail-red{

    background:#ef4444;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .feature-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}

@media(max-width:576px){

    .feature-grid{

        grid-template-columns:1fr;

    }

}

/* =========================================
BUTTON
========================================= */

.feature-open-button{

    height:42px;

    padding:0 18px;

    border-radius:14px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:14px;

    font-weight:700;

}

/* =========================================
BUTTON COLORS
========================================= */

.btn-detail-blue{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

}

.btn-detail-green{

    background:
    linear-gradient(
    135deg,
    #059669,
    #10b981
    );

}

.btn-detail-yellow{

    background:
    linear-gradient(
    135deg,
    #d97706,
    #f59e0b
    );

}

.btn-detail-purple{

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
    );

}

.btn-detail-orange{

    background:
    linear-gradient(
    135deg,
    #ea580c,
    #f97316
    );

}


/* =========================================
KATEGORI PAGE
========================================= */

.kategori-page{

    width:100%;

    padding:80px 0;

    background:#f8fafc;

}

.kategori-container{

    width:92%;

    max-width:1300px;

    margin:auto;

}

/* =========================================
HEADER
========================================= */

.kategori-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.kategori-header-left{

    flex:1;

}

.kategori-header-left h1{

    font-size:48px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:14px;

}

.kategori-header-left p{

    font-size:17px;

    color:#64748b;

    line-height:1.8;

}

/* =========================================
TOTAL
========================================= */

.kategori-total{

    width:130px;

    height:130px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #dc2626,
    #ef4444
    );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#fff;

    flex-shrink:0;

}

.kategori-total span{

    font-size:38px;

    font-weight:800;

    line-height:1;

}

.kategori-total small{

    margin-top:10px;

    font-size:14px;

}

/* =========================================
LIST
========================================= */

.kategori-list{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* =========================================
ITEM
========================================= */

.kategori-item{

    width:100%;

    background:#fff;

    border-radius:26px;

    border:
    1px solid #e2e8f0;

    padding:30px;

    display:flex;

    justify-content:space-between;

    gap:30px;

    flex-wrap:wrap;

    transition:0.3s;

}

.kategori-item:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.06);

}

/* =========================================
LEFT
========================================= */

.kategori-left{

    flex:1;

    min-width:300px;

}

.kategori-left h3{

    font-size:30px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:18px;

    line-height:1.4;

}

/* =========================================
META
========================================= */

.kategori-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:18px;

}

.kategori-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#64748b;

}

/* =========================================
DESC
========================================= */

.kategori-left p{

    font-size:15px;

    color:#475569;

    line-height:1.9;

}

/* =========================================
RIGHT
========================================= */

.kategori-right{

    width:210px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

}

/* =========================================
STATS
========================================= */

.kategori-stats{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.kategori-stats span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#64748b;

}

/* =========================================
BUTTON
========================================= */

.btn-detail-kategori{

    width:100%;

    height:52px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-weight:700;

    transition:0.3s;

}

.btn-detail-kategori:hover{

    transform:translateY(-2px);

}

/* =========================================
EMPTY
========================================= */

.empty-kategori{

    background:#fff;

    border-radius:24px;

    padding:60px;

    text-align:center;

    color:#94a3b8;

    border:
    1px solid #e2e8f0;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .kategori-header-left h1{

        font-size:34px;

    }

    .kategori-item{

        padding:22px;

    }

    .kategori-left h3{

        font-size:24px;

    }

    .kategori-right{

        width:100%;

        align-items:flex-start;

    }

    .btn-detail-kategori{

        width:100%;

    }

}

/* =========================================
MANAGEMENT DOKUMEN
========================================= */

.management-document-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

    gap:25px;

}

/* =========================================
CARD
========================================= */

.management-document-card{

    background:#fff;

    border-radius:24px;

    border:
    1px solid #e2e8f0;

    padding:28px;

    transition:0.3s;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:320px;

}

.management-document-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.06);

}

/* =========================================
TOP
========================================= */

.management-document-top{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-bottom:20px;

    flex-wrap:wrap;

}

/* =========================================
BADGE
========================================= */

.document-badge{

    padding:7px 14px;

    border-radius:12px;

    font-size:12px;

    font-weight:700;

}

/* STATUS */

.publish{

    background:#dcfce7;

    color:#166534;

}

.draft{

    background:#fef3c7;

    color:#92400e;

}

/* ACCESS */

.public{

    background:#dbeafe;

    color:#1d4ed8;

}

.internal{

    background:#fee2e2;

    color:#dc2626;

}

/* =========================================
TITLE
========================================= */

.management-document-card h3{

    font-size:24px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:18px;

    line-height:1.5;

}

/* =========================================
META
========================================= */

.management-document-meta{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:18px;

}

.management-document-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#64748b;

}

/* =========================================
DESCRIPTION
========================================= */

.management-document-card p{

    color:#475569;

    line-height:1.8;

    font-size:14px;

    margin-bottom:22px;

}

/* =========================================
STATS
========================================= */

.management-document-stats{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:25px;

}

.management-document-stats span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748b;

    font-size:14px;

}

/* =========================================
ACTION
========================================= */

.management-document-action{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

/* =========================================
BUTTON
========================================= */

.btn-doc-detail,
.btn-doc-edit{

    flex:1;

    min-width:120px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:0.3s;

}

.btn-doc-detail{

    background:#2563eb;

}

.btn-doc-edit{

    background:#d97706;

}

.btn-doc-detail:hover,
.btn-doc-edit:hover{

    transform:translateY(-2px);

}

/* =========================================
DETAIL PAGE
========================================= */

.management-detail-wrapper{

    display:grid;

    grid-template-columns:
    430px 1fr;

    gap:30px;

}

/* =========================================
DETAIL CARD
========================================= */

.management-detail-card,
.management-preview-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    border:
    1px solid #e2e8f0;

}

/* =========================================
DETAIL TITLE
========================================= */

.management-detail-card h2{

    font-size:30px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:28px;

    line-height:1.5;

}

/* =========================================
DETAIL TABLE
========================================= */

.management-detail-table{

    width:100%;

    border-collapse:collapse;

}

.management-detail-table td{

    padding:16px 0;

    border-bottom:
    1px solid #f1f5f9;

    vertical-align:top;

    font-size:14px;

    line-height:1.8;

}

.management-detail-table td:first-child{

    width:130px;

    font-weight:700;

    color:#334155;

}

/* =========================================
DETAIL ACTION
========================================= */

.management-detail-action{

    display:flex;

    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}

/* =========================================
PDF PREVIEW
========================================= */

.management-preview-card{

    overflow:hidden;

}

.management-preview-card iframe{

    border:none;

    border-radius:18px;

}

/* =========================================
EMPTY DATA
========================================= */

.empty-data{

    background:#fff;

    border-radius:24px;

    border:
    1px solid #e2e8f0;

    padding:60px;

    text-align:center;

    color:#94a3b8;

    font-size:16px;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px){

    .management-detail-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .management-document-card{

        padding:22px;

    }

    .management-document-card h3{

        font-size:20px;

    }

    .management-detail-card{

        padding:22px;

    }

    .management-detail-card h2{

        font-size:24px;

    }

    .management-document-action{

        flex-direction:column;

    }

    .btn-doc-detail,
    .btn-doc-edit{

        width:100%;

    }

}

/* =========================================
SEARCH
========================================= */

.management-search-box{

    background:#fff;

    border-radius:18px;

    border:
    1px solid #e2e8f0;

    height:58px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 20px;

    margin-bottom:35px;

}

.management-search-box i{

    color:#94a3b8;

}

.management-search-box input{

    width:100%;

    border:none;

    outline:none;

    font-size:15px;

    background:none;

}

/* =========================================
CATEGORY
========================================= */

.management-category-table{

    margin-bottom:45px;

}

.management-category-header{

    margin-bottom:18px;

}

.management-category-header h3{

    font-size:28px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:4px;

}

.management-category-header p{

    color:#64748b;

    font-size:14px;

}

/* =========================================
TABLE
========================================= */

.management-document-table{

    width:100%;

    border-collapse:collapse;

}

.management-document-table th{

    background:#f8fafc;

    padding:18px;

    text-align:left;

    font-size:14px;

    color:#334155;

}

.management-document-table td{

    padding:18px;

    border-bottom:
    1px solid #f1f5f9;

    font-size:14px;

    vertical-align:middle;

}

/* =========================================
TITLE
========================================= */

.document-title-cell{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.document-title-cell strong{

    color:#0f172a;

}

.document-title-cell small{

    color:#94a3b8;

}

/* =========================================
ACTION
========================================= */

.table-action{

    display:flex;

    gap:10px;

}

.btn-table-action{

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

}

.btn-view{

    background:#2563eb;

}



/* =========================================
EBOOK
========================================= */

.ebook-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));

    gap:25px;

}

.ebook-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:
    1px solid #e2e8f0;

    transition:0.3s;

}

.ebook-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.08);

}

.ebook-card img{

    width:100%;

    height:320px;

    object-fit:cover;

}

.ebook-card h3{

    padding:20px 20px 5px;

    font-size:18px;

    font-weight:800;

}

.ebook-card p{

    padding:0 20px;

    color:#64748b;

    font-size:14px;

}

.ebook-action{

    display:flex;

    gap:10px;

    padding:20px;

}

.ebook-action a{

    flex:1;

    height:45px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

}

.btn-view{

    background:#2563eb;

}


/* =========================================
EBOOK FORM
========================================= */

.ebook-form{

    width:100%;

}

/* =========================================
GRID
========================================= */

.ebook-form-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-bottom:25px;

}

/* =========================================
FORM GROUP
========================================= */

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:25px;

}

.form-group label{

    font-size:14px;

    font-weight:700;

    color:#0f172a;

}

/* =========================================
INPUT
========================================= */

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    min-height:55px;

    border:
    1px solid #dbe2ea;

    border-radius:16px;

    padding:15px 18px;

    background:#fff;

    font-size:14px;

    outline:none;

    transition:0.3s;

}

/* =========================================
TEXTAREA
========================================= */

.form-group textarea{

    min-height:140px;

    resize:vertical;

}

/* =========================================
FOCUS
========================================= */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.08);

}

/* =========================================
UPLOAD GRID
========================================= */

.ebook-upload-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

    margin-top:10px;

}

/* =========================================
UPLOAD BOX
========================================= */

.upload-box{

    background:#f8fafc;

    border:
    2px dashed #cbd5e1;

    border-radius:20px;

    padding:25px;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.upload-box label{

    font-size:14px;

    font-weight:700;

    color:#0f172a;

}

.upload-box input[type=file]{

    background:#fff;

    border-radius:14px;

    padding:14px;

    border:
    1px solid #e2e8f0;

}

/* =========================================
BUTTON
========================================= */

.form-action{

    margin-top:35px;

}

.btn-save{

    height:55px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    background:#ef4444;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    gap:12px;

    transition:0.3s;

}

.btn-save:hover{

    transform:translateY(-2px);

    background:#dc2626;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .ebook-form-grid,
    .ebook-upload-grid{

        grid-template-columns:1fr;

    }

}

/* =========================================
EBOOK COVER
========================================= */

.ebook-cover{

    width:100%;

    height:320px;

    overflow:hidden;

    background:#f1f5f9;

}

.ebook-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* =========================================
EMPTY COVER
========================================= */

.ebook-cover-empty{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e2e8f0;

}

.ebook-cover-empty i{

    font-size:70px;

    color:#94a3b8;

}

/* =========================================
BODY
========================================= */

.ebook-body{

    padding:20px;

}

/* =========================================
CATEGORY
========================================= */

.ebook-category{

    display:inline-flex;

    padding:6px 12px;

    background:#dbeafe;

    color:#2563eb;

    border-radius:12px;

    font-size:12px;

    font-weight:700;

    margin-bottom:15px;

}

/* =========================================
TITLE
========================================= */

.ebook-card h3{

    font-size:18px;

    font-weight:800;

    color:#0f172a;

    line-height:1.5;

    margin-bottom:8px;

}

/* =========================================
AUTHOR
========================================= */

.ebook-author{

    color:#64748b;

    font-size:14px;

    margin-bottom:18px;

}

/* =========================================
STATS
========================================= */

.ebook-stats{

    display:flex;

    gap:18px;

    margin-bottom:20px;

}

.ebook-stats span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748b;

    font-size:13px;

}

/* =========================================
ACTION
========================================= */

.ebook-action{

    display:flex;

    gap:10px;

}


/* =========================================
TABLE COVER
========================================= */

.table-cover{

    width:70px;

    height:100px;

    object-fit:cover;

    border-radius:12px;

    border:
    1px solid #e2e8f0;

}

/* =========================================
TABLE TITLE
========================================= */

.ebook-table-title h4{

    font-size:15px;

    font-weight:700;

    margin-bottom:6px;

}

.ebook-table-title span{

    font-size:12px;

    color:#64748b;

}

/* =========================================
STATUS
========================================= */

.status-badge{

    padding:7px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.status-badge.publish{

    background:#dcfce7;

    color:#15803d;

}

.status-badge.draft{

    background:#fee2e2;

    color:#dc2626;

}

/* =========================================
DOWNLOAD BUTTON
========================================= */
/* 
.btn-download{

    flex:1;

    height:45px;

    border-radius:14px;

    background:#ef4444;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

} */

/* =========================================
COMPACT HERO STATISTIC
========================================= */

.compact-preview-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:14px;

}

/* =========================================
CARD
========================================= */

.compact-preview-grid .preview-card{

    padding:16px;

    border-radius:18px;

    min-height:auto;

}

/* =========================================
ICON
========================================= */

.compact-preview-grid .preview-icon{

    width:46px;

    height:46px;

    border-radius:14px;

    font-size:18px;

}

/* =========================================
TEXT
========================================= */

.compact-preview-grid .preview-info p{

    font-size:12px;

    margin-bottom:4px;

}

.compact-preview-grid .preview-info h2{

    font-size:22px;

    line-height:1.2;

}

/* =========================================
PREVIEW BOX
========================================= */

.preview-box{

    padding:22px;

}

/* =========================================
HEADER
========================================= */

.preview-header{

    margin-bottom:18px;

}

.preview-header h3{

    font-size:18px;

}

/* =========================================
HERO SECTION
========================================= */

.djih-hero{

    padding:70px 0;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .compact-preview-grid{

        grid-template-columns:1fr;

    }

}
/* =========================================
WRAPPER
========================================= */

.ebook-wrapper{

    padding:0 10px;

}

/* =========================================
GRID
========================================= */

.ebook-public-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(180px,1fr));

    gap:20px;

}

/* =========================================
CARD
========================================= */

.ebook-public-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:
    1px solid #e2e8f0;

    text-decoration:none;

    transition:0.3s;

    display:flex;

    flex-direction:column;

}

.ebook-public-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(0,0,0,0.07);

}

/* =========================================
COVER
========================================= */

.ebook-public-cover{

    width:100%;

    height:250px;

    background:#f1f5f9;

    overflow:hidden;

}

.ebook-public-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* =========================================
EMPTY
========================================= */

.ebook-public-empty{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ebook-public-empty i{

    font-size:50px;

    color:#94a3b8;

}

/* =========================================
BODY
========================================= */

.ebook-public-body{

    padding:16px;

}

/* =========================================
TITLE
========================================= */

.ebook-public-body h3{

    font-size:15px;

    font-weight:800;

    line-height:1.5;

    color:#0f172a;

    margin-bottom:6px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* =========================================
AUTHOR
========================================= */

.ebook-public-body p{

    font-size:12px;

    color:#64748b;

    margin-bottom:14px;

}

/* =========================================
BUTTON
========================================= */

.ebook-public-button{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:12px;

    border-top:
    1px solid #e2e8f0;

    font-size:12px;

    font-weight:700;

    color:#2563eb;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .ebook-public-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:16px;

    }

}

@media(max-width:480px){

    .ebook-public-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

    .ebook-public-cover{

        height:210px;

    }

}

/* =========================================
DETAIL PAGE
========================================= */

.detail-document-page{

    padding:50px 0;

    background:#f8fafc;

}

/* =========================================
CONTAINER
========================================= */

.detail-container{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:
    360px 1fr;

    gap:28px;

}

/* =========================================
LEFT
========================================= */

.detail-left{

    position:sticky;

    top:100px;

    height:fit-content;

}

/* =========================================
CARD
========================================= */

.detail-card{

    background:#fff;

    border-radius:26px;

    padding:24px;

    border:
    1px solid #e2e8f0;

}

/* =========================================
COVER
========================================= */

.ebook-detail-cover-small{

    width:180px;

    height:250px;

    margin:auto;

    margin-bottom:24px;

    border-radius:20px;

    overflow:hidden;

    background:#f1f5f9;

    border:
    1px solid #e2e8f0;

}

.ebook-detail-cover-small img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* =========================================
TITLE
========================================= */

.detail-card h2{

    font-size:28px;

    font-weight:800;

    line-height:1.5;

    text-align:center;

    color:#0f172a;

    margin-bottom:24px;

}

/* =========================================
TABLE
========================================= */

.detail-table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:24px;

}

.detail-table tr{

    border-bottom:
    1px solid #e2e8f0;

}

.detail-table td{

    padding:14px 0;

    font-size:14px;

    vertical-align:top;

}

.detail-table td:first-child{

    width:110px;

    font-weight:700;

    color:#0f172a;

}

.detail-table td:last-child{

    color:#475569;

    line-height:1.7;

}

/* =========================================
STATS
========================================= */
/* =========================================
STATS
========================================= */

.document-stats{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:12px;

    margin-bottom:20px;

}

.stats-box{

    background:#f8fafc;

    border:
    1px solid #e2e8f0;

    border-radius:16px;

    padding:14px;

    display:flex;

    align-items:center;

    gap:12px;

}

/* =========================================
ICON
========================================= */

.stats-box i{

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

}

/* =========================================
ICON COLOR
========================================= */

.stats-box:first-child i{

    background:#dbeafe;

    color:#2563eb;

}

.stats-box:last-child i{

    background:#dcfce7;

    color:#16a34a;

}

/* =========================================
TEXT
========================================= */

.stats-box h3{

    font-size:22px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:2px;

    line-height:1;

}

.stats-box p{

    font-size:12px;

    color:#64748b;

    margin:0;

}
/* =========================================
ACTION
========================================= */

.ebook-detail-action{

    display:flex;

    gap:14px;

}

.btn-read-ebook,
.btn-download-ebook{

    flex:1;

    height:50px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:0.3s;

}

.btn-read-ebook{

    background:#2563eb;

    color:#fff;

}

.btn-download-ebook{

    background:#10b981;

    color:#fff;

}

.btn-read-ebook:hover,
.btn-download-ebook:hover{

    transform:translateY(-2px);

}

/* =========================================
RIGHT
========================================= */

.detail-right{

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    border:
    1px solid #e2e8f0;

}

/* =========================================
PDF
========================================= */

.pdf-preview iframe{

    border:none;

    display:block;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px){

    .detail-container{

        grid-template-columns:1fr;

    }

    .detail-left{

        position:relative;

        top:auto;

    }

}

@media(max-width:576px){

    .ebook-detail-action{

        flex-direction:column;

    }

}

/* =========================================
EBOOK SECTION FIX
========================================= */

.feature-section{

    padding:70px 0;

    background:#f8fafc;

}

/* =========================================
WRAPPER
========================================= */

.ebook-wrapper{

    width:100%;

    max-width:1300px;

    margin:auto;

    padding:0 40px;

}

/* =========================================
GRID
========================================= */

.ebook-public-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(190px,1fr));

    gap:24px;

    align-items:start;

}

/* =========================================
CARD
========================================= */

.ebook-public-card{

    width:100%;

    max-width:220px;

    margin:auto;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:
    1px solid #e2e8f0;

    text-decoration:none;

    transition:0.3s;

    display:flex;

    flex-direction:column;

}

.ebook-public-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 30px rgba(0,0,0,0.06);

}

/* =========================================
COVER
========================================= */

.ebook-public-cover{

    width:100%;

    height:280px;

    background:#f1f5f9;

    overflow:hidden;

}

.ebook-public-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* =========================================
BODY
========================================= */

.ebook-public-body{

    padding:16px;

}

.ebook-public-body h3{

    font-size:17px;

    font-weight:700;

    color:#0f172a;

    line-height:1.5;

    margin-bottom:6px;

}

.ebook-public-body p{

    font-size:13px;

    color:#64748b;

    margin-bottom:16px;

}

/* =========================================
BUTTON
========================================= */

.ebook-public-button{

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:13px;

    font-weight:700;

    color:#2563eb;

    padding-top:14px;

    border-top:
    1px solid #e2e8f0;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .ebook-wrapper{

        padding:0 20px;

    }

    .ebook-public-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:18px;

    }

}

@media(max-width:576px){

    .ebook-public-grid{

        grid-template-columns:1fr;

    }

}

/* =========================================
DETAIL LAYOUT
========================================= */

.ebook-detail-layout{

    display:grid;

    grid-template-columns:
    320px 1fr;

    gap:24px;

    align-items:start;

}

/* =========================================
SIDEBAR
========================================= */

.ebook-sidebar{

    background:#fff;

    border-radius:24px;

    border:
    1px solid #e2e8f0;

    overflow:hidden;

    position:sticky;

    top:90px;

}

/* =========================================
COVER
========================================= */

.ebook-cover-box{

    width:100%;

    height:420px;

    background:#f1f5f9;

}

.ebook-cover-box img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* =========================================
INFO
========================================= */

.ebook-info-box{

    padding:22px;

}

/* =========================================
CATEGORY
========================================= */

.ebook-category{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    background:#dbeafe;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    margin-bottom:14px;

}

/* =========================================
TITLE
========================================= */

.ebook-info-box h2{

    font-size:28px;

    font-weight:800;

    line-height:1.4;

    color:#0f172a;

    margin-bottom:10px;

}

/* =========================================
AUTHOR
========================================= */

.ebook-author{

    font-size:15px;

    color:#64748b;

    margin-bottom:18px;

}

/* =========================================
STATS
========================================= */

.ebook-mini-stats{

    display:flex;

    gap:18px;

    margin-bottom:20px;

}

.ebook-mini-stats span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#334155;

}

/* =========================================
DESCRIPTION
========================================= */

.ebook-description{

    font-size:14px;

    line-height:1.8;

    color:#475569;

    margin-bottom:24px;

}

/* =========================================
ACTION
========================================= */

.ebook-action-button{

    display:flex;

    gap:12px;

}

.btn-read,


.btn-read{

    background:#2563eb;

    color:#fff;

}

.btn-download{

    background:#10b981;

    color:#fff;

}

.btn-read:hover,
.btn-download:hover{

    transform:translateY(-2px);

}

/* =========================================
VIEWER
========================================= */

.ebook-viewer{

    background:#fff;

    border-radius:24px;

    border:
    1px solid #e2e8f0;

    overflow:hidden;

}

/* =========================================
HEADER
========================================= */

.viewer-header{

    padding:18px 24px;

    border-bottom:
    1px solid #e2e8f0;

}

.viewer-header h3{

    font-size:18px;

    font-weight:700;

    color:#0f172a;

}

/* =========================================
IFRAME
========================================= */

.ebook-viewer iframe{

    border:none;

    display:block;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:992px){

    .ebook-detail-layout{

        grid-template-columns:1fr;

    }

    .ebook-sidebar{

        position:relative;

        top:auto;

    }

}

@media(max-width:576px){

    .ebook-action-button{

        flex-direction:column;

    }

}

/* =========================================
PAGE BANNER
========================================= */

.page-banner{

    padding:90px 20px;

    background:
    linear-gradient(
    135deg,
    #dc2626,
    #be123c
    );

    text-align:center;

    color:#fff;

}

.page-banner-content h1{

    font-size:52px;

    font-weight:800;

    margin-bottom:14px;

}

.page-banner-content p{

    font-size:18px;

    opacity:0.9;

}

/* =========================================
SECTION
========================================= */

.frontend-page-section{

    padding:70px 0;

    background:#f8fafc;

}

/* =========================================
CONTAINER
========================================= */

.frontend-container{

    width:min(1200px,92%);

    margin:auto;

}

/* =========================================
CARD
========================================= */

.frontend-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:
    1px solid #e2e8f0;

    line-height:1.9;

}

/* =========================================
FEATURE GRID
========================================= */

.feature-page-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

/* =========================================
FEATURE CARD
========================================= */

.feature-page-card{

    background:#fff;

    border-radius:24px;

    padding:30px;

    border:
    1px solid #e2e8f0;

    text-align:center;

}

.feature-page-card i{

    font-size:42px;

    color:#dc2626;

    margin-bottom:20px;

}

.feature-page-card h3{

    font-size:22px;

    margin-bottom:12px;

}

/* =========================================
CONTACT
========================================= */

.contact-item{

    display:flex;

    gap:20px;

    margin-bottom:28px;

}

.contact-item i{

    width:55px;

    height:55px;

    border-radius:16px;

    background:#fee2e2;

    color:#dc2626;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:768px){

    .page-banner-content h1{

        font-size:36px;

    }

}

.pagination{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;

}

.pagination a{

    min-width:42px;

    height:42px;

    padding:0 14px;

    border-radius:12px;

    background:#fff;

    border:
    1px solid #e2e8f0;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#334155;

    font-weight:600;

}

.pagination a:hover{

    background:#f1f5f9;

}

.active-page{

    background:#dc2626 !important;

    color:#fff !important;

    border-color:#dc2626 !important;

}
/* =========================================
ANALYTICS GRID
========================================= */

.analytics-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

    margin-bottom:28px;

}

/* =========================================
CARD
========================================= */

.analytics-card{

    background:#fff;

    border-radius:24px;

    padding:24px;

    border:
    1px solid #e2e8f0;

    display:flex;

    align-items:center;

    gap:18px;

}

.analytics-card p{

    font-size:14px;

    color:#64748b;

    margin-bottom:6px;

}

.analytics-card h2{

    font-size:32px;

    font-weight:800;

    color:#0f172a;

}

/* =========================================
ICON
========================================= */

.analytics-icon{

    width:65px;

    height:65px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#fff;

}

.blue{
background:#2563eb;
}

.green{
background:#10b981;
}

.orange{
background:#f97316;
}

.purple{
background:#7c3aed;
}

.red{
background:#ef4444;
}

/* =========================================
CHART
========================================= */

.dashboard-chart-card{

    background:#fff;

    border-radius:24px;

    padding:24px;

    border:
    1px solid #e2e8f0;

    margin-bottom:28px;

}

/* =========================================
ACTIVITY
========================================= */

.activity-card{

    background:#fff;

    border-radius:24px;

    padding:24px;

    border:
    1px solid #e2e8f0;

}

.activity-item{

    display:flex;

    gap:16px;

    padding:18px 0;

    border-bottom:
    1px solid #f1f5f9;

}

.activity-item:last-child{

    border-bottom:none;

}

.activity-icon{

    width:50px;

    height:50px;

    border-radius:16px;

    background:#fee2e2;

    color:#dc2626;

    display:flex;

    align-items:center;

    justify-content:center;

}

.activity-item h4{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;

}

.activity-item p{

    font-size:14px;

    color:#475569;

    margin-bottom:4px;

}

.activity-item span{

    font-size:12px;

    color:#94a3b8;

}

.alert-success{

    background:#dcfce7;

    color:#166534;

    padding:12px 15px;

    border-radius:10px;

    margin-bottom:15px;

}

.alert-error{

    background:#fee2e2;

    color:#991b1b;

    padding:12px 15px;

    border-radius:10px;

    margin-bottom:15px;

}

.alert-warning{

    background:#fef3c7;

    color:#92400e;

    padding:12px 15px;

    border-radius:10px;

    margin-bottom:15px;

}
.btn-success{

    background:#16a34a;

    color:#fff;

    padding:8px 14px;

    border-radius:8px;

    text-decoration:none;

    font-size:13px;

}

/* =====================================
TOPBAR FIX
===================================== */

.topbar-admin{

    position:relative;

    z-index:99999;

}

/* =====================================
PROFILE
===================================== */

.profile-dropdown{

    position:relative;

}

/* =====================================
DROPDOWN
===================================== */

.dropdown-menu{

    position:absolute;

    top:75px;

    right:0;

    z-index:999999;

}

/* =====================================
SIDEBAR MENU
===================================== */

.sidebar-menu{

    list-style:none;

    margin:0;

    padding:0;

}

/* =====================================
MENU ITEM
===================================== */

.menu-item{

    position:relative;

}

/* =====================================
SUBMENU DEFAULT
===================================== */

.submenu{

    display:none;

    list-style:none;

    margin:0;

    padding-left:15px;

}

/* =====================================
OPEN SUBMENU
===================================== */

.menu-item.submenu-open
> .submenu{

    display:block;

}

/* =====================================
MENU PARENT
===================================== */

.menu-parent{

    cursor:pointer;

}

/* =====================================
TOPBAR FIX
===================================== */

.topbar-admin{

    position:sticky;

    top:0;

    z-index:999999;

}

/* =====================================
DROPDOWN FIX
===================================== */

.dropdown-menu{

    z-index:9999999;

}

/* =====================================
CONTENT FIX
===================================== */

.main-wrapper,
.content-area,
.table-card{

    overflow:visible !important;

}

/* =========================
PAGINATION
========================= */

.pagination-wrapper{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-top:25px;

}

.pagination-wrapper a{

    padding:10px 15px;

    border-radius:10px;

    background:#f1f5f9;

    color:#111;

    text-decoration:none;

    font-size:14px;

}

.pagination-wrapper a.active-page{

    background:#2563eb;

    color:#fff;

}

/* =========================
SEARCH
========================= */

.table-search-form{

    margin-bottom:20px;

    display:flex;

    gap:10px;

}

.table-search-form input{

    width:300px;

    height:45px;

    border:1px solid #ddd;

    border-radius:10px;

    padding:0 15px;

}

.table-search-form button{

    border:none;

    background:#2563eb;

    color:#fff;

    padding:0 20px;

    border-radius:10px;

    cursor:pointer;

}

.management-search-box{

    display:flex;

    align-items:center;

    gap:10px;

}

.management-search-box input{

    flex:1;

}

.search-btn{

    height:45px;

    padding:0 20px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

}

/* =========================================
EBOOK DETAIL BUTTON
========================================= */

.ebook-detail-action{

    display:flex;

    gap:14px;

    margin-top:25px;

    flex-wrap:wrap;

}

/* =========================================
BUTTON
========================================= */

.ebook-btn-read,
.ebook-btn-download{

    flex:1;

    min-width:160px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:0.3s;

}

/* =========================================
READ
========================================= */

.ebook-btn-read{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

    color:#fff;

}

/* =========================================
DOWNLOAD
========================================= */

.ebook-btn-download{

    background:
    linear-gradient(
    135deg,
    #059669,
    #10b981
    );

    color:#fff;

}

/* =========================================
HOVER
========================================= */

.ebook-btn-read:hover,
.ebook-btn-download:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 24px rgba(0,0,0,0.12);

}