/* =============================================================================
   Harapan Partner Portal — Polish Visual (ADDITIVE — tempel saja)
   -----------------------------------------------------------------------------
   Dipakai bersama portal-fx.js. Murni TAMPILAN: tidak mengubah struktur, id,
   query Supabase, perhitungan, atau keamanan.

   Mengandalkan token brand yang SUDAH ada di mockup partner/sales/admin:
     --accent-grad, --accent, --border, --card-shadow
   (jika nama token berbeda di suatu halaman, sesuaikan baris yang memakainya).

   PENTING: muat file ini PALING AKHIR di <head> (sesudah <style> bawaan)
   supaya aturan di sini menang tanpa perlu !important.
   ============================================================================ */

/* 1) Kartu interaktif (angkat halus + border ungu saat hover) ----------------*/
.kpi, .near, .dchip { transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.kpi:hover, .near:hover, .dchip:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(123,63,228,0.18), var(--card-shadow);
}
.card { transition: border-color .2s ease, box-shadow .25s ease; }
.card:hover {
  border-color: rgba(123,63,228,0.45);
  box-shadow: 0 16px 40px rgba(123,63,228,0.14), var(--card-shadow);
}

/* 2) Hero gradient: kilau cahaya halus --------------------------------------*/
.team-hero { position: relative; overflow: hidden; isolation: isolate; }
.team-hero::after {
  content: ''; position: absolute; top: -45%; right: -6%;
  width: 360px; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%);
}

/* 3) Label section: bar gradien membulat (ganti garis kiri kaku) -------------*/
.sec-label, .sec { border-left: none !important; padding-left: 16px; position: relative; }
.sec-label::before, .sec::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; border-radius: 3px; background: var(--accent-grad);
}

/* 4) Avatar + tab ------------------------------------------------------------*/
.tb-avatar { box-shadow: 0 4px 14px rgba(123,63,228,0.35); }
.stab:hover { transform: translateY(-1px); }

/* 5) Aliran "liquid" satu arah (kiri→kanan, berulang mulus) ------------------
   Berlaku otomatis utk .tt-fill (progress bar). Untuk tombol/elemen lain,
   tambahkan class  fx-liquid.                                                  */
@keyframes fxLiquid { from { background-position: 200% 0; } to { background-position: 0% 0; } }
.fx-liquid, .tt-fill {
  background: linear-gradient(90deg,#5535C0 0%,#7B3FE4 30%,#9B6BFF 50%,#7B3FE4 70%,#5535C0 100%);
  background-size: 200% 100%;
  animation: fxLiquid 3.5s linear infinite;
}

/* 6) Progress bar terkesan "melayang" ---------------------------------------*/
.tt-bar  { box-shadow: inset 0 1px 4px rgba(0,0,0,0.22); }
.tt-fill {
  top: 3px; bottom: 3px; border-radius: 11px;
  box-shadow: 0 4px 14px rgba(123,63,228,0.55), 0 2px 6px rgba(123,63,228,0.40);
}

/* 7) Bar "Target vs Aktual" tumbuh dari bawah (wave kiri→kanan) --------------*/
@keyframes fxGrowBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.tva-b { transform-origin: bottom; animation: fxGrowBar .55s cubic-bezier(.2,.8,.2,1) both; }
.tva-col:nth-child(1) .tva-b { animation-delay: 0s; }
.tva-col:nth-child(2) .tva-b { animation-delay: .05s; }
.tva-col:nth-child(3) .tva-b { animation-delay: .10s; }
.tva-col:nth-child(4) .tva-b { animation-delay: .15s; }
.tva-col:nth-child(5) .tva-b { animation-delay: .20s; }
.tva-col:nth-child(6) .tva-b { animation-delay: .25s; }

/* 8) Reveal saat scroll (butuh atribut data-fx-reveal + portal-fx.js) --------*/
.fx-reveal    { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.fx-reveal.in { opacity: 1; transform: none; }

/* 9) Efek tekan tombol (tactile) — berlaku SEMUA tombol di tiap halaman -------
   :hover sedikit terang, :active mengecil + redup (terasa "ditekan"),
   tombol toggle aktif (.btn.on / [aria-pressed=true]) tetap berwarna ungu.    */
button, .btn, .btn-cek, .btn-pl, .btn-dl, .btn-pri, .btn-gh, .tab, .ptab, .stab,
.theme-opt, .tb-out, .kclose, .lnk {
  transition: transform .08s ease, filter .15s ease, box-shadow .18s ease,
              background .18s ease, border-color .18s ease, color .15s ease;
}
button:not(:disabled):hover, .btn:hover, .btn-cek:hover, .btn-pl:hover,
.btn-dl:hover, .btn-pri:hover { filter: brightness(1.07); }
button:not(:disabled):active, .btn:active, .btn-cek:active, .btn-pl:active,
.btn-dl:active, .btn-pri:active, .btn-gh:active, .tab:active, .ptab:active,
.theme-opt:active, .tb-out:active, .kclose:active {
  transform: scale(0.93);
  filter: brightness(0.9);
}
/* Status aktif/terpilih tetap berwarna + sedikit terangkat */
.btn.on, .tab.active, .ptab.active, .stab.active, [aria-pressed="true"] {
  box-shadow: 0 4px 14px rgba(123,63,228,0.32);
}
@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active, .btn-cek:active, .btn-pl:active, .btn-dl:active,
  .btn-pri:active, .tab:active, .ptab:active, .theme-opt:active, .tb-out:active,
  .kclose:active { transform: none; }
}
