/* =====================================================
   Member Area — App-Style UI
   Perpustakaan FKUI
   Mobile-first, native-app look & feel
   ===================================================== */

/* -------------------------------------------------------
   0. Design Tokens
------------------------------------------------------- */
:root {
  --ma-green:        #12b975;
  --ma-green-dark:   #0a8f58;
  --ma-green-light:  #e8f8f1;
  --ma-dark:         #1a2332;
  --ma-dark2:        #243b55;
  --ma-text:         #2d3748;
  --ma-text-muted:   #718096;
  --ma-bg:           #f0f4f8;
  --ma-white:        #ffffff;
  --ma-border:       #e2e8f0;
  --ma-radius-xl:    20px;
  --ma-radius:       14px;
  --ma-radius-sm:    8px;
  --ma-shadow:       0 4px 24px rgba(0,0,0,0.10);
  --ma-shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --ma-sidebar-w:    240px;
  --ma-appbar-h:     56px;
  --ma-bottomnav-h:  64px;
}

/* -------------------------------------------------------
   1. Template flex-item fix
------------------------------------------------------- */
.main_content .detail_blog {
  min-width: 0;
  overflow-x: clip;
}

/* -------------------------------------------------------
   2. Outer Wrapper Override
------------------------------------------------------- */
.member-area-wrapper {
  padding-left:  0 !important;
  padding-right: 0 !important;
  margin-top:    0;
  padding-top:   0;
  padding-bottom: 0;
  min-height:    calc(100vh - 80px);
}

@media (min-width: 768px) {
  .member-area-wrapper {
    max-width:      100% !important;
    width:          100% !important;
    margin-top:     90px;
    padding-bottom: 0 !important;
    min-height:     auto;
  }
}

/* Strip the default card — app shell provides its own card */
.member-area-wrapper > .card {
  border:        none !important;
  box-shadow:    none !important;
  background:    transparent !important;
  border-radius: 0 !important;
  overflow:      visible;
}

/* -------------------------------------------------------
   3. App Shell
------------------------------------------------------- */
.ma-shell {
  display:        flex;
  flex-direction: column;
  background:     var(--ma-bg);
  min-height:     calc(100vh - 80px);
}

@media (min-width: 768px) {
  .ma-shell {
    flex-direction: row;
    align-items:    stretch;
    background:     var(--ma-bg);
    border-radius:  0;
    box-shadow:     none;
    overflow:       visible;
    min-height:     calc(100vh - 90px);
  }
}

/* -------------------------------------------------------
   4. Sidebar (desktop only)
------------------------------------------------------- */
.ma-sidebar { display: none; }

@media (min-width: 768px) {
  .ma-sidebar {
    display:        flex;
    flex-direction: column;
    width:          var(--ma-sidebar-w);
    flex-shrink:    0;
    background:     var(--ma-dark);
    color:          #fff;
    padding:        1.5rem 0 0;
    min-height:     calc(100vh - 90px);
    position:       sticky;
    top:            90px;
    align-self:     flex-start;
    height:         calc(100vh - 90px);
    overflow-y:     auto;
  }
}

/* --- Sidebar: member info block --- */
.ma-sidebar-member {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         0 1.25rem 1.25rem;
  border-bottom:   1px solid rgba(255,255,255,.1);
}

.ma-sidebar-avatar {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--ma-green);
  margin-bottom: .6rem;
}

.ma-sidebar-name {
  font-size:     .9rem;
  font-weight:   700;
  color:         #fff;
  line-height:   1.3;
  margin-bottom: .15rem;
  word-break:    break-word;
}

.ma-sidebar-id {
  font-size:     .7rem;
  color:         rgba(255,255,255,.45);
  font-family:   monospace;
  margin-bottom: .3rem;
}

.ma-sidebar-prodi {
  font-size:  .72rem;
  color:      rgba(255,255,255,.55);
  line-height: 1.35;
  margin-bottom: .25rem;
}

.ma-sidebar-expire {
  display:        inline-flex;
  align-items:    center;
  gap:            .3rem;
  font-size:      .68rem;
  color:          rgba(255,255,255,.4);
  margin-top:     .15rem;
}

/* --- Sidebar: navigation --- */
.ma-sidenav {
  list-style: none;
  padding:    .75rem .625rem;
  margin:     0;
  flex:       1;
}

.ma-sidenav-item { margin-bottom: .15rem; }

.ma-sidenav-link {
  display:         flex;
  align-items:     center;
  gap:             .65rem;
  padding:         .65rem .85rem;
  border-radius:   var(--ma-radius-sm);
  color:           rgba(255,255,255,.6);
  font-size:       .83rem;
  font-weight:     500;
  text-decoration: none;
  transition:      background .15s, color .15s;
  white-space:     nowrap;
}
.ma-sidenav-link svg { flex-shrink: 0; opacity: .75; }

.ma-sidenav-link:hover, .ma-sidenav-link:focus {
  background:      rgba(255,255,255,.08);
  color:           #fff;
  text-decoration: none;
}

.ma-sidenav-link.active {
  background: var(--ma-green);
  color:      #fff;
  font-weight: 600;
}
.ma-sidenav-link.active svg { opacity: 1; }

/* --- Sidebar: footer (logout) --- */
.ma-sidebar-footer {
  padding:     .625rem;
  border-top:  1px solid rgba(255,255,255,.1);
  margin-top:  auto;
}

.ma-sidebar-logout {
  display:         flex;
  align-items:     center;
  gap:             .65rem;
  padding:         .65rem .85rem;
  border-radius:   var(--ma-radius-sm);
  color:           rgba(255,255,255,.45);
  font-size:       .82rem;
  font-weight:     500;
  text-decoration: none;
  transition:      background .15s, color .15s;
}
.ma-sidebar-logout:hover {
  background:      rgba(220,53,69,.2);
  color:           #ff6b6b;
  text-decoration: none;
}

/* -------------------------------------------------------
   5. Main Body
------------------------------------------------------- */
.ma-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  min-width:      0;
  background:     var(--ma-bg);
}

@media (min-width: 768px) {
  .ma-body {
    border-radius: 0;
    background:    var(--ma-bg);
  }
}

/* -------------------------------------------------------
   6. App Bar (mobile only)
------------------------------------------------------- */
.ma-appbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 1rem;
  height:          var(--ma-appbar-h);
  background:      var(--ma-dark);
  color:           #fff;
  position:        sticky;
  top:             0;
  z-index:         200;
  flex-shrink:     0;
  box-shadow:      0 2px 8px rgba(0,0,0,.2);
}

@media (min-width: 768px) { .ma-appbar { display: none; } }

.ma-appbar-left {
  display:    flex;
  align-items: center;
  gap:        .55rem;
  min-width:  0;
}

.ma-appbar-avatar {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--ma-green);
  flex-shrink:   0;
}

.ma-appbar-name {
  font-size:     .88rem;
  font-weight:   600;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     180px;
}

.ma-appbar-right {
  display:    flex;
  align-items: center;
  gap:        .4rem;
  flex-shrink: 0;
}

.ma-appbar-btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background:       rgba(255,255,255,.1);
  color:            rgba(255,255,255,.8);
  border:           none;
  cursor:           pointer;
  text-decoration:  none;
  transition:       background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ma-appbar-btn:hover, .ma-appbar-btn:focus {
  background:      rgba(255,255,255,.2);
  color:           #fff;
  text-decoration: none;
}

/* -------------------------------------------------------
   7. Content Area
------------------------------------------------------- */
.ma-content {
  flex:       1;
  overflow-x: hidden;
  padding:    .85rem .85rem calc(var(--ma-bottomnav-h) + 1rem);
}

@media (min-width: 768px) {
  .ma-content {
    padding:    2rem 2.5rem;
    overflow-y: visible;
  }
}

/* -------------------------------------------------------
   8. Bottom Navigation (mobile only)
------------------------------------------------------- */
.ma-bottomnav {
  display:      flex;
  position:     fixed;
  bottom:       0;
  left:         0;
  right:        0;
  height:       var(--ma-bottomnav-h);
  background:   var(--ma-white);
  border-top:   1px solid var(--ma-border);
  z-index:      300;
  box-shadow:   0 -2px 12px rgba(0,0,0,.07);
}

@media (min-width: 768px) { .ma-bottomnav { display: none; } }

.ma-bottomnav-item {
  flex:              1;
  display:           flex;
  flex-direction:    column;
  align-items:       center;
  justify-content:   center;
  gap:               .18rem;
  padding:           .3rem .2rem;
  text-decoration:   none;
  color:             var(--ma-text-muted);
  font-size:         .58rem;
  font-weight:       500;
  text-align:        center;
  letter-spacing:    .01em;
  transition:        color .15s;
  -webkit-tap-highlight-color: transparent;
  position:          relative;
}
.ma-bottomnav-item svg {
  width:  22px;
  height: 22px;
  transition: transform .15s;
}
.ma-bottomnav-item:hover,
.ma-bottomnav-item.active {
  color:           var(--ma-green);
  text-decoration: none;
}
.ma-bottomnav-item.active svg { transform: scale(1.15); }

.ma-bottomnav-item.active::after {
  content:       '';
  position:      absolute;
  top:           0;
  left:          50%;
  transform:     translateX(-50%);
  width:         28px;
  height:        2.5px;
  background:    var(--ma-green);
  border-radius: 0 0 4px 4px;
}

/* -------------------------------------------------------
   9. Hero Card (mobile — member summary)
------------------------------------------------------- */
.ma-hero {
  background:    linear-gradient(135deg, var(--ma-dark) 0%, var(--ma-dark2) 100%);
  border-radius: var(--ma-radius);
  padding:       1.25rem 1rem 1rem;
  margin-bottom: .85rem;
  color:         #fff;
  position:      relative;
  overflow:      hidden;
}
.ma-hero::before {
  content:       '';
  position:      absolute;
  top:           -30px; right: -20px;
  width:         110px; height: 110px;
  background:    rgba(18,185,117,.14);
  border-radius: 50%;
}
.ma-hero::after {
  content:       '';
  position:      absolute;
  bottom:        -35px; right: 35px;
  width:         75px; height: 75px;
  background:    rgba(18,185,117,.09);
  border-radius: 50%;
}

.ma-hero-top {
  display:       flex;
  align-items:   center;
  gap:           .85rem;
  position:      relative;
  z-index:       1;
}

.ma-hero-avatar {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2.5px solid var(--ma-green);
  flex-shrink:   0;
}

.ma-hero-info { min-width: 0; }

.ma-hero-name {
  font-size:     1rem;
  font-weight:   700;
  color:         #fff;
  line-height:   1.25;
  margin-bottom: .1rem;
  word-break:    break-word;
}

.ma-hero-prodi {
  font-size:   .73rem;
  color:       rgba(255,255,255,.6);
  line-height: 1.35;
}

.ma-hero-expire {
  display:         inline-flex;
  align-items:     center;
  gap:             .25rem;
  background:      rgba(18,185,117,.25);
  color:           #a7f3d0;
  font-size:       .65rem;
  font-weight:     600;
  padding:         .15rem .5rem;
  border-radius:   20px;
  margin-top:      .3rem;
}

.ma-hero-actions {
  display:         flex;
  gap:             .5rem;
  justify-content: flex-end;
  margin-top:      .85rem;
  position:        relative;
  z-index:         1;
}

.ma-hero-btn {
  display:         flex;
  align-items:     center;
  gap:             .3rem;
  padding:         .4rem .75rem;
  border-radius:   var(--ma-radius-sm);
  font-size:       .75rem;
  font-weight:     600;
  border:          1px solid rgba(255,255,255,.2);
  background:      rgba(255,255,255,.1);
  color:           rgba(255,255,255,.85);
  cursor:          pointer;
  text-decoration: none;
  transition:      background .15s;
}
.ma-hero-btn:hover  { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.ma-hero-btn.is-primary { background: var(--ma-green); border-color: var(--ma-green); color: #fff; }
.ma-hero-btn.is-danger  { background: rgba(220,53,69,.7); border-color: transparent; color: #fff; }

/* -------------------------------------------------------
   10. Stats Row (mobile, below hero)
------------------------------------------------------- */
.ma-stats-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   .6rem;
  margin-bottom:         .85rem;
}

.ma-stat-box {
  background:    var(--ma-white);
  border-radius: var(--ma-radius-sm);
  box-shadow:    var(--ma-shadow-sm);
  padding:       .75rem .5rem;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
}
.ma-stat-box-val {
  font-size:   1.35rem;
  font-weight: 800;
  color:       var(--ma-green);
  line-height: 1;
}
.ma-stat-box-label {
  font-size:      .58rem;
  color:          var(--ma-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top:     .2rem;
  text-align:     center;
  line-height:    1.3;
}

/* Sidebar stats pills */
.ma-sidebar-stats {
  display:         flex;
  justify-content: center;
  gap:             .45rem;
  padding:         .9rem 1rem;
  border-bottom:   1px solid rgba(255,255,255,.1);
}
.ma-stat-pill {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  background:     rgba(255,255,255,.07);
  border-radius:  var(--ma-radius-sm);
  padding:        .5rem .5rem;
  flex:           1;
}
.ma-stat-pill-val   { font-size: 1.1rem; font-weight: 700; color: var(--ma-green); line-height: 1; }
.ma-stat-pill-label { font-size: .58rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .04em; text-align: center; margin-top: .2rem; }

/* -------------------------------------------------------
   11. Loan / History Cards
------------------------------------------------------- */
.ma-loan-card {
  background:     var(--ma-white);
  border-radius:  var(--ma-radius);
  box-shadow:     var(--ma-shadow-sm);
  padding:        1rem;
  margin-bottom:  .7rem;
  display:        flex;
  flex-direction: column;
  gap:            .45rem;
  transition:     box-shadow .15s;
}
.ma-loan-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); }

.ma-loan-header {
  display:   flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:       .5rem;
}
.ma-loan-title {
  font-size:   .9rem;
  font-weight: 600;
  color:       var(--ma-text);
  line-height: 1.35;
  flex:        1;
  min-width:   0;
}
.ma-loan-code {
  font-size:     .68rem;
  color:         var(--ma-text-muted);
  background:    var(--ma-bg);
  padding:       .15rem .4rem;
  border-radius: 4px;
  font-family:   monospace;
  flex-shrink:   0;
  margin-top:    .1rem;
}
.ma-loan-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .4rem .85rem;
  align-items: center;
}
.ma-loan-date {
  font-size: .75rem;
  color:     var(--ma-text-muted);
}
.ma-loan-date strong { color: var(--ma-text); }

.ma-loan-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .5rem;
  flex-wrap:       wrap;
  padding-top:     .35rem;
  border-top:      1px dashed var(--ma-border);
}

/* -------------------------------------------------------
   12. Status Badges
------------------------------------------------------- */
.ma-badge {
  display:     inline-flex;
  align-items: center;
  gap:         .2rem;
  font-size:   .68rem;
  font-weight: 600;
  padding:     .2rem .55rem;
  border-radius: 20px;
  flex-shrink:  0;
}
.ma-badge-aktif     { background: #dcfce7; color: #166534; }
.ma-badge-terlambat { background: #fee2e2; color: #991b1b; }
.ma-badge-segera    { background: #fff7ed; color: #c2410c; }
.ma-badge-kembali   { background: #f1f5f9; color: #475569; }
.ma-badge-pending   { background: #fef3c7; color: #92400e; }
.ma-badge-diterima  { background: #dcfce7; color: #166534; }
.ma-badge-ditolak   { background: #fee2e2; color: #991b1b; }

/* -------------------------------------------------------
   13. Buttons
------------------------------------------------------- */
.ma-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .6rem 1.1rem;
  border-radius:   var(--ma-radius-sm);
  font-size:       .85rem;
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .15s, transform .1s;
  min-height:      40px;
  border:          none;
  white-space:     nowrap;
}
.ma-btn:active { transform: scale(.97); }

.ma-btn-primary { background: var(--ma-green);  color: #fff; }
.ma-btn-primary:hover { background: var(--ma-green-dark); color: #fff; text-decoration: none; }

.ma-btn-danger  { background: #ef4444; color: #fff; }
.ma-btn-danger:hover  { background: #dc2626; color: #fff; text-decoration: none; }

.ma-btn-outline {
  background: transparent;
  color:      var(--ma-green);
  border:     1.5px solid var(--ma-green);
}
.ma-btn-outline:hover { background: var(--ma-green); color: #fff; text-decoration: none; }

.ma-btn-ghost {
  background: var(--ma-bg);
  color:      var(--ma-text);
}
.ma-btn-ghost:hover { background: var(--ma-border); color: var(--ma-text); text-decoration: none; }

.ma-btn-sm  { padding: .38rem .85rem; font-size: .78rem; min-height: 34px; }
.ma-btn-lg  { padding: .75rem 1.5rem; font-size: .95rem; min-height: 50px; }
.ma-btn-full { width: 100%; justify-content: center; }

.ma-btn-primary.disabled,
.ma-btn-primary[disabled] { background: #cbd5e1; color: #94a3b8; cursor: not-allowed; pointer-events: none; }

/* -------------------------------------------------------
   14. Empty State
------------------------------------------------------- */
.ma-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  padding:        3rem 1.5rem;
  color:          var(--ma-text-muted);
}
.ma-empty svg  { width: 64px; height: 64px; margin-bottom: .85rem; opacity: .35; }
.ma-empty-title { font-size: .95rem; font-weight: 600; color: var(--ma-text-muted); margin-bottom: .35rem; }
.ma-empty-sub   { font-size: .82rem; color: #a0aec0; margin: 0; }

/* -------------------------------------------------------
   15. Section Title
------------------------------------------------------- */
.ma-section-title {
  font-size:     .8rem;
  font-weight:   700;
  color:         var(--ma-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin:        0 0 .75rem;
}

/* -------------------------------------------------------
   16. Profile — App Settings Style
------------------------------------------------------- */
.ma-profile-header {
  background:     var(--ma-white);
  border-radius:  var(--ma-radius);
  box-shadow:     var(--ma-shadow-sm);
  padding:        1.25rem 1rem;
  display:        flex;
  align-items:    center;
  gap:            1rem;
  margin-bottom:  1rem;
}

@media (min-width: 576px) {
  .ma-profile-header {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        2rem 1.5rem;
  }
}

.ma-profile-avatar {
  width:         64px;
  height:        64px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--ma-green);
  flex-shrink:   0;
  overflow:      hidden;
  display:       flex;
  align-items:   center;
}
@media (min-width: 576px) { .ma-profile-avatar { width: 86px; height: 86px; } }

.ma-profile-name { font-size: 1rem; font-weight: 700; color: var(--ma-text); margin-bottom: .1rem; }
.ma-profile-id   { font-size: .75rem; color: var(--ma-text-muted); font-family: monospace; }

.ma-profile-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       .4rem;
  margin-top: .5rem;
}
@media (min-width: 576px) { .ma-profile-tags { justify-content: center; } }

.ma-profile-tag {
  font-size:     .7rem;
  background:    var(--ma-bg);
  color:         var(--ma-text-muted);
  padding:       .2rem .5rem;
  border-radius: 20px;
}

/* Settings section card */
.ma-settings-card {
  background:     var(--ma-white);
  border-radius:  var(--ma-radius);
  box-shadow:     var(--ma-shadow-sm);
  margin-bottom:  1rem;
  overflow:       hidden;
}
.ma-settings-card-header {
  padding:        .65rem 1rem;
  border-bottom:  1px solid var(--ma-border);
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--ma-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  background:     #fafbfc;
}
.ma-settings-card-body { padding: 1rem; }

.ma-field { 
  margin-bottom: .9rem; 
  padding:        .65rem 1rem 0;
}
.ma-field:last-child { margin-bottom: 1rem; }

.ma-field label {
  display:        block;
  font-size:      .75rem;
  font-weight:    600;
  color:          var(--ma-text-muted);
  margin-bottom:  .3rem;
}

.ma-field .form-control {
  border:         1.5px solid var(--ma-border);
  border-radius:  var(--ma-radius-sm);
  font-size:      .9rem;
  height:         auto;
  padding:        .6rem .85rem;
  color:          var(--ma-text);
  background:     #fafbfc;
  transition:     border-color .15s, box-shadow .15s;
}
.ma-field .form-control:focus {
  border-color: var(--ma-green);
  box-shadow:   0 0 0 3px rgba(18,185,117,.12);
  background:   #fff;
  outline:      none;
}
.ma-field textarea.form-control { resize: vertical; min-height: 80px; }

.ma-input-group {
  display:       flex;
  align-items:   stretch;
  border:        1.5px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  overflow:      hidden;
  background:    #fafbfc;
}
.ma-input-group-label {
  display:     flex;
  align-items: center;
  padding:     0 .75rem;
  background:  #f1f5f9;
  color:       var(--ma-text-muted);
  font-size:   .78rem;
  font-weight: 600;
  white-space: nowrap;
  border-right: 1px solid var(--ma-border);
}
.ma-input-group .form-control {
  border:        none;
  border-radius: 0;
  flex:          1;
  background:    transparent;
}
.ma-input-group .form-control:focus {
  box-shadow: none;
  outline:    none;
}
.ma-input-group:focus-within {
  border-color: var(--ma-green);
  box-shadow:   0 0 0 3px rgba(18,185,117,.12);
}

/* -------------------------------------------------------
   17. Points — Gamification
------------------------------------------------------- */
.ma-points-hero {
  background:     linear-gradient(135deg, var(--ma-dark) 0%, #2d4a7a 100%);
  border-radius:  var(--ma-radius);
  padding:        2rem 1rem 1.5rem;
  text-align:     center;
  margin-bottom:  1rem;
  position:       relative;
  overflow:       hidden;
}
.ma-points-hero::before {
  content: ''; position: absolute; top: -40px; left: -20px;
  width: 140px; height: 140px; background: rgba(18,185,117,.1); border-radius: 50%;
}
.ma-points-hero::after {
  content: ''; position: absolute; bottom: -30px; right: -10px;
  width: 90px; height: 90px; background: rgba(18,185,117,.08); border-radius: 50%;
}

.ma-points-label {
  font-size:      .72rem;
  font-weight:    600;
  color:          rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom:  .3rem;
  position:       relative;
  z-index:        1;
}
.ma-points-total {
  font-size:  3.5rem;
  font-weight: 900;
  color:      var(--ma-green);
  line-height: 1;
  position:   relative;
  z-index:    1;
}
.ma-points-unit {
  font-size:  1.1rem;
  font-weight: 600;
  color:      rgba(255,255,255,.5);
  position:   relative;
  z-index:    1;
}

.ma-points-item {
  background:  var(--ma-white);
  border-radius: var(--ma-radius-sm);
  box-shadow:  var(--ma-shadow-sm);
  padding:     .85rem 1rem;
  margin-bottom: .6rem;
  display:     flex;
  align-items: center;
  gap:         .75rem;
}
.ma-points-icon {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  font-size:     .82rem;
  font-weight:   700;
}
.ma-points-icon.earn   { background: #dcfce7; color: #166534; }
.ma-points-icon.deduct { background: #fee2e2; color: #991b1b; }

.ma-points-info { flex: 1; min-width: 0; }
.ma-points-action { font-size: .86rem; font-weight: 600; color: var(--ma-text); margin-bottom: .1rem; }
.ma-points-desc   { font-size: .73rem; color: var(--ma-text-muted); }
.ma-points-right  { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex-shrink: 0; }
.ma-points-val    { font-size: .82rem; font-weight: 700; }
.ma-points-val.earn   { color: #166534; }
.ma-points-val.deduct { color: #991b1b; }
.ma-points-date   { font-size: .68rem; color: var(--ma-text-muted); }

/* -------------------------------------------------------
   18. Bebas Pustaka — Checklist + Timeline
------------------------------------------------------- */
/* Info / requirements card */
.ma-info-card {
  background:    var(--ma-white);
  border-radius: var(--ma-radius);
  box-shadow:    var(--ma-shadow-sm);
  margin-bottom: 1rem;
  overflow:      hidden;
}
.ma-info-card-header {
  padding:       .75rem 1rem;
  border-bottom: 1px solid var(--ma-border);
  font-size:     .82rem;
  font-weight:   700;
  color:         var(--ma-text);
  background:    #fafbfc;
}
.ma-info-card-body { padding: 1rem; }

.ma-req-list  { list-style: none; padding: 0; margin: 0; }
.ma-req-item {
  display:     flex;
  align-items: flex-start;
  gap:         .65rem;
  padding:     .7rem 1rem;
  border-bottom: 1px solid var(--ma-border);
  font-size:   .84rem;
  color:       var(--ma-text);
  line-height: 1.5;
}
.ma-req-item:last-child { border-bottom: none; }

.ma-req-num {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            22px;
  height:           22px;
  min-width:        22px;
  background:       var(--ma-green);
  color:            #fff;
  border-radius:    50%;
  font-size:        .62rem;
  font-weight:      700;
  margin-top:       .15rem;
}

/* Contact info block */
.ma-contact-list { list-style: none; padding: 0; margin: 0; }
.ma-contact-item {
  display:   flex;
  align-items: center;
  gap:       .5rem;
  padding:   .45rem 1rem;
  font-size: .83rem;
  color:     var(--ma-text);
  border-bottom: 1px dashed var(--ma-border);
}
.ma-contact-item:last-child { border-bottom: none; }
.ma-contact-item a { color: var(--ma-green); text-decoration: none; font-weight: 500; }
.ma-contact-item a:hover { text-decoration: underline; }

/* Timeline */
.ma-timeline { position: relative; padding-left: 1.25rem; }
.ma-timeline::before {
  content:  '';
  position: absolute;
  left:     9px; top: 18px; bottom: 18px;
  width:    2px;
  background: var(--ma-border);
}
.ma-timeline-item  { position: relative; margin-bottom: 1rem; }
.ma-timeline-dot {
  position:      absolute;
  left:          -1.25rem;
  top:           18px;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--ma-green);
  border:        2px solid var(--ma-bg);
  box-shadow:    0 0 0 2px var(--ma-green);
  margin-left:   3px;
}
@media (min-width: 768px) { .ma-timeline-dot { border-color: var(--ma-bg); } }
.ma-timeline-dot.pending { background: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; }
.ma-timeline-dot.ditolak { background: #ef4444; box-shadow: 0 0 0 2px #ef4444; }

.ma-timeline-card {
  background:    var(--ma-white);
  border-radius: var(--ma-radius-sm);
  box-shadow:    var(--ma-shadow-sm);
  padding:       .85rem 1rem;
}
.ma-timeline-header {
  display:   flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:       .35rem;
  margin-bottom: .35rem;
}
.ma-timeline-date  { font-size: .73rem; color: var(--ma-text-muted); font-weight: 500; }
.ma-timeline-prodi { font-size: .78rem; color: var(--ma-text); font-weight: 600; margin-bottom: .2rem; }
.ma-timeline-desc  { font-size: .8rem;  color: var(--ma-text-muted); line-height: 1.45; }

/* Upload zone */
.ma-upload-zone {
  border:     2px dashed var(--ma-border);
  border-radius: var(--ma-radius-sm);
  padding:    1.5rem 1rem;
  text-align: center;
  cursor:     pointer;
  transition: border-color .15s, background .15s;
  position:   relative;
  background: #fafbfc;
}
.ma-upload-zone:hover  { border-color: var(--ma-green); background: var(--ma-green-light); }
.ma-upload-zone input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.ma-upload-zone-icon { color: var(--ma-text-muted); margin-bottom: .4rem; }
.ma-upload-zone-label { font-size: .85rem; font-weight: 600; color: var(--ma-text); margin-bottom: .2rem; }
.ma-upload-zone-hint  { font-size: .72rem; color: #a0aec0; }

/* -------------------------------------------------------
   19. Login Page
------------------------------------------------------- */
.ma-login-split {
  background: var(--ma-bg);
}

@media (min-width: 768px) {
  .ma-login-split {
    display:       flex;
    align-items:   stretch;
    border-radius: 0;
    box-shadow:    none;
    overflow:      hidden;
    background:    var(--ma-white);
    min-height:    calc(100vh - 90px);
    margin-top:    90px;
  }
}

/* Brand panel (left, desktop) */
.ma-login-brand { display: none; }

@media (min-width: 768px) {
  .ma-login-brand {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    align-items:    center;
    text-align:     center;
    flex:           1;
    padding:        3rem 2.5rem;
    background:     linear-gradient(160deg, var(--ma-dark) 0%, var(--ma-dark2) 55%, #0a6e48 100%);
    color:          #fff;
  }
}
.ma-login-brand-icon {
  font-size:  2.5rem;
  margin-bottom: .5rem;
}
.ma-login-brand-title {
  font-size:   1.4rem;
  font-weight: 800;
  color:       var(--ma-green);
  margin-bottom: .25rem;
}
.ma-login-brand-sub {
  font-size:   .9rem;
  font-weight: 600;
  color:       #fff;
  margin-bottom: .6rem;
}
.ma-login-brand-desc {
  font-size:  .82rem;
  color:      rgba(255,255,255,.5);
  line-height: 1.6;
  max-width:  260px;
}
.ma-login-brand-features {
  list-style: none;
  padding:    0;
  margin:     1.5rem 0 0;
  text-align: left;
}
.ma-login-brand-features li {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  font-size:   .8rem;
  color:       rgba(255,255,255,.65);
  margin-bottom: .5rem;
}
.ma-login-brand-features li::before {
  content:       '';
  display:       inline-block;
  width:         7px; height: 7px;
  background:    var(--ma-green);
  border-radius: 50%;
  flex-shrink:   0;
}

/* Form panel (right) */
.ma-login-form-panel {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        2rem 1.25rem;
}
@media (min-width: 768px) {
  .ma-login-form-panel {
    flex:    1;
    padding: 3rem 2.5rem;
  }
}
.ma-login-form-inner { max-width: 400px; width: 100%; margin: 0 auto; }

/* Mobile brand mark */
.ma-login-mobile-mark {
  text-align:    center;
  margin-bottom: 1.5rem;
}
.ma-login-mobile-mark .ma-login-brand-title { color: var(--ma-green); }
@media (min-width: 768px) { .ma-login-mobile-mark { display: none; } }

.ma-login-heading  { font-size: 1.35rem; font-weight: 800; color: var(--ma-text); margin-bottom: .3rem; }
.ma-login-sub      { font-size: .83rem; color: var(--ma-text-muted); margin-bottom: 1.5rem; line-height: 1.55; }

.ma-login-field { margin-bottom: .9rem; }
.ma-login-field label {
  display:        block;
  font-size:      .75rem;
  font-weight:    600;
  color:          var(--ma-text-muted);
  margin-bottom:  .3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ma-login-field .form-control {
  height:      50px;
  border:      1.5px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  font-size:   .95rem;
  padding:     0 1rem;
  background:  #fafbfc;
  transition:  border-color .15s, box-shadow .15s;
}
.ma-login-field .form-control:focus {
  border-color: var(--ma-green);
  box-shadow:   0 0 0 3px rgba(18,185,117,.12);
  background:   #fff;
  outline:      none;
}

.ma-login-forgot {
  text-align:    right;
  margin-bottom: 1.1rem;
}
.ma-login-forgot a { font-size: .8rem; color: var(--ma-green); font-weight: 500; }

.ma-login-divider {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  margin:      1.25rem 0;
  font-size:   .78rem;
  color:       var(--ma-text-muted);
}
.ma-login-divider::before,
.ma-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--ma-border); }

.ma-login-register {
  font-size:   .8rem;
  color:       var(--ma-text-muted);
  line-height: 1.55;
}
.ma-login-register a { color: var(--ma-green); font-weight: 600; }
.ma-login-register a:hover { text-decoration: underline; }

/* -------------------------------------------------------
   20. Alerts (app style)
------------------------------------------------------- */
.ma-alert {
  display:    flex;
  align-items: flex-start;
  gap:        .55rem;
  padding:    .85rem 1rem;
  border-radius: var(--ma-radius-sm);
  font-size:  .84rem;
  margin-bottom: .85rem;
  line-height: 1.5;
}
.ma-alert-danger  { background: #fee2e2; color: #991b1b; border-left: 3px solid #ef4444; }
.ma-alert-info    { background: #eff6ff; color: #1e40af; border-left: 3px solid #3b82f6; }
.ma-alert-success { background: #dcfce7; color: #166534; border-left: 3px solid var(--ma-green); }
.ma-alert-warning { background: #fef3c7; color: #92400e; border-left: 3px solid #f59e0b; }

/* -------------------------------------------------------
   21. Modal (app style)
------------------------------------------------------- */
#cardModal .modal-content {
  border-radius: var(--ma-radius);
  border:   none;
  overflow: hidden;
}
#cardModal .modal-header {
  background:    var(--ma-dark);
  color:         #fff;
  border-bottom: none;
}
#cardModal .modal-header .close        { color: rgba(255,255,255,.7); text-shadow: none; opacity: 1; }
#cardModal .modal-header .modal-title  { font-size: .95rem; font-weight: 600; }

@media (max-width: 767px) {
  #cardModal .modal-dialog  { margin: 0; max-width: 100%; height: 100%; }
  #cardModal .modal-content { height: 100%; border-radius: 0; }
  #cardModal .modal-body    { padding: 0; flex: 1; display: flex; flex-direction: column; }
  #cardModal .modal-body iframe { flex: 1; width: 100%; height: 100%; min-height: 80vh; }
}

/* -------------------------------------------------------
   22. Utilities
------------------------------------------------------- */
.ma-divider { border: none; border-top: 1px dashed var(--ma-border); margin: 1rem 0; }
.ma-text-muted { color: var(--ma-text-muted) !important; }
.ma-text-green  { color: var(--ma-green) !important; }

/* -------------------------------------------------------
   Supplement: aliases & missing classes for PHP views
------------------------------------------------------- */

/* settings-card-title = settings-card-header alias */
.ma-settings-card-title {
  padding:        .65rem 1rem;
  border-bottom:  1px solid var(--ma-border);
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--ma-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  background:     #fafbfc;
  display:        flex;
  align-items:    center;
  gap:            .4rem;
}

/* Field label as class (alias for .ma-field label) */
.ma-field-label {
  display:        block;
  font-size:      .75rem;
  font-weight:    600;
  color:          var(--ma-text-muted);
  margin-bottom:  .3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Input group parts */
.ma-input-group-addon {
  display:      flex;
  align-items:  center;
  padding:      0 .75rem;
  background:   #f1f5f9;
  color:        var(--ma-text-muted);
  font-size:    .78rem;
  font-weight:  600;
  white-space:  nowrap;
  border-right: 1px solid var(--ma-border);
  flex-shrink:  0;
}
.ma-input-group-input {
  flex:          1;
  border:        none;
  background:    transparent;
  font-size:     .9rem;
  color:         var(--ma-text);
  padding:       .6rem .85rem;
  min-width:     0;
  outline:       none;
}
.ma-input-group-input:focus { outline: none; }

/* Standalone input (used outside ma-input-group) */
.ma-input-group > .ma-input-group-input:only-child {
  border-radius: var(--ma-radius-sm);
}

/* Login input standalone */
.ma-login-input {
  display:       block;
  width:         100%;
  height:        50px;
  border:        1.5px solid var(--ma-border);
  border-radius: var(--ma-radius-sm);
  font-size:     .95rem;
  padding:       0 1rem;
  background:    #fafbfc;
  color:         var(--ma-text);
  transition:    border-color .15s, box-shadow .15s;
}
.ma-login-input:focus {
  border-color: var(--ma-green);
  box-shadow:   0 0 0 3px rgba(18,185,117,.12);
  background:   #fff;
  outline:      none;
}

/* Login brand name / tagline (aliases) */
.ma-login-brand-name {
  font-size:    1.4rem;
  font-weight:  800;
  color:        var(--ma-green);
  margin-bottom: .25rem;
}
.ma-login-brand-tagline {
  font-size:   .82rem;
  color:       rgba(255,255,255,.55);
  line-height: 1.6;
  max-width:   260px;
  margin-top:  .5rem;
}
.ma-login-brand-logo {
  margin-bottom: .75rem;
  color:         var(--ma-green);
}

/* Profile meta layout */
.ma-profile-meta {
  flex: 1;
  min-width: 0;
}

/* Timeline head / action */
.ma-timeline-head {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
  margin-bottom: .25rem;
}
.ma-timeline-date {
  font-size: .72rem;
  color:     var(--ma-text-muted);
}
.ma-timeline-action { margin-top: .6rem; }

/* Contact list label */
.ma-contact-label {
  font-size:   .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:       var(--ma-text-muted);
  min-width:   60px;
  flex-shrink: 0;
}

/* -------------------------------------------------------
   22. Member Page — Header Visibility Fix
   Force the header to be solid & fixed on member pages.
   Without this, the header is transparent/absolute and
   white nav links are invisible against the white page
   background.
------------------------------------------------------- */
body:has(.member-area-wrapper) .inner-header,
body:has(.ma-login-split) .inner-header {
  position:         fixed !important;
  top:              0;
  left:             0;
  right:            0;
  z-index:          1111 !important;
  background-color: rgba(10, 70, 42, 0.97) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter:  blur(8px);
  box-shadow:       0 2px 16px rgba(0,0,0,0.25) !important;
}

/* Keep logo visible (hide the alternate logo variant if any) */
body:has(.member-area-wrapper) .inner-header .navbar-brand .logo-simple,
body:has(.ma-login-split) .inner-header .navbar-brand .logo-simple {
  display: none;
}
body:has(.member-area-wrapper) .inner-header .navbar-brand .logo-fixed,
body:has(.ma-login-split) .inner-header .navbar-brand .logo-fixed {
  display: block;
}

/* -------------------------------------------------------
   23. Member Area — Search Bar
------------------------------------------------------- */
.ma-search-bar {
  background: linear-gradient(135deg, var(--ma-dark) 0%, var(--ma-dark2) 100%);
  padding: 1rem 1.25rem;
  border-radius: var(--ma-radius);
  margin-bottom: 1.5rem;
}

.ma-search-form {
  display:     flex;
  gap:         .5rem;
  align-items: center;
}

.ma-search-input-wrap {
  flex:            1;
  position:        relative;
  display:         flex;
  align-items:     center;
  background:      rgba(255,255,255,.12);
  border-radius:   var(--ma-radius-sm);
  padding:         .55rem 1rem;
  transition:      background .2s;
}
.ma-search-input-wrap:focus-within {
  background: rgba(255,255,255,.2);
}

.ma-search-icon {
  color:        rgba(255,255,255,.55);
  margin-right: .65rem;
  font-size:    .88rem;
  flex-shrink:  0;
}

.ma-search-input {
  flex:        1;
  background:  none;
  border:      none;
  outline:     none;
  color:       #fff;
  font-size:   .95rem;
  min-width:   0;
  margin:      0;
  padding:     0;
}
.ma-search-input::placeholder {
  color: rgba(255,255,255,.45);
}

.ma-search-actions {
  display:  flex;
  gap:      .35rem;
  flex-shrink: 0;
}

.ma-search-btn {
  background:    var(--ma-green);
  color:         #fff;
  border:        none;
  border-radius: var(--ma-radius-sm);
  padding:       .55rem 1.25rem;
  font-weight:   600;
  font-size:     .88rem;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background .2s;
}
.ma-search-btn:hover,
.ma-search-btn:focus {
  background: var(--ma-green-dark);
  outline:    none;
}

.ma-search-adv-btn {
  background:    rgba(255,255,255,.15);
  color:         #fff;
  border:        none;
  border-radius: var(--ma-radius-sm);
  padding:       .55rem .85rem;
  cursor:        pointer;
  transition:    background .2s;
  font-size:     .9rem;
}
.ma-search-adv-btn:hover,
.ma-search-adv-btn:focus {
  background: rgba(255,255,255,.27);
  outline:    none;
}

/* Mobile: stack input above buttons */
@media (max-width: 767px) {
  .ma-search-form {
    flex-wrap: wrap;
  }
  .ma-search-input-wrap {
    flex-basis: 100%;
  }
  .ma-search-btn {
    flex: 1;
  }
}