/* =========================================================
   INDEX PAGE ONLY (Scoped) - tidak ganggu halaman lain
   Aktif hanya jika body punya class .page-index
   ========================================================= */

.page-index .as-task-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* card layout tetap flex horizontal */
.page-index .as-task-card{
  background: #2b153b;
  border-radius: 24px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;            /* anchor badge */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* badge nempel ke card (tidak mengambang) */
.page-index .as-status-pill{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.page-index .as-status-open{ background: rgba(52,208,88,.92); }
.page-index .as-status-closed{ background: rgba(231,76,60,.92); }

/* kasih ruang agar title tidak ketiban badge */
.page-index .as-task-body{
  flex: 1;
  min-width: 0;
  padding-right: 140px; /* ruang badge */
}

/* thumbnail */
.page-index .as-task-thumb{
  width: 110px;
  height: 110px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-index .as-task-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* tombol kanan */
.page-index .as-task-right{
  min-width: 240px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}

/* slider khusus index */
.page-index .as-section--slider{ margin-bottom: 12px; }
.page-index .as-slider{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,.35);
}

/* responsive */
@media (max-width: 768px){
  .page-index .as-task-card{
    padding: 16px;
    gap: 14px;
    align-items: flex-start;
  }
  .page-index .as-task-thumb{
    width: 92px;
    height: 92px;
  }
  .page-index .as-task-right{
    min-width: 180px;
  }
  .page-index .as-task-body{
    padding-right: 120px;
  }
  .page-index .as-status-pill{
    top: 10px;
    right: 10px;
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* =========================================================
   FIX CARD INDEX -> balik seperti awal (thumb | body | right)
   ========================================================= */

.page-index .as-task-card{
  display:flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;

  padding: 22px 26px !important;
  border-radius: 24px !important;
  background: #2b153b !important;
  position: relative !important;
}

/* thumb kiri */
.page-index .as-task-thumb{
  width: 110px !important;
  height: 110px !important;
  flex: 0 0 110px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.page-index .as-task-img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
}

/* body tengah: wajib lebar (biar gak jadi kolom sempit) */
.page-index .as-task-body{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;

  padding-right: 0 !important;   /* buang sisa ruang aneh */
  padding-top: 0 !important;
}

/* title jangan wrap per kata */
.page-index .as-task-title{
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  white-space: normal !important;
}

/* meta bar (Harga max & coin) */
.page-index .as-task-meta{
  margin-top: 6px !important;
  display:flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.88) !important;
}

/* deskripsi */
.page-index .as-task-subtitle{
  font-size: 14px !important;
  color: #cfc1ea !important;
}

/* kanan: tombol */
.page-index .as-task-right{
  flex: 0 0 240px !important;
  min-width: 240px !important;
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* tombol hijau kembali seperti awal (bukan link biru) */
.page-index .as-task-btn{
  width: 100% !important;
  text-decoration: none !important;
}
.page-index .btn-admin.btn-admin-green{
  display:inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;
  color:#fff !important;
  background: linear-gradient(135deg,#34d058,#21b654) !important;
  box-shadow: 0 0 14px rgba(46,204,113,.38) !important;
  border: 0 !important;
}
.page-index .btn-admin.btn-admin-green *{
  color:#fff !important;
}

/* badge OPEN/CLOSED pojok kanan atas */
.page-index .as-status-pin{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 50 !important;
  margin: 0 !important;
}

/* CLOSED: teks "tugas ditutup" jangan bikin layout rusak */
.page-index .as-task-card--closed .as-task-right{
  min-width: 240px !important;
  flex: 0 0 240px !important;
}
.page-index .as-task-closed-note{
  color: rgba(255,255,255,.85) !important;
  font-weight: 600 !important;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){
  .page-index .as-task-card{
    padding: 16px !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }
  .page-index .as-task-thumb{
    width: 92px !important;
    height: 92px !important;
    flex-basis: 92px !important;
  }
  .page-index .as-task-right{
    min-width: 180px !important;
    flex-basis: 180px !important;
  }
  .page-index .as-status-pin{
    top: 10px !important;
    right: 10px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}