/* =========================================================
   NEON GAMING THEME — Override untuk index.php
   Scoped dengan .page-index, tidak affect halaman lain.
   Load TERAKHIR setelah main.css + admin.css + mobile.css + index-page.css
   ========================================================= */

/* ============ NEON PALETTE (local custom props) ============ */
.page-index{
  --neon-purple:#a855f7;
  --neon-pink:#ec4899;
  --neon-cyan:#06b6d4;
  --neon-gold:#fbbf24;
  --neon-green:#22c55e;
  --neon-red:#ef4444;

  --bg-dark1:#1a0a2e;
  --bg-dark2:#050208;
  --card-dark:#1f0f33;
  --field-dark:#180b28;
}

/* ============ BODY: dark gaming bg + grid pattern + glow ============ */
body.page-index{
  background:
    radial-gradient(ellipse at top, var(--bg-dark1), var(--bg-dark2)) !important;
  color: rgba(255,255,255,.92);
  overflow-x: hidden;
  position: relative;
}

/* animated grid pattern */
body.page-index::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(168,85,247,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
  z-index: -1;                         /* di bawah semua konten */
  animation: page-index-gridShift 60s linear infinite;
}

@keyframes page-index-gridShift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

/* neon glow — z-index -1 supaya tidak interfere dengan sidebar stacking */
body.page-index::after{
  content:"";
  position: fixed;
  inset: -200px;
  background:
    radial-gradient(circle at 15% 10%, rgba(168,85,247,.20), transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(236,72,153,.15), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(6,182,212,.12), transparent 55%);
  filter: blur(50px);
  pointer-events: none;
  z-index: -1;                         /* di bawah semua konten */
  animation: page-index-glowPulse 10s ease-in-out infinite;
}

@keyframes page-index-glowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Pastikan sidebar benar-benar di atas segalanya di page-index */
body.page-index .as-sidebar{
  z-index: 10060 !important;
}
body.page-index .as-sidebar-overlay{
  z-index: 10050 !important;
}

/* pastikan main content di atas bg pseudo */
.page-index .as-main,
.page-index .as-topbar{ position: relative; z-index: 1; }
/* sidebar tetap pakai position:fixed + z-index:10040 dari main.css (jangan override) */

/* ============ TOPBAR ============ */
.page-index .as-topbar{
  background: rgba(20, 10, 35, .85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 1px 0 rgba(168,85,247,.25),
    0 8px 32px rgba(0,0,0,.5) !important;
  position: relative;
  z-index: 50;
}

/* neon underline accent topbar */
.page-index .as-topbar::after{
  content:"";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--neon-purple) 30%,
    var(--neon-pink) 50%,
    var(--neon-cyan) 70%,
    transparent 100%);
  opacity: .6;
}

/* Brand */
.page-index .as-logo-img{
  filter: drop-shadow(0 0 12px rgba(168,85,247,.6));
  transition: filter .3s ease;
}
.page-index .as-brand-link:hover .as-logo-img{
  filter: drop-shadow(0 0 20px rgba(168,85,247,.9));
}

.page-index .as-logo-text{
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: page-index-titleShine 4s linear infinite;
  font-weight: 900;
  letter-spacing: 1px;
}

@keyframes page-index-titleShine {
  to { background-position: 200% center; }
}

.page-index .as-tagline{
  color: rgba(255,255,255,.65);
  font-size: 11px;
}

/* Burger menu */
.page-index .as-burger{
  background: rgba(168,85,247,.10) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(168,85,247,.25) !important;
  padding: 8px 10px !important;
  transition: all .2s ease;
}
.page-index .as-burger:hover{
  background: rgba(168,85,247,.20) !important;
  box-shadow: 0 0 20px rgba(168,85,247,.4);
}
.page-index .as-burger span{
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink)) !important;
  height: 2.5px !important;
}

/* User block (avatar + name) */
.page-index .as-user-block{
  background: rgba(168,85,247,.08);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.25);
}

.page-index .as-user-avatar{
  box-shadow:
    0 0 0 2px var(--bg-dark1),
    0 0 0 4px var(--neon-purple),
    0 0 20px rgba(168,85,247,.5);
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
}

.page-index .as-user-avatar--placeholder{
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(0,0,0,.5);
}

.page-index .as-user-name{
  color: rgba(255,255,255,.92) !important;
  font-size: 13px;
}
.page-index .as-user-name b{
  color: #fff;
  text-shadow: 0 0 12px rgba(168,85,247,.6);
}

/* Buttons di topbar */
.page-index .as-btn{
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  font-size: 12px;
  padding: 9px 18px !important;
  min-height: 38px;
  text-transform: uppercase;
  transition: all .25s ease;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.page-index .as-btn-primary{
  background: linear-gradient(135deg,
    var(--neon-purple) 0%,
    var(--neon-pink) 50%,
    var(--neon-purple) 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  box-shadow:
    0 6px 20px rgba(168,85,247,.4),
    inset 0 0 0 1px rgba(255,255,255,.15);
}
.page-index .as-btn-primary::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.page-index .as-btn-primary:hover{
  transform: translateY(-2px);
  background-position: 100% 100% !important;
  box-shadow:
    0 10px 28px rgba(168,85,247,.6),
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 0 30px rgba(236,72,153,.4);
}
.page-index .as-btn-primary:hover::before{ transform: translateX(100%); }

.page-index .as-btn-outline{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.4) !important;
  border: none !important;
}
.page-index .as-btn-outline:hover{
  background: rgba(168,85,247,.15) !important;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.6), 0 0 20px rgba(168,85,247,.3) !important;
}

/* ============ MAIN CONTENT ============ */
.page-index .as-main{
  padding: 24px 20px;
  padding-bottom: max(60px, env(safe-area-inset-bottom));
  max-width: 1400px;
  margin: 0 auto;
}

/* ============ SECTION TITLE ============ */
.page-index .as-section-title{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 16px;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: page-index-titleShine 4s linear infinite;
  text-shadow: 0 0 30px rgba(168,85,247,.4);
  position: relative;
  padding-left: 16px;
}

.page-index .as-section-title::before{
  content:"";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--neon-purple), var(--neon-pink));
  box-shadow: 0 0 16px rgba(168,85,247,.6);
  -webkit-text-fill-color: var(--neon-purple); /* fallback if gradient bg fails */
}

/* badge "X tugas baru" */
.page-index .ap-badge-new-count{
  -webkit-text-fill-color: #fff;
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(168,85,247,.4), inset 0 0 0 1px rgba(255,255,255,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  animation: page-index-badgePulse 2s ease-in-out infinite;
}

@keyframes page-index-badgePulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(168,85,247,.4), inset 0 0 0 1px rgba(255,255,255,.2); }
  50%      { box-shadow: 0 6px 24px rgba(168,85,247,.7), inset 0 0 0 1px rgba(255,255,255,.3); }
}

/* ============ SLIDER ============ */
.page-index .as-slider{
  border-radius: 24px !important;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 12px 40px rgba(0,0,0,.5),
    0 0 60px rgba(168,85,247,.15) !important;
}

/* gradient border around slider */
.page-index .as-slider::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg,
    var(--neon-purple), var(--neon-pink), var(--neon-cyan),
    var(--neon-purple), var(--neon-pink));
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: page-index-borderShift 8s ease infinite;
  opacity: .45;
  z-index: 5;
}

@keyframes page-index-borderShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.page-index .as-slider-btn{
  background: rgba(20, 10, 35, .7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(168,85,247,.4) !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  font-size: 16px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.page-index .as-slider-btn:hover{
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)) !important;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 24px rgba(168,85,247,.5);
}

/* ============ CART BUTTON + FLOATING ============ */

/* Row: tombol keranjang + kerjakan */
.page-index .as-task-actions-row{
  display: flex;
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

/* Tombol keranjang (square, kiri) */
.page-index .btn-cart-add{
  flex: 0 0 auto;
  width: 40px;
  min-height: 36px;
  border-radius: 10px;
  background: rgba(168,85,247,.12);
  border: 1.5px solid rgba(168,85,247,.3);
  color: rgba(168,85,247,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  padding: 0;
}
.page-index .btn-cart-add svg{ width: 16px; height: 16px; }

.page-index .btn-cart-add:hover{
  background: rgba(168,85,247,.25);
  border-color: rgba(168,85,247,.6);
  color: #fff;
  transform: scale(1.05);
}

/* State: sudah di cart → gold accent */
.page-index .btn-cart-add.is-in-cart{
  background: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.5);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251,191,36,.3);
}

/* Task btn (kerjakan) mengisi sisa */
.page-index .as-task-actions-row .as-task-btn,
.page-index .as-task-actions-row .btn-admin-green{
  flex: 1;
}

/* ===== TC ERROR MESSAGE (dalam modal, ganti browser alert) ===== */
.page-index .tc-error-msg{
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
  position: relative;
  z-index: 2;
}
.page-index .tc-error-msg.tc-error-show{
  opacity: 1;
  transform: translateY(0);
}

/* Toast error variant */
.cart-toast--error{
  background: rgba(239,68,68,.85) !important;
  border-color: rgba(239,68,68,.6) !important;
  color: #fff !important;
}

/* ===== FLOATING CART ===== */
.cart-float{
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(168,85,247,.55);
  z-index: 8990;
  text-decoration: none;
  transition: transform .25s ease, opacity .25s ease;
}
.cart-float svg{ width: 22px; height: 22px; }
.cart-float:hover{ transform: scale(1.1); }
.cart-float--hidden{ transform: scale(0); opacity: 0; pointer-events: none; }

/* Cart count badge */
.cart-float-count{
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fbbf24;
  color: #1a0a30;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #050208;
}

/* Toast notification */
.cart-toast{
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(31,15,51,.97);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(168,85,247,.3);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.cart-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ TASK CARDS ============ */
.page-index .as-task-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 14px;
}

.page-index .as-task-card{
  background: var(--card-dark) !important;
  border-radius: 22px !important;
  padding: 22px 26px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    0 0 0 1px rgba(168,85,247,.15) inset !important;
  transition: all .25s ease;
}

.page-index .as-task-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(168,85,247,.4) inset,
    0 0 40px rgba(168,85,247,.2) !important;
}

/* NEW card: gradient border + glow */
.page-index .as-task-card--new{
  background: linear-gradient(180deg, rgba(31, 15, 51, 1) 0%, rgba(25, 10, 45, 1) 100%) !important;
}

.page-index .as-task-card--new::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;        /* IKUTI border-radius card (22px desktop, 14px mobile) */
  padding: 1.5px;
  /* Tanpa gold supaya menyatu dgn theme purple-pink, tidak clash dgn foto putih */
  background: linear-gradient(135deg,
    var(--neon-purple), var(--neon-pink), var(--neon-cyan),
    var(--neon-purple), var(--neon-pink));
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: page-index-borderShift 6s ease infinite;
  opacity: .55;
  z-index: 5;
}

/* CLOSED card: muted/grayscale */
.page-index .as-task-card--closed{
  opacity: .55;
  filter: grayscale(.4);
}

/* Thumbnail */
.page-index .as-task-thumb{
  width: 110px !important;
  height: 110px !important;
  border-radius: 18px !important;
  overflow: hidden;
  background: rgba(168,85,247,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.15);
  position: relative;
  z-index: 1;
}

.page-index .as-task-thumb-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 900;
  font-size: 18px;
  color: var(--neon-purple);
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(168,85,247,.6);
}

/* Task body */
.page-index .as-task-body{
  flex: 1;
  min-width: 0;
  padding-right: 140px;        /* ruang badge OPEN/CLOSED */
  position: relative;
  z-index: 1;
}

.page-index .as-task-title{
  color: #fff !important;
  font-weight: 900;
  font-size: clamp(15px, 2.5vw, 18px);
  letter-spacing: .5px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-index .as-task-subtitle{
  color: rgba(255,255,255,.7) !important;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

/* ===== Varian warna info di card tugas =====
   Disamain pill shape & spacing dengan as-task-meta-item (Harga MAX, Convert Coin)
   supaya jarak vertikal konsisten antar pill badge. */
.page-index .as-task-varian{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;     /* TIGHT dari nama produk */
  padding: 5px 12px;   /* match dengan as-task-meta-item */
  border-radius: 999px;
  background: rgba(6,182,212,.10);
  border: 1px solid rgba(6,182,212,.32);
  max-width: 100%;
  font-size: 13px;
}
.page-index .as-varian-label{
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.page-index .as-varian-all{
  font-size: 12px;
  font-weight: 800;
  color: #67e8f9;
  letter-spacing: .3px;
}
.page-index .as-varian-chips{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.page-index .as-varian-chip{
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(6,182,212,.25);
  color: #67e8f9;
  border: 1px solid rgba(6,182,212,.45);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* Task meta (Harga MAX + Convert Coin)
   margin-top dikecilkan jadi 6px supaya gap varian → harga max
   = gap harga max → convert coin (via flex row-gap 6px) */
.page-index .as-task-meta{
  display: flex;
  gap: 6px;            /* tight & consistent */
  margin-top: 6px;     /* match dengan jarak antar meta item */
  flex-wrap: wrap;
  font-size: 13px;
}

.page-index .as-task-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(168,85,247,.10);
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.25);
  color: rgba(255,255,255,.92);
}
.page-index .as-task-meta-item strong{
  color: var(--neon-gold);
  font-weight: 700;
}

/* Marketplaces icons */
.page-index .as-task-marketplaces{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.page-index .as-mp-icon{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  transition: all .2s ease;
}

.page-index .as-mp-icon.is-active{
  box-shadow: 0 0 0 2px rgba(168,85,247,.4), 0 0 12px rgba(168,85,247,.3);
}

.page-index .as-mp-icon.is-inactive{
  opacity: .3;
  filter: grayscale(1);
}

.page-index .as-mp-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Status pill (OPEN / CLOSED) */
.page-index .as-status-pill{
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.page-index .as-status-open{
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 4px 14px rgba(34,197,94,.4), inset 0 0 0 1px rgba(255,255,255,.2) !important;
}

.page-index .as-status-closed{
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 4px 14px rgba(239,68,68,.3), inset 0 0 0 1px rgba(255,255,255,.15) !important;
}

/* NEW badge default (di samping title - jadi fallback kalau bukan .as-badge-new-on-thumb) */
.page-index .as-badge-new{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px rgba(168,85,247,.5), inset 0 0 0 1px rgba(255,255,255,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  animation: page-index-badgePulse 2s ease-in-out infinite;
}

/* ===== NEW badge ON THUMB (bottom-left of foto tugas) =====
   GLOBAL rule (no media query) + !important supaya pasti override
   default inline-flex dan apply di semua viewport */
.page-index .as-task-thumb{
  position: relative !important;
}
.page-index .as-badge-new.as-badge-new-on-thumb{
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  top: auto !important;
  right: auto !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  z-index: 10 !important;
  display: inline-block !important;       /* override inline-flex */
  box-shadow:
    0 2px 8px rgba(168,85,247,.55),
    0 0 0 1.5px rgba(0,0,0,.35),          /* kontras di foto bg putih */
    inset 0 0 0 1px rgba(255,255,255,.25) !important;
}

/* Task right (action button) */
.page-index .as-task-right{
  min-width: 240px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.page-index .as-task-closed-note{
  color: rgba(255,255,255,.5);
  font-size: 13px;
  font-style: italic;
}

/* "Kerjakan" button */
.page-index .as-task-btn,
.page-index .btn-admin-green{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 13px 22px !important;
  min-width: 200px;
  border-radius: 16px !important;
  background: linear-gradient(135deg,
    var(--neon-purple) 0%,
    var(--neon-pink) 50%,
    var(--neon-purple) 100%) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .5px;
  border: none !important;
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(168,85,247,.45),
    inset 0 0 0 1px rgba(255,255,255,.15) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.page-index .as-task-btn::before,
.page-index .btn-admin-green::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}

.page-index .as-task-btn:hover,
.page-index .btn-admin-green:hover{
  transform: translateY(-2px);
  background-position: 100% 100% !important;
  box-shadow:
    0 12px 32px rgba(168,85,247,.6),
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 0 40px rgba(236,72,153,.4) !important;
}

.page-index .as-task-btn:hover::before,
.page-index .btn-admin-green:hover::before{ transform: translateX(100%); }

.page-index .btn-label-main{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.page-index .btn-label-sub{
  font-size: 11px;
  opacity: .85;
  font-weight: 600;
  letter-spacing: .3px;
}

/* ============ CONFIRMATION MODAL (tc-modal) — REDESIGN ============ */
.page-index .tc-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9800;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.page-index .tc-modal.is-visible{
  display: flex !important;
}

/* Overlay */
.page-index .tc-modal-overlay{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Modal box */
.page-index .tc-modal-box{
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  max-width: 400px !important;
  max-height: 90dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1f0f33 0%, #150829 100%) !important;
  border-radius: 22px !important;
  padding: 24px 20px 20px !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 50px rgba(168,85,247,.2) !important;
  border: 1px solid rgba(168,85,247,.25) !important;
  animation: page-index-cardEnter .35s cubic-bezier(.16,1,.3,1) both;
}

/* Title */
.page-index .tc-modal-title{
  font-size: 17px !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
  /* gradient text */
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 60%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: page-index-titleShine 4s linear infinite;
  position: relative; z-index: 1;
}

/* Subtitle/description */
.page-index .tc-modal-text{
  font-size: 13px !important;
  color: rgba(255,255,255,.65) !important;
  text-align: center !important;
  margin: 0 0 16px !important;
  line-height: 1.5;
  position: relative; z-index: 1;
}

/* Divider */
.page-index .tc-modal-box hr,
.page-index .tc-modal-divider{
  border: none;
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 14px 0;
}

/* Checkbox group */
.page-index .tc-checkbox-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}

.page-index .tc-checkbox-group-bottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Each checkbox item */
.page-index .tc-check{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  position: relative; z-index: 1;
}

.page-index .tc-check:hover{
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.2);
}

/* Check yang sudah dicentang — highlight subtle */
.page-index .tc-check:has(input:checked){
  background: rgba(168,85,247,.10);
  border-color: rgba(168,85,247,.35);
}

.page-index .tc-check input[type="checkbox"]{
  flex-shrink: 0;
  width: 18px !important; height: 18px !important;
  margin-top: 1px;
  accent-color: var(--neon-purple) !important;
  cursor: pointer;
}

.page-index .tc-check span{
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
}

/* Actions */
.page-index .tc-modal-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  position: relative; z-index: 1;
}

/* Kembali — ghost */
.page-index .tc-modal-actions .btn-admin-outline,
.page-index .tc-btn-back{
  flex: 0 0 auto !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .2s ease;
  min-width: 90px;
  text-align: center;
}
.page-index .tc-modal-actions .btn-admin-outline:hover,
.page-index .tc-btn-back:hover{
  background: rgba(255,255,255,.12) !important;
}

/* Ya Sudah Mengerti — neon gradient */
.page-index .tc-modal-actions .btn-admin-green,
.page-index .tc-btn-ok{
  flex: 1 !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)) !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 6px 20px rgba(168,85,247,.4);
  text-align: center;
}
.page-index .tc-modal-actions .btn-admin-green:hover,
.page-index .tc-btn-ok:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(168,85,247,.6) !important;
}
.page-index .tc-modal-actions .btn-admin-green:disabled,
.page-index .tc-btn-ok:disabled{
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ====================================================
   RESPONSIVE MOBILE — APP-LIKE LAYOUT (Shopee/Tokopedia style)
   ==================================================== */
@media (max-width: 768px){

  /* FORCE no horizontal overflow */
  html.page-index, body.page-index{
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* FORCE sidebar tetap off-screen sampai di-trigger
     (defensive — kalau ada CSS conflict lain) */
  .page-index .as-sidebar:not(.is-open){
    transform: translateX(-105%) !important;
  }
  body.page-index:not(.as-sidebar-open) .as-sidebar{
    transform: translateX(-105%) !important;
    visibility: hidden;
  }
  body.page-index.as-sidebar-open .as-sidebar{
    transform: translateX(0) !important;
    visibility: visible;
  }

  /* JANGAN biarkan content shift saat sidebar buka di mobile */
  body.page-index.as-sidebar-open .page-content,
  body.page-index.as-sidebar-open .as-main{
    margin-left: 0 !important;
  }

  /* ==================== TOPBAR APP-LIKE (minimalist) ==================== */
  /* Layout: [burger absolute kiri]  [logo+brand CENTER]  [right hidden]
     Avatar + logout pindah ke halaman akun. */
  .page-index .as-topbar{
    position: sticky !important;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px !important;
    padding-left: 64px !important;      /* ruang untuk burger absolute */
    padding-right: 64px !important;     /* balance kanan supaya brand truly center */
    height: auto !important;
    min-height: 60px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* HIDE topbar right block (avatar + logout) di mobile */
  .page-index .as-topbar-right{
    display: none !important;
  }

  .page-index .as-tagline{ display: none !important; }

  /* ===== BURGER: FIXED LEFT (pojok kiri atas) ===== */
  .page-index .as-burger{
    position: absolute !important;
    left: 12px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: rgba(168,85,247,.12) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(168,85,247,.3) !important;
    cursor: pointer;
    z-index: 60;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: all .2s ease;
  }

  .page-index .as-burger:hover,
  .page-index .as-burger:active{
    background: rgba(168,85,247,.25) !important;
    box-shadow: 0 0 20px rgba(168,85,247,.4);
    transform: translateY(-50%) scale(1.05);
  }

  /* ===== BURGER LINES: 3 garis horizontal menurun ===== */
  .page-index .as-burger span{
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    background: #fff !important;                /* solid white untuk safety */
    background: linear-gradient(90deg, #a855f7, #ec4899) !important;
    box-shadow: 0 0 8px rgba(168,85,247,.5);
    flex-shrink: 0;
  }

  /* ===== TOPBAR LEFT: wrapper untuk burger + brand-link ===== */
  /* Karena burger absolute, .as-topbar-left visually cuma berisi brand-link.
     .as-topbar-left jadi flex container yang center brand */
  .page-index .as-topbar-left{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;            /* hanya selebar contentnya */
    min-width: 0;
    max-width: 100%;
  }

  /* ===== BRAND (logo + text) — CENTER ===== */
  .page-index .as-brand-link{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin: 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  .page-index .as-brand-inner{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .page-index .as-logo-img{
    height: 34px !important;
    width: auto !important;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(168,85,247,.6));
  }

  .page-index .as-brand-text{
    min-width: 0;
    overflow: hidden;
  }

  .page-index .as-logo-text{
    font-size: 17px !important;
    font-weight: 900;
    letter-spacing: 1.5px !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  /* ==================== MAIN CONTAINER ==================== */
  /* Main: zero margin + minimal padding (topbar sticky bukan fixed, tidak perlu padding besar) */
  .page-index .as-main,
  .page-index .page-content{
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 8px 12px 16px !important;
    padding-top: 8px !important;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
  }
  /* Override .as-main { padding-top: 70px } dan .page-content { padding-top: var(--topbar-h) } */
  body.page-index .as-main,
  body.page-index .page-content{
    padding-top: 8px !important;
    margin-top: 0 !important;
  }

  /* ==================== BANNER SLIDER ==================== */
  /* Banner edge-to-edge: negative margin kompensasi page-content padding 12px,
     border-radius kecil supaya tetap kelihatan polished. */
  .page-index .as-section--slider{
    padding: 0 !important;
    margin: 0 -12px 16px !important;
    width: calc(100% + 24px) !important;
  }
  .page-index .as-slider{
    border-radius: 0 !important;                /* edge-to-edge full bleed */
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    margin: 0 !important;
    max-width: 100% !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.45) !important;
  }
  .page-index .as-slider::after{
    display: none;                               /* gradient border tidak perlu di edge-to-edge */
  }
  .page-index .as-slide{
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0;                              /* anti shrink di flex track */
  }
  .page-index .as-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;                 /* hilangkan radius internal img */
    display: block;
  }
  .page-index .as-slide{
    width: 100% !important;
    height: 100% !important;
  }
  .page-index .as-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .page-index .as-slider-btn{
    width: 32px !important;
    height: 32px !important;
    font-size: 12px;
  }
  .page-index .as-slider-btn.prev{ left: 8px !important; }
  .page-index .as-slider-btn.next{ right: 8px !important; }

  /* ==================== SECTION TITLE ==================== */
  .page-index .as-section{
    padding: 0 !important;
    margin-bottom: 12px;
  }
  .page-index .as-section-title{
    font-size: 16px !important;
    letter-spacing: 1.5px !important;
    margin: 8px 0 12px !important;
    padding-left: 12px !important;
    gap: 10px;
  }
  .page-index .as-section-title::before{
    width: 3px;
    height: 60%;
  }
  .page-index .ap-badge-new-count{
    font-size: 10px;
    padding: 4px 10px;
  }

  /* ==================== TASK LIST: 2 KOLOM (marketplace style) ==================== */
  .page-index .as-task-list{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* CARD: balik ke block (tidak grid/flex) supaya thumb aspect-ratio 1:1 work.
     Untuk sejajar action bar antar kolom, force title 2 baris via min-height. */
  .page-index .as-task-card{
    padding: 0 !important;
    border-radius: 14px !important;
    display: block !important;
    overflow: hidden;
    background: linear-gradient(180deg, var(--card-dark) 0%, #1a0a30 100%) !important;
  }

  /* Image: 1:1 full-width card */
  .page-index .as-task-card .as-task-thumb{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .page-index .as-task-card .as-task-img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .page-index .as-task-card .as-task-thumb-placeholder{
    width: 100%; height: 100%;
    font-size: 18px;
    background: linear-gradient(135deg, rgba(168,85,247,.1), rgba(236,72,153,.05));
  }

  /* Body: compact */
  .page-index .as-task-card .as-task-body{
    padding: 8px 9px 4px !important;
    grid-row: unset;
    padding-right: 9px !important;
  }

  /* Marketplace icons: smaller */
  .page-index .as-task-card .as-task-marketplaces{
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .page-index .as-task-card .as-mp-icon{
    width: 20px !important;
    height: 20px !important;
  }

  /* Title: compact, FORCE 2 baris (min-height) supaya body antar card sama
     tingginya → tombol action bar otomatis sejajar */
  .page-index .as-task-card .as-task-title{
    font-size: 12.5px !important;
    padding-right: 0 !important;
    line-height: 1.3;
    margin-bottom: 6px;
    color: #fff !important;
    font-weight: 800;
    min-height: calc(12.5px * 1.3 * 2) !important;   /* 2 baris × line-height */
    /* max 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Title: jarak ke pill berikutnya (varian atau Harga MAX) */
  .page-index .as-task-card .as-task-title{
    font-size: 12.5px !important;
    padding-right: 0 !important;
    line-height: 1.3;
    margin-bottom: 5px !important;   /* tight, konsisten dgn pill-to-pill gap */
    color: #fff !important;
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Meta pills: SAMA BARIS (Harga MAX dan Convert Coin sejajar) */
  .page-index .as-task-card .as-task-meta{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 5px !important;       /* gap konsisten dengan inner gap */
    align-items: flex-start;
    width: 100%;
  }
  .page-index .as-task-card .as-task-meta-item{
    display: inline-flex !important;
    flex: 0 0 auto !important;          /* jangan stretch, ikut konten */
    padding: 3px 7px !important;
    font-size: 10px !important;
    gap: 3px !important;
    white-space: nowrap;
    border-radius: 999px !important;
  }
  .page-index .as-task-card .as-task-meta-item strong{
    font-size: 9.5px;
  }

  /* Varian pill: match ukuran & spacing dengan meta-item (Harga MAX) */
  .page-index .as-task-card .as-task-varian{
    margin-top: 0 !important;          /* title margin-bottom: 5px sudah handle */
    padding: 3px 7px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }
  .page-index .as-task-card .as-varian-label{
    font-size: 10px;
  }
  .page-index .as-task-card .as-varian-all{
    font-size: 10px !important;
  }
  .page-index .as-task-card .as-varian-chip{
    padding: 0 6px !important;
    font-size: 9.5px !important;
  }

  /* Description: hidden di 2-col */
  .page-index .as-task-card .as-task-subtitle{
    display: none !important;
  }

  /* Action bar: padding lebih lega supaya tidak mepet ke bingkai card.
     Sejajar antar kolom dijamin oleh .as-task-title min-height = 2 baris,
     jadi body antar card otomatis sama tingginya. */
  .page-index .as-task-card .as-task-right{
    grid-column: unset; grid-row: unset;
    min-width: 0;
    padding: 10px 12px 12px !important;
    border-top: 1px solid rgba(168,85,247,.10);
    margin-top: 6px;
    display: block;
  }

  .page-index .as-task-card .as-task-btn,
  .page-index .as-task-card .btn-admin-green{
    width: 100%; min-width: 0;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    min-height: 36px;
    flex-direction: row !important;
    justify-content: center;
  }

  .page-index .as-task-card .btn-label-main{
    font-size: 11px !important;
    letter-spacing: .5px;
  }
  /* Hide sub-label di 2-col */
  .page-index .as-task-card .btn-label-sub{
    display: none !important;
  }

  /* Status pill: top-right di atas image */
  .page-index .as-task-card .as-status-pill{
    position: absolute !important;
    top: 7px !important; right: 7px !important;
    font-size: 9px !important;
    padding: 3px 8px !important;
    z-index: 10;
    backdrop-filter: blur(4px);
  }

  /* NEW badge on-thumb rule sudah di GLOBAL scope (di luar @media)
     supaya berlaku di semua viewport. Tidak perlu duplicate di sini. */

  /* CLOSED note */
  .page-index .as-task-card .as-task-closed-note{
    text-align: center; display: block;
    padding: 10px 8px;
    background: rgba(239,68,68,.08);
    border-radius: 8px;
    font-size: 11px;
  }
}

/* ==================== SMALL PHONE ==================== */
@media (max-width: 380px){
  .page-index .as-task-list{ gap: 8px !important; }
  .page-index .as-task-card .as-task-title{ font-size: 11.5px !important; }
  .page-index .as-task-card .as-task-meta-item{ font-size: 9.5px !important; }
  .page-index .as-task-card .btn-label-main{ font-size: 10.5px !important; }
  .page-index .as-task-card .btn-label-sub{ display: none !important; }
  .page-index .as-logo-text{ font-size: 14px !important; }
  .page-index .as-btn{ padding: 7px 12px !important; }
}