:root{--primary:#6741d9;--ink:#182230;--soft:#f6f7fb;--green:#16a085}
body{background:var(--soft);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
.brand{font-size:1.65rem;font-weight:900;text-decoration:none;color:#ff7a00;letter-spacing:-1px}.brand span{color:#6741d9}
.btn-primary{background:var(--primary);border-color:var(--primary)}.hero{padding:5rem 0;background:linear-gradient(135deg,#fff8e8,#f1edff)}
.hero h1{font-weight:900;font-size:clamp(2.4rem,6vw,4.8rem);letter-spacing:-2px}.card{border:0;border-radius:20px;box-shadow:0 10px 35px rgba(20,30,50,.07)}
.stat{padding:1.25rem;border-radius:18px;background:#fff}.stat small{color:#697386}.stat strong{display:block;font-size:1.55rem}
.sidebar{min-height:calc(100vh - 73px);background:#fff}.menu a{display:block;padding:.8rem 1rem;border-radius:12px;color:#384152;text-decoration:none}.menu a:hover{background:#f0edff;color:#6741d9}
.content-card img{height:180px;object-fit:cover;border-radius:16px 16px 0 0}
.bottom-nav{display:none}
@media(max-width:767px){.desktop-side{display:none}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #ddd;z-index:10;justify-content:space-around;padding:.5rem}.bottom-nav a{font-size:.78rem;color:#454b57;text-decoration:none}.page-pad{padding-bottom:80px}}
.badge-soft{background:#eee9ff;color:#5f3dc4}.progress{height:10px}


/* =========================================================
   ADMIN LEFT SIDEBAR
   ========================================================= */
:root{
  --admin-sidebar-width:270px;
  --admin-sidebar-bg:#171a2b;
  --admin-sidebar-muted:#aeb4c8;
  --admin-sidebar-active:#6741d9;
  --admin-topbar-height:76px;
}

.admin-body{
  min-height:100vh;
  overflow-x:hidden;
  background:#f5f6fa;
}

.admin-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--admin-sidebar-width);
  height:100vh;
  z-index:1040;
  display:flex;
  flex-direction:column;
  background:var(--admin-sidebar-bg);
  color:#fff;
  box-shadow:12px 0 35px rgba(23,26,43,.12);
  transition:transform .25s ease;
}

.admin-sidebar-brand{
  min-height:86px;
  padding:22px 22px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.admin-sidebar-brand .brand{
  font-size:1.55rem;
}

.admin-badge{
  padding:.3rem .5rem;
  border-radius:8px;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#ddd5ff;
  background:rgba(103,65,217,.25);
}

.admin-profile{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 16px 8px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
}

.admin-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-weight:900;
  background:linear-gradient(135deg,#ff9f43,#6741d9);
  color:#fff;
}

.admin-profile-text{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.admin-profile-text strong,
.admin-profile-text small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.admin-profile-text strong{
  font-size:.9rem;
}

.admin-profile-text small{
  color:var(--admin-sidebar-muted);
  font-size:.72rem;
}

.admin-menu{
  flex:1;
  overflow-y:auto;
  padding:12px 14px 20px;
}

.admin-menu::-webkit-scrollbar{
  width:5px;
}

.admin-menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:10px;
}

.admin-menu a,
.admin-sidebar-footer a{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:46px;
  margin-bottom:5px;
  padding:10px 13px;
  border-radius:12px;
  color:var(--admin-sidebar-muted);
  text-decoration:none;
  font-size:.9rem;
  font-weight:650;
  transition:.18s ease;
}

.admin-menu a i,
.admin-sidebar-footer a i{
  width:22px;
  font-size:1.05rem;
  text-align:center;
}

.admin-menu a:hover,
.admin-sidebar-footer a:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
}

.admin-menu a.active{
  color:#fff;
  background:linear-gradient(135deg,#7656e8,#5b32cc);
  box-shadow:0 8px 22px rgba(103,65,217,.28);
}

.admin-sidebar-footer{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.admin-sidebar-footer .logout-link{
  color:#ff9eaa;
}

.admin-shell{
  min-height:100vh;
  margin-left:var(--admin-sidebar-width);
}

.admin-topbar{
  position:sticky;
  top:0;
  z-index:1020;
  min-height:var(--admin-topbar-height);
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px 28px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e7e9f1;
  backdrop-filter:blur(12px);
}

.admin-topbar h1{
  margin:0;
  font-size:1.1rem;
  font-weight:850;
}

.admin-topbar small{
  color:#7b8192;
}

.admin-topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:#596071;
  font-size:.88rem;
  font-weight:650;
}

.admin-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  background:#f0edff;
  color:#6741d9;
  font-size:1.35rem;
}

.admin-main{
  min-height:calc(100vh - var(--admin-topbar-height));
}

.admin-main > .container,
.admin-main > .container-fluid{
  max-width:none;
  padding-left:28px;
  padding-right:28px;
}

.admin-flash{
  padding:18px 28px 0;
}

.admin-sidebar-overlay{
  display:none;
}

@media(max-width:991.98px){
  .admin-sidebar{
    transform:translateX(-100%);
  }

  .admin-shell{
    margin-left:0;
  }

  .admin-menu-toggle{
    display:grid;
    place-items:center;
  }

  .admin-sidebar-open{
    overflow:hidden;
  }

  .admin-sidebar-open .admin-sidebar{
    transform:translateX(0);
  }

  .admin-sidebar-open .admin-sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:1035;
    background:rgba(15,18,32,.55);
    backdrop-filter:blur(2px);
  }
}

@media(max-width:575.98px){
  .admin-topbar{
    min-height:68px;
    padding:10px 14px;
  }

  .admin-topbar h1{
    font-size:1rem;
  }

  .admin-topbar small{
    display:none;
  }

  .admin-main > .container,
  .admin-main > .container-fluid{
    padding-left:14px;
    padding-right:14px;
  }

  .admin-flash{
    padding:14px 14px 0;
  }

  .admin-body .card{
    border-radius:15px;
  }
}


/* =========================================================
   MEMBER LEFT SIDEBAR
   ========================================================= */
:root{
  --member-sidebar-width:270px;
  --member-sidebar-bg:#ffffff;
  --member-topbar-height:76px;
}

.member-body{
  min-height:100vh;
  overflow-x:hidden;
  background:#f5f6fa;
}

.member-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:1040;
  width:var(--member-sidebar-width);
  height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--member-sidebar-bg);
  border-right:1px solid #e7e9f1;
  box-shadow:10px 0 30px rgba(20,30,50,.05);
  transition:transform .25s ease;
}

.member-sidebar-brand{
  min-height:86px;
  padding:22px 22px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #edf0f5;
}

.member-sidebar-brand .brand{
  font-size:1.55rem;
}

.member-badge{
  padding:.3rem .5rem;
  border-radius:8px;
  background:#eee9ff;
  color:#5f3dc4;
  font-size:.63rem;
  font-weight:850;
  letter-spacing:.08em;
}

.member-profile{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 16px 10px;
  padding:14px;
  border-radius:16px;
  background:#f7f5ff;
}

.member-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#ff9f43,#6741d9);
  font-weight:900;
}

.member-profile-text{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.member-profile-text strong,
.member-profile-text small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.member-profile-text strong{
  font-size:.9rem;
}

.member-profile-text small{
  color:#7b8192;
  font-size:.72rem;
}

.member-status{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0 16px 10px;
  padding:12px;
  border-radius:14px;
}

.member-status.is-active{
  background:#eafaf4;
  color:#13795b;
}

.member-status.is-inactive{
  background:#fff4e5;
  color:#a15c00;
}

.member-status i{
  margin-top:1px;
}

.member-status div{
  display:flex;
  flex-direction:column;
}

.member-status strong{
  font-size:.78rem;
}

.member-status small{
  font-size:.69rem;
  opacity:.85;
}

.member-menu{
  flex:1;
  overflow-y:auto;
  padding:12px 14px 20px;
}

.member-menu a,
.member-sidebar-footer a{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:48px;
  margin-bottom:5px;
  padding:10px 13px;
  border-radius:12px;
  color:#596071;
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  transition:.18s ease;
}

.member-menu a i,
.member-sidebar-footer a i{
  width:22px;
  text-align:center;
  font-size:1.05rem;
}

.member-menu a:hover,
.member-sidebar-footer a:hover{
  color:#6741d9;
  background:#f4f1ff;
}

.member-menu a.active{
  color:#fff;
  background:linear-gradient(135deg,#7656e8,#5b32cc);
  box-shadow:0 8px 22px rgba(103,65,217,.22);
}

.member-sidebar-footer{
  padding:14px;
  border-top:1px solid #edf0f5;
}

.member-sidebar-footer .renew-link{
  color:#13795b;
  background:#eafaf4;
}

.member-sidebar-footer .logout-link{
  color:#dc3545;
}

.member-shell{
  min-height:100vh;
  margin-left:var(--member-sidebar-width);
}

.member-topbar{
  position:sticky;
  top:0;
  z-index:1020;
  min-height:var(--member-topbar-height);
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px 28px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e7e9f1;
  backdrop-filter:blur(12px);
}

.member-topbar h1{
  margin:0;
  font-size:1.1rem;
  font-weight:850;
}

.member-topbar small{
  color:#7b8192;
}

.member-topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:#596071;
  font-size:.88rem;
  font-weight:650;
}

.member-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  background:#f0edff;
  color:#6741d9;
  font-size:1.35rem;
}

.member-main{
  min-height:calc(100vh - var(--member-topbar-height));
}

.member-main > .container,
.member-main > .container-fluid{
  max-width:none;
  padding-left:28px;
  padding-right:28px;
}

.member-flash{
  padding:18px 28px 0;
}

.member-sidebar-overlay{
  display:none;
}

.member-page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.member-page-header h2{
  margin:0 0 4px;
  font-weight:850;
}

.member-page-header p{
  margin:0;
  color:#7b8192;
}

.member-empty{
  padding:48px 20px;
  text-align:center;
  color:#7b8192;
}

.member-empty i{
  display:block;
  margin-bottom:10px;
  font-size:2.4rem;
  color:#b3a7e8;
}

.member-content-card .content-image{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:20px 20px 0 0;
}

.member-content-card .content-placeholder{
  height:150px;
  display:grid;
  place-items:center;
  border-radius:20px 20px 0 0;
  background:linear-gradient(135deg,#fff3df,#efeaff);
  color:#6741d9;
  font-size:2.4rem;
}

.member-summary-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f0edff;
  color:#6741d9;
  font-size:1.1rem;
}

@media(max-width:991.98px){
  .member-sidebar{
    transform:translateX(-100%);
  }

  .member-shell{
    margin-left:0;
  }

  .member-menu-toggle{
    display:grid;
    place-items:center;
  }

  .member-sidebar-open{
    overflow:hidden;
  }

  .member-sidebar-open .member-sidebar{
    transform:translateX(0);
  }

  .member-sidebar-open .member-sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:1035;
    background:rgba(15,18,32,.48);
    backdrop-filter:blur(2px);
  }
}

@media(max-width:575.98px){
  .member-topbar{
    min-height:68px;
    padding:10px 14px;
  }

  .member-topbar h1{
    font-size:1rem;
  }

  .member-topbar small{
    display:none;
  }

  .member-main > .container,
  .member-main > .container-fluid{
    padding-left:14px;
    padding-right:14px;
  }

  .member-flash{
    padding:14px 14px 0;
  }

  .member-body .card{
    border-radius:15px;
  }
}



/* =========================================================
   CilikPro PREMIUM UPGRADE 2026 - SAFE OVERRIDE
   Ini hanya tambah cantik, tak padam yang asal
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;600;700&display=swap');

body{ font-family:"Inter",sans-serif; background:#fdfcff; }
h1,h2,h3,h4,.brand{ font-family:"Plus Jakarta Sans",sans-serif; }

.btn{ border-radius:14px; font-weight:700; transition:.22s cubic-bezier(.16,1,.3,1); }
.btn-primary{ background:linear-gradient(135deg,#8a5cff,#6741d9) !important; border:0 !important; box-shadow:0 8px 20px rgba(103,65,217,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(103,65,217,.32); }
.btn-light{ background:#fff !important; border:1px solid #eceaf6 !important; box-shadow:0 4px 18px rgba(0,0,0,.04); }
.btn-lg{ padding:.9rem 1.6rem; border-radius:16px; }

/* HERO MESH */
.hero{
  position:relative; overflow:hidden; padding:6.5rem 0 5rem !important;
  background:
    radial-gradient(800px 400px at 15% -10%, #fff3dc 0%, transparent 60%),
    radial-gradient(700px 500px at 85% 0%, #e9e2ff 0%, transparent 65%),
    radial-gradient(600px 400px at 50% 120%, #f0edff 0%, #fdfcff 70%) !important;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(103,65,217,.08) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse at center, black 60%, transparent 100%);
  pointer-events:none;
}
.hero h1{ line-height:.95 !important; letter-spacing:-.04em !important; }
.hero .lead{ color:#5a6175; font-size:1.18rem; line-height:1.6; max-width:48ch; }

/* CARD PREMIUM HOVER */
.card{ border:1px solid rgba(236,234,246,.9) !important; transition:.3s cubic-bezier(.16,1,.3,1); }
.card:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(23,26,43,.09) !important; border-color:#e2d9ff !important; }

/* ADMIN SIDEBAR PREMIUM LOOK - KEKALKAN POSITION FIXED */
.admin-sidebar{
  background:linear-gradient(180deg,#191c30 0%, #121426 100%) !important;
  box-shadow:16px 0 50px rgba(17,18,35,.12) !important;
  backdrop-filter:blur(20px);
}
.member-sidebar{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(16px);
  border-right:1px solid #eceaf6 !important;
}
.admin-menu a.active, .member-menu a.active{
  background:linear-gradient(135deg,#7c5cff,#5a32cc) !important;
  box-shadow:0 10px 24px rgba(103,65,217,.3) !important;
}
.admin-topbar, .member-topbar{
  background:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(16px) saturate(1.5) !important;
}

/* STAT PREMIUM */
.stat{ background:#fff; border:1px solid #eceaf6; box-shadow:0 4px 20px rgba(23,26,43,.06); border-radius:18px; transition:.2s; }
.stat:hover{ transform:translateY(-2px); }

/* TABLE PREMIUM */
.table thead th{ font-size:.75rem; letter-spacing:.05em; color:#7b8192; font-weight:700; }
.table-hover tbody tr:hover{ background:#faf9ff; }