/* ==========================================================================
   KAMAR MEMBER DASHBOARD DESKTOP REDESIGN v2
   Phase 2 — Shared Design System (navbar, sidebar, page header, cards,
   buttons, badges/status, empty/loading/error, reveal, inputs, footer)

   Scope: DESKTOP ONLY (min-width:981px), and ONLY on pages whose <body>
   carries the "kamar-member-desktop-v2" marker class - Dashboard Member,
   Tambah/Perpanjang Fasilitas, Fasilitas Khusus, Affiliate Program, Profil
   Akun. This guarantees zero effect on mobile/tablet (existing breakpoint
   is max-width:980px sitewide) and zero effect on Admin Dashboard pages,
   which reuse the same generic .split-shell/.split-card classes but do
   NOT get the marker class.

   IMPORTANT (2026-09-02 fix): kamar-dashboard-identity-v2.css forces the
   light "Neo Minimal Palace" theme sitewide via blanket !important rules
   on bare classes (html body, .split-card, .split-sidebar, .btn, .mini-
   label, .status-pill, .stat-card, input/select/textarea, etc) with NO
   body-class scoping. Every rule below therefore also uses !important,
   and is scoped under body.kamar-member-desktop-v2 so it always wins on
   specificity (body.class + descendant selector beats their bare class)
   while staying invisible to every other page on the site.

   Presentation-layer only. No IDs, data-attributes, JS hooks, routes, or
   Supabase/auth logic are touched by this file.
   ========================================================================== */

@media (min-width: 981px) {

  body.kamar-member-desktop-v2 {
    background:
      radial-gradient(circle at 10% -6%, rgba(184,138,61,.16), transparent 576px),
      radial-gradient(circle at 88% 10%, rgba(14,95,84,.20), transparent 512px),
      linear-gradient(180deg,#0B0F14 0%,#070A0F 55%,#0B0F14 100%) !important;
    color: #F4F6F8 !important;
  }
  body.kamar-member-desktop-v2 .page-glow{ display:none !important; }

  body.kamar-member-desktop-v2 header.kamar-global-header{
    background: rgba(11,15,20,.86) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: none !important;
    border-bottom: 1px solid rgba(244,246,248,.10) !important;
    box-shadow: none !important;
  }
  body.kamar-member-desktop-v2 .kamar-global-brand{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .kamar-global-brand span{ color:#FFFAF0 !important; font-weight:900 !important; }
  body.kamar-member-desktop-v2 .kamar-global-center a{
    color:#B8C2CE !important; text-decoration:none !important; font-weight:700 !important;
  }
  body.kamar-member-desktop-v2 .kamar-global-center a:hover{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .kamar-global-actions .kamar-global-btn{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;
    padding:9px 16px !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .kamar-global-actions .kamar-global-btn:hover{
    border-color: rgba(255,255,255,.32) !important;
  }
  body.kamar-member-desktop-v2 .kamar-global-actions .kamar-global-logout{
    background: rgba(255,96,96,.08) !important;
    color:#ffb4b4 !important;
    border:1px solid rgba(255,96,96,.22) !important;
  }

  body.kamar-member-desktop-v2 .split-sidebar{
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:28px !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar .brand-small{ color:#E6D4A9 !important; border-bottom-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .split-sidebar a{
    color:#B8C2CE !important;
    font-weight:700 !important;
    border-radius:14px !important;
    border-left-color: transparent !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar a:hover{
    background: rgba(255,255,255,.05) !important;
    color:#F4F6F8 !important;
    border-color: rgba(255,255,255,.10) !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar a.active{
    background: linear-gradient(135deg, rgba(14,95,84,.22), rgba(14,95,84,.05)) !important;
    color:#F4F6F8 !important;
    border-left:3px solid #0E5F54 !important;
    padding-left:11px !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar a.disabled{ opacity:.35 !important; }
  body.kamar-member-desktop-v2 .split-sidebar a[data-kamar-logout]{ color:#ffb4b4 !important; border-top-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .split-sidebar summary{ color:#B8C2CE !important; font-weight:800 !important; cursor:pointer; }
  body.kamar-member-desktop-v2 .split-sidebar details.sidebar-group{ border-top-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .split-sidebar details[open] summary{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .split-sidebar summary::after{ color:#8E98A8 !important; }

  body.kamar-member-desktop-v2 .split-card{
    border-radius:28px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card{
    background: linear-gradient(135deg, rgba(14,95,84,.18), rgba(11,15,20,.94)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    color:#fff !important;
    position:relative;
    overflow:hidden;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(480px circle at 85% -10%, rgba(184,138,61,.18), transparent 60%);
    pointer-events:none;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card h1{
    color:#FFFAF0 !important; font-weight:950 !important; letter-spacing:-.02em !important; position:relative;
  }
  body.kamar-member-desktop-v2 #memberStatusBox{
    border-radius:24px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
    color:#F4F6F8 !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 #memberStatusBox strong{ color:#F1D893 !important; }

  body.kamar-member-desktop-v2 .split-card:not([class*="hero"]):not(.kamar-title-card) h1,
  body.kamar-member-desktop-v2 .split-card:not([class*="hero"]):not(.kamar-title-card) h2,
  body.kamar-member-desktop-v2 .split-card:not([class*="hero"]):not(.kamar-title-card) h3,
  body.kamar-member-desktop-v2 .member-page-panel h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .split-card:not(.kamar-title-card) p,
  body.kamar-member-desktop-v2 .split-card:not(.kamar-title-card) small,
  body.kamar-member-desktop-v2 .member-page-panel p,
  body.kamar-member-desktop-v2 #memberWelcomeText,
  body.kamar-member-desktop-v2 #memberReferralLine{ color:#8E98A8 !important; }

  body.kamar-member-desktop-v2 .stat-card,
  body.kamar-member-desktop-v2 .action-card,
  body.kamar-member-desktop-v2 .member-card,
  body.kamar-member-desktop-v2 .setting-card,
  body.kamar-member-desktop-v2 .todo-item,
  body.kamar-member-desktop-v2 .member-payment-card,
  body.kamar-member-desktop-v2 .facility-content-card,
  body.kamar-member-desktop-v2 .video-card,
  body.kamar-member-desktop-v2 .online-card,
  body.kamar-member-desktop-v2 .kamar-content-grid > *{
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
    transition: transform .2s ease, border-color .2s ease;
  }
  body.kamar-member-desktop-v2 .member-card:hover,
  body.kamar-member-desktop-v2 .action-card:hover,
  body.kamar-member-desktop-v2 .todo-item:hover,
  body.kamar-member-desktop-v2 .member-payment-card:hover,
  body.kamar-member-desktop-v2 .kamar-content-grid > *:hover{
    transform: translateY(-3px);
    border-color: rgba(14,95,84,.42) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  }
  body.kamar-member-desktop-v2 .stat-card strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .stat-card span,
  body.kamar-member-desktop-v2 .member-card span,
  body.kamar-member-desktop-v2 .todo-item span{ color:#B8C2CE !important; }
  body.kamar-member-desktop-v2 .stat-card small,
  body.kamar-member-desktop-v2 .member-card small,
  body.kamar-member-desktop-v2 .todo-item small,
  body.kamar-member-desktop-v2 .study-note{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .member-payment-card h3,
  body.kamar-member-desktop-v2 .facility-content-card h3,
  body.kamar-member-desktop-v2 .action-card h3,
  body.kamar-member-desktop-v2 .member-card h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .member-payment-card p,
  body.kamar-member-desktop-v2 .facility-content-card p,
  body.kamar-member-desktop-v2 .action-card p{ color:#8E98A8 !important; }

  body.kamar-member-desktop-v2 .mini-label,
  body.kamar-member-desktop-v2 .eyebrow{
    background: rgba(215,180,109,.14) !important;
    color:#E6D4A9 !important;
    border:1px solid rgba(215,180,109,.22) !important;
    border-radius:999px !important;
    padding:4px 12px !important;
    display:inline-flex !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card .eyebrow{
    background: rgba(255,255,255,.10) !important;
    color:#F1D893 !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  body.kamar-member-desktop-v2 .btn,
  body.kamar-member-desktop-v2 .admin-button{
    background: linear-gradient(135deg,#C99D51,#F1D893) !important;
    color:#15120B !important;
    border-radius:999px !important;
    font-weight:900 !important;
    border:0 !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .btn.primary{
    background: linear-gradient(135deg,#0E5F54,#17483F 58%,#B88A3D) !important;
    color:#FFFAF0 !important;
  }
  body.kamar-member-desktop-v2 .btn.secondary,
  body.kamar-member-desktop-v2 .admin-button.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card .btn.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border-color: rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .btn.danger{
    background: rgba(255,96,96,.10) !important;
    color:#ffb4b4 !important;
    border:1px solid rgba(255,96,96,.25) !important;
  }
  body.kamar-member-desktop-v2 .btn.disabled-payment,
  body.kamar-member-desktop-v2 .btn.disabled-soft{ opacity:.5 !important; }
  body.kamar-member-desktop-v2 .btn:disabled{ opacity:.5 !important; }

  body.kamar-member-desktop-v2 .status-pill,
  body.kamar-member-desktop-v2 .status-pill-soft{
    border:1px solid rgba(255,255,255,.14) !important;
    color:#B8C2CE !important;
    background: rgba(255,255,255,.04) !important;
  }
  body.kamar-member-desktop-v2 .status-pill.on,
  body.kamar-member-desktop-v2 .status-pill.ok{
    color:#8EFFC0 !important; background: rgba(14,95,84,.16) !important; border-color: rgba(14,95,84,.40) !important;
  }
  body.kamar-member-desktop-v2 .status-pill.warn{
    color:#F1D893 !important; background: rgba(184,138,61,.12) !important; border-color: rgba(184,138,61,.32) !important;
  }
  body.kamar-member-desktop-v2 .status-pill.off{ color:#7A8494 !important; background: rgba(255,255,255,.04) !important; }
  body.kamar-member-desktop-v2 .status-pill.bad{
    color:#ffb4b4 !important; background: rgba(255,96,96,.10) !important; border-color: rgba(255,96,96,.28) !important;
  }

  body.kamar-member-desktop-v2 .page-note{
    background: rgba(14,95,84,.08) !important;
    border:1px solid rgba(14,95,84,.28) !important;
    color:#C9FFE1 !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card .page-note{ color:#D9F5E8 !important; }
  body.kamar-member-desktop-v2 .expired-note{
    background: rgba(255,96,96,.07) !important;
    border:1px solid rgba(255,96,96,.24) !important;
    color:#ffd8d8 !important;
  }
  body.kamar-member-desktop-v2 .payment-note-box,
  body.kamar-member-desktop-v2 .activation-note-box{
    border:1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.03) !important;
    color:#8E98A8 !important;
  }
  body.kamar-member-desktop-v2 .payment-note-box strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .facility-guide-box{
    border:1px solid rgba(14,95,84,.28) !important;
    background: rgba(14,95,84,.08) !important;
    color:#C9FFE1 !important;
  }
  body.kamar-member-desktop-v2 .facility-locked-box{
    border:1px solid rgba(255,96,96,.24) !important;
    background: rgba(255,96,96,.06) !important;
    color:#ffd8d8 !important;
  }
  body.kamar-member-desktop-v2 .kamar-skel,
  body.kamar-member-desktop-v2 .kamar-skel-bar,
  body.kamar-member-desktop-v2 .kamar-skel-box,
  body.kamar-member-desktop-v2 .fkx-skel{
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.05) 63%) !important;
    background-size:400% 100% !important;
  }

  body.kamar-member-desktop-v2 label.field,
  body.kamar-member-desktop-v2 .field{ color:#B8C2CE !important; }
  body.kamar-member-desktop-v2 input:not([type="checkbox"]):not([type="radio"]),
  body.kamar-member-desktop-v2 select,
  body.kamar-member-desktop-v2 textarea{
    background: rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:#F4F6F8 !important;
  }
  body.kamar-member-desktop-v2 input::placeholder,
  body.kamar-member-desktop-v2 textarea::placeholder{ color:#7A8494 !important; }
  body.kamar-member-desktop-v2 select option{ color:#111 !important; background:#fff !important; }

  body.kamar-member-desktop-v2 .site-footer{ background:transparent !important; color:#7A8494 !important; border:0 !important; }
  body.kamar-member-desktop-v2 .site-footer strong{ color:#B8C2CE !important; }

  body.kamar-member-desktop-v2 .profile-detail-row{ border-bottom-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .profile-detail-row>span{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .profile-detail-row>strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .referral-current-code{
    background: rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    color:#F4F6F8 !important;
  }
  body.kamar-member-desktop-v2 .referral-status-note{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .referral-status-note.success{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .referral-status-note.error{ color:#ffb4b4 !important; }

  body.kamar-member-desktop-v2 [data-kamar-reveal]{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition: max-height .3s ease, opacity .3s ease;
  }
  body.kamar-member-desktop-v2 [data-kamar-reveal].is-open{
    max-height:900px;
    opacity:1;
  }

  /* ==========================================================================
     GLOSS / MOTION (per brief Section 5) + Phase 3 dashboard-specific fixes
     added 2026-09-02.
     ========================================================================== */

  /* subtle glossy top highlight line on cards (not on kamar-title-card, which
     already has its own radial-glow ::before - gets the gloss via ::after instead) */
  body.kamar-member-desktop-v2 .split-card:not(.kamar-title-card),
  body.kamar-member-desktop-v2 .stat-card,
  body.kamar-member-desktop-v2 .member-card,
  body.kamar-member-desktop-v2 .action-card,
  body.kamar-member-desktop-v2 .member-payment-card,
  body.kamar-member-desktop-v2 .setting-card{
    position: relative;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  body.kamar-member-desktop-v2 .split-card:not(.kamar-title-card)::before,
  body.kamar-member-desktop-v2 .stat-card::before,
  body.kamar-member-desktop-v2 .member-card::before,
  body.kamar-member-desktop-v2 .action-card::before,
  body.kamar-member-desktop-v2 .member-payment-card::before{
    content:"";
    position:absolute; left:18px; right:18px; top:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    pointer-events:none;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card{ position:relative; }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card::after{
    content:"";
    position:absolute; left:22px; right:22px; top:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
    pointer-events:none;
  }

  /* click feedback: scale ~0.98-0.99, per brief */
  body.kamar-member-desktop-v2 .btn:active{ transform: scale(.985); }
  body.kamar-member-desktop-v2 .member-card:active,
  body.kamar-member-desktop-v2 .action-card:active,
  body.kamar-member-desktop-v2 .todo-item:active,
  body.kamar-member-desktop-v2 .member-payment-card:active{ transform: scale(.99); }

  /* normal transition 180-300ms (brief Section 5) */
  body.kamar-member-desktop-v2 .btn{
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
  }
  body.kamar-member-desktop-v2 .split-card,
  body.kamar-member-desktop-v2 .stat-card,
  body.kamar-member-desktop-v2 .member-card,
  body.kamar-member-desktop-v2 .action-card,
  body.kamar-member-desktop-v2 .todo-item,
  body.kamar-member-desktop-v2 .member-payment-card{
    transition: transform .2s ease, border-color .2s ease, background .2s ease !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar a{
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  }

  /* reveal: 250-350ms, height + opacity + translateY ~8px, no bounce/no layout jump.
     Generic hook [data-kamar-reveal] for future use, plus a direct hook on the
     daily-recap section that kamar-recap-card.js injects (.kamar-recap-daily-section)
     so the daily block starts collapsed and reveals in place without touching that
     script's own data-fetch logic. */
  body.kamar-member-desktop-v2 [data-kamar-reveal],
  body.kamar-member-desktop-v2 .kamar-recap-daily-section{
    overflow:hidden !important;
    max-height:0 !important;
    opacity:0 !important;
    transform: translateY(8px) !important;
    transition: max-height .3s cubic-bezier(.22,1,.36,1), opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1) !important;
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
  }
  body.kamar-member-desktop-v2 [data-kamar-reveal].is-open,
  body.kamar-member-desktop-v2 .kamar-recap-daily-section.is-open{
    max-height:900px !important;
    opacity:1 !important;
    transform: translateY(0) !important;
    margin-top:22px !important;
    padding-top:18px !important;
    border-top:1px dashed rgba(255,255,255,.14) !important;
  }
  body.kamar-member-desktop-v2 .kamar-recap-toggle{ margin-top:14px !important; }

  /* Phase 3: remove the giant duplicate "Detail Akun Online" block that
     kamar-data-online-25e.js appends to .split-main (id=memberOnlineDetailCard,
     class="card") - the function itself is untouched (still runs, still computes),
     this only hides the visual output. Full detail stays on Profil Akun.
     Also hide the now-redundant standalone referral line, since memberStatusBox's
     own text already includes "Kode referral: ..." - avoids showing it twice. */
  body.kamar-member-desktop-v2 #memberOnlineDetailCard{ display:none !important; }
  body.kamar-member-desktop-v2 #memberReferralLine{ display:none !important; }

  /* compact "AKUN - TERHUBUNG" replacement card (static, added in dashboard.html) */
  body.kamar-member-desktop-v2 .kamar-profile-access-card .button-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px;
  }
  body.kamar-member-desktop-v2 .kamar-profile-access-card p{ margin:8px 0 0 !important; }
}

@media (min-width:981px) and (prefers-reduced-motion: reduce){
  body.kamar-member-desktop-v2 *{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PHASE 4 — Tambah/Perpanjang Fasilitas (brief Section 17-19)
   Facility card header (name + POPULER/PREMIUM badge), status pill system,
   quick-renewal message states, source-of-activation block, 2-col grid.
   Presentation-layer only. Colors below override inline styles that
   kamar-member-renewal.js sets on statusEl/msgEl via classList (is-ok/
   is-bad) instead of hardcoded hex, and via plain CSS !important for the
   source block (always same semantic, no state to distinguish).
   ========================================================================== */

@media (min-width: 981px) {

  body.kamar-member-desktop-v2 .member-payment-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 20px !important;
  }

  body.kamar-member-desktop-v2 .facility-card-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  }
  body.kamar-member-desktop-v2 .facility-card-head h3{ margin:0 !important; }

  body.kamar-member-desktop-v2 .facility-badge-recommended{
    position:static !important; top:auto !important; right:auto !important;
    background: linear-gradient(135deg,#C99D51,#F1D893) !important;
    color:#15120B !important;
    box-shadow:none !important;
    white-space:nowrap;
  }
  body.kamar-member-desktop-v2 .facility-badge-premium{
    display:inline-flex; align-items:center; white-space:nowrap;
    border-radius:999px !important; padding:6px 14px !important;
    font-size:10.5px !important; font-weight:1000 !important;
    letter-spacing:.10em !important; text-transform:uppercase !important;
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.22) !important;
  }
  body.kamar-member-desktop-v2 .member-payment-card-highlight{
    border-color: rgba(14,95,84,.42) !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .member-payment-card-premium{
    border-color: rgba(255,255,255,.20) !important;
  }

  /* status pill: replaces JS-set inline colors (#1c6141/#963F3F) with
     classList-driven state so it can follow the dark palette */
  body.kamar-member-desktop-v2 .facility-status-line{
    display:inline-flex !important; align-items:center !important; gap:6px !important;
    padding:4px 12px !important; border-radius:999px !important;
    font-size:11px !important; font-weight:900 !important;
    letter-spacing:.05em !important; text-transform:uppercase !important;
    color:#B8C2CE !important; background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }
  body.kamar-member-desktop-v2 .facility-status-line:empty{ display:none !important; padding:0 !important; border:0 !important; }
  body.kamar-member-desktop-v2 .facility-status-line.is-ok{
    background: rgba(14,95,84,.16) !important; color:#8EFFC0 !important; border-color: rgba(14,95,84,.38) !important;
  }
  body.kamar-member-desktop-v2 .facility-status-line.is-bad{
    background: rgba(255,96,96,.10) !important; color:#ffb4b4 !important; border-color: rgba(255,96,96,.28) !important;
  }

  body.kamar-member-desktop-v2 .renewal-msg{ font-size:12px !important; color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .renewal-msg.is-ok{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .renewal-msg.is-bad{ color:#ffb4b4 !important; }

  body.kamar-member-desktop-v2 .facility-source-wrap{ margin-top:10px !important; }
  body.kamar-member-desktop-v2 .facility-source-line{
    color:#E6D4A9 !important; font-size:11px !important; font-weight:800 !important;
  }
  body.kamar-member-desktop-v2 .facility-source-detail{
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
  }
  body.kamar-member-desktop-v2 .facility-source-detail > div span:first-child{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .facility-source-detail > div span:last-child{ color:#F4F6F8 !important; }

  body.kamar-member-desktop-v2 .activate-row .perpanjangan-btn{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
}

/* ==========================================================================
   PHASE 5 — Fasilitas Khusus page (brief Section 20)
   .fkx-card was rendering solid WHITE live (bug found during audit): its
   background is `var(--km-panel, #fff)` and --km-panel is never defined
   on this page, so it silently fell back to the #fff default. Fixing by
   overriding background directly (not by defining --km-panel, since that
   custom property isn't scoped/used anywhere else - simpler and safer).
   Grid stays auto-fill (adaptive - brief: "Jika fasilitas bertambah, grid
   berkembang"), NOT forced to a fixed column count like Phase 4's fixed
   catalog of 5.
   ========================================================================== */

@media (min-width: 981px) {

  body.kamar-member-desktop-v2 .fkx-card{
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    position: relative;
  }
  body.kamar-member-desktop-v2 .fkx-card:hover{
    transform: translateY(-3px);
    border-color: rgba(14,95,84,.42) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  }
  body.kamar-member-desktop-v2 .fkx-card::before{
    content:"";
    position:absolute; left:18px; right:18px; top:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    pointer-events:none;
  }
  body.kamar-member-desktop-v2 .fkx-card h3{ color:#FFFAF0 !important; margin:0 !important; }
  body.kamar-member-desktop-v2 .fkx-card p{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .fkx-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

  body.kamar-member-desktop-v2 .fkx-badge{
    display:inline-flex; align-items:center; white-space:nowrap;
    border-radius:999px !important; padding:4px 12px !important;
    font-size:10.5px !important; font-weight:1000 !important;
    letter-spacing:.10em !important; text-transform:uppercase !important;
    background: rgba(255,255,255,.06) !important;
    color:#B8C2CE !important;
    border:1px solid rgba(255,255,255,.16) !important;
  }
  body.kamar-member-desktop-v2 .fkx-badge.none{
    background: rgba(255,255,255,.06) !important; color:#B8C2CE !important; border-color: rgba(255,255,255,.16) !important;
  }
  body.kamar-member-desktop-v2 .fkx-badge.pending{
    background: rgba(184,138,61,.14) !important; color:#F1D893 !important; border-color: rgba(184,138,61,.32) !important;
  }
  body.kamar-member-desktop-v2 .fkx-badge.confirmed{
    background: rgba(14,95,84,.16) !important; color:#8EFFC0 !important; border-color: rgba(14,95,84,.38) !important;
  }

  body.kamar-member-desktop-v2 .fkx-price{
    color:#FFFAF0 !important;
    font-weight: 950 !important;
  }
  body.kamar-member-desktop-v2 .fkx-price small{
    display:block; color:#8E98A8 !important; font-weight:700 !important; font-size:11px !important; margin-top:4px !important;
  }

  body.kamar-member-desktop-v2 .fkx-card-actions{ margin-top:auto; }
  body.kamar-member-desktop-v2 .fkx-btn.primary{
    background: linear-gradient(135deg,#C99D51,#F1D893) !important;
    color:#15120B !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .fkx-btn.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }

  body.kamar-member-desktop-v2 .fkx-pending-note{
    background: rgba(184,138,61,.08) !important;
    border:1px solid rgba(184,138,61,.28) !important;
    color:#F1D893 !important;
    border-radius:16px !important;
  }

  body.kamar-member-desktop-v2 .fkx-empty{
    color:#8E98A8 !important;
    text-align:center !important;
    padding:32px 16px !important;
  }
}

/* ==========================================================================
   PHASE 6 — Affiliate Program (brief Section 21)
   IA/logic untouched (brief: "Existing information architecture sudah baik.
   Pertahankan urutan... Redesign visual + compactness, bukan logic").
   .kamar-table/.referral-box/.kamar-modal already had their OWN dark inline
   styles (not white-bug like Phase 5's .fkx-card) since kamar-dashboard-
   identity-v2.css's blanket !important list doesn't include these classes -
   but they used the OLDER gold-heavy token set (#d8cda9/#f5f0e6/rgba(238,
   206,122,..)) instead of this redesign's palette, so retinting only for
   visual consistency across all 5 pages, not fixing a rendering bug.
   ========================================================================== */

@media (min-width: 981px) {

  body.kamar-member-desktop-v2 .kamar-table th{
    color:#8E98A8 !important;
  }
  body.kamar-member-desktop-v2 .kamar-table td{
    background: rgba(255,255,255,.05) !important;
    color:#F4F6F8 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }
  body.kamar-member-desktop-v2 .kamar-table td:first-child{ border-left:1px solid rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .kamar-table td:last-child{ border-right:1px solid rgba(255,255,255,.10) !important; }

  body.kamar-member-desktop-v2 .referral-box{
    border:1px dashed rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.03) !important;
    border-radius:18px !important;
  }
  body.kamar-member-desktop-v2 .referral-box code{
    color:#F1D893 !important;
  }
  body.kamar-member-desktop-v2 .referral-box .btn.mini.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .referral-box .btn.mini.secondary.copied,
  body.kamar-member-desktop-v2 .referral-box .btn.mini.secondary[data-copied="1"]{
    background: rgba(14,95,84,.18) !important;
    color:#8EFFC0 !important;
    border-color: rgba(14,95,84,.42) !important;
  }

  body.kamar-member-desktop-v2 .kamar-modal-backdrop{
    background: rgba(4,6,9,.72) !important;
  }
  body.kamar-member-desktop-v2 .kamar-modal{
    background: linear-gradient(135deg, rgba(20,24,30,.98), rgba(11,15,20,.98)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.5) !important;
  }
  body.kamar-member-desktop-v2 .kamar-modal h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .kamar-modal p{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .kamar-modal label.field{ color:#B8C2CE !important; }

  body.kamar-member-desktop-v2 .grid-4{
    gap: 16px !important;
  }
}

/* ==========================================================================
   PHASE 7 — Profil Akun (brief Section 22)
   Flat 11-row table -> 4 grouped 2-col cards (Identitas/Kontak/Membership/
   Trading Profile). Data/permission untouched - kamar-data-online-25e.js's
   fillMemberProfile() looks up every field by id (profileFullName, etc.),
   confirmed via source inspection, so regrouping the wrapping DOM is purely
   presentational. Existing change-request/referral/broker-capital forms
   below are untouched.
   ========================================================================== */

@media (min-width: 981px) {

  body.kamar-member-desktop-v2 .profile-group-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
  }
  body.kamar-member-desktop-v2 .profile-group-grid .profile-panel{
    margin:0 !important;
  }
}

/* ==========================================================================
   PHASE 8 — mobile safety fix (found during final QA pass)
   .facility-badge-premium is a brand-new element added in Phase 4 with NO
   pre-existing sitewide CSS (unlike .facility-badge-recommended, which
   already had its own always-on pill styling from kamar-full-online.css
   before this redesign touched it). On mobile it was rendering as bare
   unstyled text "Premium" under the Kamar Private title - not a crash or
   functional break, just visual clutter that wasn't there before. Brief
   says desktop-only scope, so the fix is to hide this NEW element below
   the existing 980px breakpoint rather than attempt any mobile styling.
   ========================================================================== */
@media (max-width: 980px){
  body.kamar-member-desktop-v2 .facility-badge-premium{ display:none; }
}


/* ==========================================================================
   FACILITY PAGES DESKTOP REDESIGN — Phase 2 Shared Design System
   Kamar Edukasi / Kamar Private / Kamar Indikator / Kamar Robot /
   member-activate.html. Presentation-layer only — no IDs, data-attributes,
   JS hooks, routes, or Supabase/auth logic touched. Reuses the same
   body.kamar-member-desktop-v2 marker + min-width:981px scoping from the
   Member Dashboard redesign, so this is invisible on mobile/tablet and on
   every page that doesn't carry the marker class (incl. Kamar Signal).
   ========================================================================== */

@media (min-width: 981px) {

  /* Compact facility page header (~120-160px) — additive class applied to
     the existing .split-card.kamar-title-card wrapper on the 4 facility
     pages only. Markup itself (h1 text) is untouched. */
  body.kamar-member-desktop-v2 .kamar-facility-header{
    padding: 26px 30px !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:16px !important; flex-wrap:wrap !important;
  }
  body.kamar-member-desktop-v2 .kamar-facility-header h1{
    font-size: 26px !important;
    margin:0 !important;
  }
  body.kamar-member-desktop-v2 .kamar-facility-header .kamar-facility-eyebrow{
    display:block !important; margin-bottom:6px !important;
  }
  body.kamar-member-desktop-v2 .kamar-facility-header .kamar-facility-sub{
    color:#C9C0AE !important; font-size:13px !important; font-weight:600 !important; margin-top:6px !important;
  }
  /* subtle gold micro-accent for Kamar Private (premium differentiation) */
  body.kamar-member-desktop-v2 .kamar-facility-header.is-premium{ position:relative !important; }
  body.kamar-member-desktop-v2 .kamar-facility-header.is-premium::after{
    content:"";
    position:absolute; left:22px; right:22px; top:0; height:2px;
    background: linear-gradient(90deg, transparent, rgba(244,223,144,.55), transparent);
    pointer-events:none;
  }

  /* Guide / installation accordion (.kamar-guide-box family) — retint from
     the old always-light teal look (#0e5f54 on near-white bg, authored
     before this dark redesign existed) to the shared dark palette.
     Structure and the global kamar-guide-accordion-toggle script are
     untouched — CSS only. */
  body.kamar-member-desktop-v2 .kamar-guide-box{
    background: rgba(14,95,84,.10) !important;
    border: 1px solid rgba(14,95,84,.30) !important;
    border-radius: 20px !important;
  }
  body.kamar-member-desktop-v2 .kamar-guide-head{
    border-bottom-color: rgba(14,95,84,.22) !important;
  }
  body.kamar-member-desktop-v2 .kamar-guide-title{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-sub{ color:#8EFFC0 !important; opacity:.72 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step{ border-bottom-color: rgba(14,95,84,.18) !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-head{ color:#C9FFE1 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-num{
    background: rgba(14,95,84,.24) !important; color:#8EFFC0 !important;
  }
  body.kamar-member-desktop-v2 .kamar-guide-step-title{ color:#C9FFE1 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-arrow{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-body p{ color:#9FB5AE !important; }

  /* Tool/download + license detail grids used inside the request/download/
     history cards on Indikator & Robot (.admin-detail-panel, .admin-empty-
     state) — new classes not covered by the earlier Dashboard-phase CSS
     since they only appear on the facility pages. */
  body.kamar-member-desktop-v2 .admin-detail-panel{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
  body.kamar-member-desktop-v2 .admin-detail-panel .setting-card span{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .admin-detail-panel .setting-card strong{ color:#F4F6F8 !important; font-weight:800 !important; }
  body.kamar-member-desktop-v2 .admin-empty-state{
    color:#8E98A8 !important;
    text-align:center !important;
    padding:28px 16px !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px dashed rgba(255,255,255,.14) !important;
    border-radius: 18px !important;
  }

  /* Loading placeholder shown before fillFacilityContent()/license scripts
     replace #memberContentList */
  body.kamar-member-desktop-v2 .kamar-empty{
    color:#8E98A8 !important;
    text-align:center !important;
    padding:40px 16px !important;
  }

  /* Grouped request-license form (01/02/03 sections) */
  body.kamar-member-desktop-v2 .kamar-form-group{ margin-top:18px !important; }
  body.kamar-member-desktop-v2 .kamar-form-group:first-of-type{ margin-top:6px !important; }
  body.kamar-member-desktop-v2 .kamar-form-group-title{
    display:flex !important; align-items:center !important; gap:10px !important;
    color:#E6D4A9 !important; font-weight:1000 !important; font-size:11.5px !important;
    text-transform:uppercase !important; letter-spacing:.12em !important;
    margin-bottom:12px !important;
  }
  body.kamar-member-desktop-v2 .kamar-form-group-title .kamar-form-group-num{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:20px !important; height:20px !important; border-radius:50% !important;
    background: rgba(215,180,109,.16) !important; color:#E6D4A9 !important;
    font-size:10.5px !important; font-weight:1000 !important;
  }

  /* license/history token row spacing */
  body.kamar-member-desktop-v2 .setting-card .btn.mini.secondary{ margin-left:6px !important; }
}


/* ==========================================================================
   KOREKSI 2026-09-09: mobile/tablet/PWA dark theme extension (max-width:980px)
   Mirror dari semua blok desktop (min-width:981px) di atas, khusus rule
   warna/background/teks (bukan grid-template-columns/layout desktop-only),
   supaya dashboard.html, member-renewal.html, member-fasilitas-khusus.html,
   affiliate-dashboard.html, member-profile.html, member-materials.html,
   member-private.html, member-indicator.html, member-robot.html,
   member-activate.html tetap dark di HP/tablet/PWA. kamar-mobile-shell.css
   (sitewide, max-width:1024px) sudah menangani sidebar/drawer/bottom-nav
   background, jadi tidak diulang di sini.
   ========================================================================== */
@media (max-width: 980px) {

  body.kamar-member-desktop-v2 {
    background:
      radial-gradient(circle at 10% -6%, rgba(184,138,61,.16), transparent 576px),
      radial-gradient(circle at 88% 10%, rgba(14,95,84,.20), transparent 512px),
      linear-gradient(180deg,#0B0F14 0%,#070A0F 55%,#0B0F14 100%) !important;
    color: #F4F6F8 !important;
  }
  body.kamar-member-desktop-v2 .page-glow{ display:none !important; }

  body.kamar-member-desktop-v2 header.kamar-global-header{
    background: rgba(11,15,20,.92) !important;
    border: none !important;
    border-bottom: 1px solid rgba(244,246,248,.10) !important;
    box-shadow: none !important;
  }
  body.kamar-member-desktop-v2 .kamar-global-brand{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .kamar-global-brand span{ color:#FFFAF0 !important; font-weight:900 !important; }
  body.kamar-member-desktop-v2 .kamar-global-center a{ color:#B8C2CE !important; }
  body.kamar-member-desktop-v2 .kamar-global-actions .kamar-global-btn{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .kamar-global-actions .kamar-global-logout{
    background: rgba(255,96,96,.08) !important;
    color:#ffb4b4 !important;
    border:1px solid rgba(255,96,96,.22) !important;
  }

  body.kamar-member-desktop-v2 .split-sidebar{
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar .brand-small{ color:#E6D4A9 !important; border-bottom-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .split-sidebar a{ color:#B8C2CE !important; border-left-color: transparent !important; }
  body.kamar-member-desktop-v2 .split-sidebar a.active{
    background: linear-gradient(135deg, rgba(14,95,84,.22), rgba(14,95,84,.05)) !important;
    color:#F4F6F8 !important;
    border-left:3px solid #0E5F54 !important;
  }
  body.kamar-member-desktop-v2 .split-sidebar a.disabled{ opacity:.35 !important; }
  body.kamar-member-desktop-v2 .split-sidebar a[data-kamar-logout]{ color:#ffb4b4 !important; border-top-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .split-sidebar summary{ color:#B8C2CE !important; }
  body.kamar-member-desktop-v2 .split-sidebar details.sidebar-group{ border-top-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .split-sidebar details[open] summary{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .split-sidebar summary::after{ color:#8E98A8 !important; }

  body.kamar-member-desktop-v2 .split-card{
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card{
    background: linear-gradient(135deg, rgba(14,95,84,.18), rgba(11,15,20,.94)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    color:#fff !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card h1{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 #memberStatusBox{
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
    color:#F4F6F8 !important;
    border:1px solid rgba(255,255,255,.10) !important;
  }
  body.kamar-member-desktop-v2 #memberStatusBox strong{ color:#F1D893 !important; }

  body.kamar-member-desktop-v2 .split-card:not([class*="hero"]):not(.kamar-title-card) h1,
  body.kamar-member-desktop-v2 .split-card:not([class*="hero"]):not(.kamar-title-card) h2,
  body.kamar-member-desktop-v2 .split-card:not([class*="hero"]):not(.kamar-title-card) h3,
  body.kamar-member-desktop-v2 .member-page-panel h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .split-card:not(.kamar-title-card) p,
  body.kamar-member-desktop-v2 .split-card:not(.kamar-title-card) small,
  body.kamar-member-desktop-v2 .member-page-panel p,
  body.kamar-member-desktop-v2 #memberWelcomeText,
  body.kamar-member-desktop-v2 #memberReferralLine{ color:#8E98A8 !important; }

  body.kamar-member-desktop-v2 .stat-card,
  body.kamar-member-desktop-v2 .action-card,
  body.kamar-member-desktop-v2 .member-card,
  body.kamar-member-desktop-v2 .setting-card,
  body.kamar-member-desktop-v2 .todo-item,
  body.kamar-member-desktop-v2 .member-payment-card,
  body.kamar-member-desktop-v2 .facility-content-card,
  body.kamar-member-desktop-v2 .video-card,
  body.kamar-member-desktop-v2 .online-card,
  body.kamar-member-desktop-v2 .kamar-content-grid > *{
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .stat-card strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .stat-card span,
  body.kamar-member-desktop-v2 .member-card span,
  body.kamar-member-desktop-v2 .todo-item span{ color:#B8C2CE !important; }
  body.kamar-member-desktop-v2 .stat-card small,
  body.kamar-member-desktop-v2 .member-card small,
  body.kamar-member-desktop-v2 .todo-item small,
  body.kamar-member-desktop-v2 .study-note{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .member-payment-card h3,
  body.kamar-member-desktop-v2 .facility-content-card h3,
  body.kamar-member-desktop-v2 .action-card h3,
  body.kamar-member-desktop-v2 .member-card h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .member-payment-card p,
  body.kamar-member-desktop-v2 .facility-content-card p,
  body.kamar-member-desktop-v2 .action-card p{ color:#8E98A8 !important; }

  body.kamar-member-desktop-v2 .mini-label,
  body.kamar-member-desktop-v2 .eyebrow{
    background: rgba(215,180,109,.14) !important;
    color:#E6D4A9 !important;
    border:1px solid rgba(215,180,109,.22) !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card .eyebrow{
    background: rgba(255,255,255,.10) !important;
    color:#F1D893 !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  body.kamar-member-desktop-v2 .btn,
  body.kamar-member-desktop-v2 .admin-button{
    background: linear-gradient(135deg,#C99D51,#F1D893) !important;
    color:#15120B !important;
    border:0 !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .btn.primary{
    background: linear-gradient(135deg,#0E5F54,#17483F 58%,#B88A3D) !important;
    color:#FFFAF0 !important;
  }
  body.kamar-member-desktop-v2 .btn.secondary,
  body.kamar-member-desktop-v2 .admin-button.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card .btn.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border-color: rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .btn.danger{
    background: rgba(255,96,96,.10) !important;
    color:#ffb4b4 !important;
    border:1px solid rgba(255,96,96,.25) !important;
  }
  body.kamar-member-desktop-v2 .btn.disabled-payment,
  body.kamar-member-desktop-v2 .btn.disabled-soft,
  body.kamar-member-desktop-v2 .btn:disabled{ opacity:.5 !important; }

  body.kamar-member-desktop-v2 .status-pill,
  body.kamar-member-desktop-v2 .status-pill-soft{
    border:1px solid rgba(255,255,255,.14) !important;
    color:#B8C2CE !important;
    background: rgba(255,255,255,.04) !important;
  }
  body.kamar-member-desktop-v2 .status-pill.on,
  body.kamar-member-desktop-v2 .status-pill.ok{
    color:#8EFFC0 !important; background: rgba(14,95,84,.16) !important; border-color: rgba(14,95,84,.40) !important;
  }
  body.kamar-member-desktop-v2 .status-pill.warn{
    color:#F1D893 !important; background: rgba(184,138,61,.12) !important; border-color: rgba(184,138,61,.32) !important;
  }
  body.kamar-member-desktop-v2 .status-pill.off{ color:#7A8494 !important; background: rgba(255,255,255,.04) !important; }
  body.kamar-member-desktop-v2 .status-pill.bad{
    color:#ffb4b4 !important; background: rgba(255,96,96,.10) !important; border-color: rgba(255,96,96,.28) !important;
  }

  body.kamar-member-desktop-v2 .page-note{
    background: rgba(14,95,84,.08) !important;
    border:1px solid rgba(14,95,84,.28) !important;
    color:#C9FFE1 !important;
  }
  body.kamar-member-desktop-v2 .split-card.kamar-title-card .page-note{ color:#D9F5E8 !important; }
  body.kamar-member-desktop-v2 .expired-note{
    background: rgba(255,96,96,.07) !important;
    border:1px solid rgba(255,96,96,.24) !important;
    color:#ffd8d8 !important;
  }
  body.kamar-member-desktop-v2 .payment-note-box,
  body.kamar-member-desktop-v2 .activation-note-box{
    border:1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.03) !important;
    color:#8E98A8 !important;
  }
  body.kamar-member-desktop-v2 .payment-note-box strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .facility-guide-box{
    border:1px solid rgba(14,95,84,.28) !important;
    background: rgba(14,95,84,.08) !important;
    color:#C9FFE1 !important;
  }
  body.kamar-member-desktop-v2 .facility-locked-box{
    border:1px solid rgba(255,96,96,.24) !important;
    background: rgba(255,96,96,.06) !important;
    color:#ffd8d8 !important;
  }
  body.kamar-member-desktop-v2 .kamar-skel,
  body.kamar-member-desktop-v2 .kamar-skel-bar,
  body.kamar-member-desktop-v2 .kamar-skel-box,
  body.kamar-member-desktop-v2 .fkx-skel{
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.05) 63%) !important;
    background-size:400% 100% !important;
  }

  body.kamar-member-desktop-v2 label.field,
  body.kamar-member-desktop-v2 .field{ color:#B8C2CE !important; }
  body.kamar-member-desktop-v2 input:not([type="checkbox"]):not([type="radio"]),
  body.kamar-member-desktop-v2 select,
  body.kamar-member-desktop-v2 textarea{
    background: rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:#F4F6F8 !important;
  }
  body.kamar-member-desktop-v2 input::placeholder,
  body.kamar-member-desktop-v2 textarea::placeholder{ color:#7A8494 !important; }
  body.kamar-member-desktop-v2 select option{ color:#111 !important; background:#fff !important; }

  body.kamar-member-desktop-v2 .site-footer{ background:transparent !important; color:#7A8494 !important; border:0 !important; }
  body.kamar-member-desktop-v2 .site-footer strong{ color:#B8C2CE !important; }

  body.kamar-member-desktop-v2 .profile-detail-row{ border-bottom-color: rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .profile-detail-row>span{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .profile-detail-row>strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .referral-current-code{
    background: rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    color:#F4F6F8 !important;
  }
  body.kamar-member-desktop-v2 .referral-status-note{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .referral-status-note.success{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .referral-status-note.error{ color:#ffb4b4 !important; }

  /* Phase 4: Tambah/Perpanjang Fasilitas */
  body.kamar-member-desktop-v2 .facility-badge-recommended{
    background: linear-gradient(135deg,#C99D51,#F1D893) !important;
    color:#15120B !important;
    box-shadow:none !important;
  }
  body.kamar-member-desktop-v2 .member-payment-card-highlight{ border-color: rgba(14,95,84,.42) !important; box-shadow:none !important; }
  body.kamar-member-desktop-v2 .member-payment-card-premium{ border-color: rgba(255,255,255,.20) !important; }
  body.kamar-member-desktop-v2 .facility-status-line{
    color:#B8C2CE !important; background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }
  body.kamar-member-desktop-v2 .facility-status-line.is-ok{
    background: rgba(14,95,84,.16) !important; color:#8EFFC0 !important; border-color: rgba(14,95,84,.38) !important;
  }
  body.kamar-member-desktop-v2 .facility-status-line.is-bad{
    background: rgba(255,96,96,.10) !important; color:#ffb4b4 !important; border-color: rgba(255,96,96,.28) !important;
  }
  body.kamar-member-desktop-v2 .renewal-msg{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .renewal-msg.is-ok{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .renewal-msg.is-bad{ color:#ffb4b4 !important; }
  body.kamar-member-desktop-v2 .facility-source-line{ color:#E6D4A9 !important; }
  body.kamar-member-desktop-v2 .facility-source-detail{
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }
  body.kamar-member-desktop-v2 .facility-source-detail > div span:first-child{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .facility-source-detail > div span:last-child{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .activate-row .perpanjangan-btn{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }

  /* Phase 5: Fasilitas Khusus */
  body.kamar-member-desktop-v2 .fkx-card{
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.024)) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
  }
  body.kamar-member-desktop-v2 .fkx-card h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .fkx-card p{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .fkx-badge{
    background: rgba(255,255,255,.06) !important;
    color:#B8C2CE !important;
    border:1px solid rgba(255,255,255,.16) !important;
  }
  body.kamar-member-desktop-v2 .fkx-badge.none{ background: rgba(255,255,255,.06) !important; color:#B8C2CE !important; border-color: rgba(255,255,255,.16) !important; }
  body.kamar-member-desktop-v2 .fkx-badge.pending{ background: rgba(184,138,61,.14) !important; color:#F1D893 !important; border-color: rgba(184,138,61,.32) !important; }
  body.kamar-member-desktop-v2 .fkx-badge.confirmed{ background: rgba(14,95,84,.16) !important; color:#8EFFC0 !important; border-color: rgba(14,95,84,.38) !important; }
  body.kamar-member-desktop-v2 .fkx-price{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .fkx-price small{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .fkx-btn.primary{ background: linear-gradient(135deg,#C99D51,#F1D893) !important; color:#15120B !important; box-shadow:none !important; }
  body.kamar-member-desktop-v2 .fkx-btn.secondary{ background: rgba(255,255,255,.08) !important; color:#FFF6E8 !important; border:1px solid rgba(255,255,255,.18) !important; }
  body.kamar-member-desktop-v2 .fkx-pending-note{ background: rgba(184,138,61,.08) !important; border:1px solid rgba(184,138,61,.28) !important; color:#F1D893 !important; }
  body.kamar-member-desktop-v2 .fkx-empty{ color:#8E98A8 !important; }

  /* Phase 6: Affiliate Program */
  body.kamar-member-desktop-v2 .kamar-table th{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .kamar-table td{
    background: rgba(255,255,255,.05) !important;
    color:#F4F6F8 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
  }
  body.kamar-member-desktop-v2 .kamar-table td:first-child{ border-left:1px solid rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .kamar-table td:last-child{ border-right:1px solid rgba(255,255,255,.10) !important; }
  body.kamar-member-desktop-v2 .referral-box{
    border:1px dashed rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.03) !important;
  }
  body.kamar-member-desktop-v2 .referral-box code{ color:#F1D893 !important; }
  body.kamar-member-desktop-v2 .referral-box .btn.mini.secondary{
    background: rgba(255,255,255,.08) !important;
    color:#FFF6E8 !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  body.kamar-member-desktop-v2 .referral-box .btn.mini.secondary.copied,
  body.kamar-member-desktop-v2 .referral-box .btn.mini.secondary[data-copied="1"]{
    background: rgba(14,95,84,.18) !important;
    color:#8EFFC0 !important;
    border-color: rgba(14,95,84,.42) !important;
  }
  body.kamar-member-desktop-v2 .kamar-modal-backdrop{ background: rgba(4,6,9,.72) !important; }
  body.kamar-member-desktop-v2 .kamar-modal{
    background: linear-gradient(135deg, rgba(20,24,30,.98), rgba(11,15,20,.98)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.5) !important;
  }
  body.kamar-member-desktop-v2 .kamar-modal h3{ color:#FFFAF0 !important; }
  body.kamar-member-desktop-v2 .kamar-modal p{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .kamar-modal label.field{ color:#B8C2CE !important; }

  /* Facility pages (Edukasi/Private/Indikator/Robot/Activate) */
  body.kamar-member-desktop-v2 .kamar-facility-header .kamar-facility-sub{ color:#C9C0AE !important; }
  body.kamar-member-desktop-v2 .kamar-facility-header.is-premium{ position:relative !important; }
  body.kamar-member-desktop-v2 .kamar-facility-header.is-premium::after{
    content:"";
    position:absolute; left:22px; right:22px; top:0; height:2px;
    background: linear-gradient(90deg, transparent, rgba(244,223,144,.55), transparent);
    pointer-events:none;
  }
  body.kamar-member-desktop-v2 .kamar-guide-box{
    background: rgba(14,95,84,.10) !important;
    border: 1px solid rgba(14,95,84,.30) !important;
  }
  body.kamar-member-desktop-v2 .kamar-guide-head{ border-bottom-color: rgba(14,95,84,.22) !important; }
  body.kamar-member-desktop-v2 .kamar-guide-title{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-sub{ color:#8EFFC0 !important; opacity:.72 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step{ border-bottom-color: rgba(14,95,84,.18) !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-head{ color:#C9FFE1 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-num{ background: rgba(14,95,84,.24) !important; color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-title{ color:#C9FFE1 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-arrow{ color:#8EFFC0 !important; }
  body.kamar-member-desktop-v2 .kamar-guide-step-body p{ color:#9FB5AE !important; }
  body.kamar-member-desktop-v2 .admin-detail-panel .setting-card span{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .admin-detail-panel .setting-card strong{ color:#F4F6F8 !important; }
  body.kamar-member-desktop-v2 .admin-empty-state{
    color:#8E98A8 !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px dashed rgba(255,255,255,.14) !important;
  }
  body.kamar-member-desktop-v2 .kamar-empty{ color:#8E98A8 !important; }
  body.kamar-member-desktop-v2 .kamar-form-group-title{ color:#E6D4A9 !important; }
  body.kamar-member-desktop-v2 .kamar-form-group-title .kamar-form-group-num{
    background: rgba(215,180,109,.16) !important; color:#E6D4A9 !important;
  }
}


/* ===== (statis) ===== */
/* KAMAR MEMBER THEME v3 - tema seragam untuk semua halaman member (hitam-emas) */
body.kamar-member-desktop-v2 .split-main{gap:18px}
body.kamar-member-desktop-v2 .split-main h1,
body.kamar-member-desktop-v2 .split-main h2,
body.kamar-member-desktop-v2 .split-main h3{color:#fff3d8;-webkit-text-fill-color:#fff3d8}
body.kamar-member-desktop-v2 .split-main p{color:#b9ad92}
body.kamar-member-desktop-v2 .split-card,
body.kamar-member-desktop-v2 .member-page-panel{border:1px solid rgba(238,206,122,.18)!important;border-radius:24px!important;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015))!important;padding:22px 24px!important}
body.kamar-member-desktop-v2 .split-card.kd-pagehero{position:relative;overflow:hidden;border:1px solid rgba(244,223,144,.3)!important;border-radius:30px!important;padding:28px 32px!important;background:radial-gradient(900px 300px at 100% 0%,rgba(212,166,63,.20),transparent 60%),linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important}
body.kamar-member-desktop-v2 .kd-pagehero h1{font-size:clamp(26px,3.4vw,40px)!important;line-height:1.1!important;margin:0 0 8px!important;letter-spacing:.01em;font-weight:1000}
body.kamar-member-desktop-v2 .kd-pagehero p{margin:0;max-width:680px;line-height:1.55}
body.kamar-member-desktop-v2 .split-sidebar{border-radius:26px!important;padding:16px!important}
body.kamar-member-desktop-v2 .split-sidebar>a,
body.kamar-member-desktop-v2 .split-sidebar summary{border-radius:14px!important;font-weight:800}
body.kamar-member-desktop-v2 .split-sidebar a.active{background:rgba(212,166,63,.14);color:#f4df90;box-shadow:inset 0 0 0 1px rgba(244,223,144,.35)}
body.kamar-member-desktop-v2 .btn:not(.secondary):not(.danger):not(.mini),
body.kamar-member-desktop-v2 .admin-button:not(.secondary){background:linear-gradient(135deg,#f4df90,#c69a39)!important;color:#171108!important;border:0!important}
body.kamar-member-desktop-v2 .btn.secondary,
body.kamar-member-desktop-v2 .admin-button.secondary{background:rgba(255,255,255,.05)!important;color:#f4df90!important;border:1px solid rgba(238,206,122,.3)!important}
body.kamar-member-desktop-v2 .site-footer{color:#a99d82}
@media(max-width:900px){body.kamar-member-desktop-v2 .split-card.kd-pagehero{padding:20px 18px!important;border-radius:24px!important}body.kamar-member-desktop-v2 .split-card,body.kamar-member-desktop-v2 .member-page-panel{padding:16px!important;border-radius:20px!important}}

body.kamar-member-desktop-v2 .kd-pagehero .kamar-rc{border:0!important;background:none!important;padding:0!important;box-shadow:none!important}
body.kamar-member-desktop-v2 .kd-pagehero .kamar-rc-head{display:none!important}
body.kamar-member-desktop-v2 .kd-pagehero .kamar-rc-body{display:block!important;max-height:none!important;height:auto!important;opacity:1!important;visibility:visible!important;padding:0!important}

/* ===== KATALOG + FASILITAS KHUSUS v4: futuristik, reveal ===== */
@property --kv4a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes kv4spin{to{--kv4a:360deg}}
@keyframes kv4in{from{opacity:0;transform:translateY(34px) scale(.965);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes kv4sheen{0%{transform:translateX(-130%) skewX(-20deg)}55%,100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes kv4pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
body.kamar-member-desktop-v2 .kc-grp{position:relative;overflow:hidden;border-radius:26px!important;background:radial-gradient(90% 60% at 0% 0%,rgba(232,199,119,.1),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))!important;border:1px solid rgba(232,199,119,.2)!important;box-shadow:0 22px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
body.kamar-member-desktop-v2 .kc-head h3{font-size:clamp(22px,2.4vw,30px)!important;font-weight:900;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,#f0d98f 70%,#d4aa4e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.kamar-member-desktop-v2 .kc-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:16px!important}
body.kamar-member-desktop-v2 .kc-card{position:relative;overflow:hidden;border-radius:20px!important;padding:20px!important;background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015))!important;border:1px solid rgba(255,255,255,.1)!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
body.kamar-member-desktop-v2 .kc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#e8c777,transparent 80%);opacity:.8}
body.kamar-member-desktop-v2 .kc-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 100% 0%,rgba(232,199,119,.1),transparent 55%);opacity:.7;transition:opacity .3s ease}
@media(hover:hover){body.kamar-member-desktop-v2 .kc-card:hover{transform:translateY(-6px);border-color:rgba(232,199,119,.55)!important;box-shadow:0 24px 50px rgba(0,0,0,.5),0 0 34px rgba(232,199,119,.16)}body.kamar-member-desktop-v2 .kc-card:hover::after{opacity:1}}
body.kamar-member-desktop-v2 .kc-name{font-size:12px!important;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,199,119,.85)!important}
body.kamar-member-desktop-v2 .kc-price{font-size:clamp(24px,2.2vw,30px)!important;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff7df,#e8c777);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.kamar-member-desktop-v2 .kc-note{display:inline-block;margin-top:2px;padding:3px 10px;border-radius:999px;font-size:11px!important;font-weight:800;color:#5df0bb!important;background:rgba(47,230,164,.1);border:1px solid rgba(47,230,164,.28)}
body.kamar-member-desktop-v2 .kc-cta{font-weight:800;color:#f3d98d!important;transition:letter-spacing .25s ease}
body.kamar-member-desktop-v2 .kc-card:hover .kc-cta{letter-spacing:.06em}
body.kamar-member-desktop-v2 .kc-card.hot{border:1px solid transparent!important;background:linear-gradient(#0d1217,#0d1217) padding-box,conic-gradient(from var(--kv4a),#e8c777,#a78bfa,#2fe6a4,#e8c777) border-box!important;animation:kv4spin 7s linear infinite;box-shadow:0 0 40px rgba(167,139,250,.18)}
body.kamar-member-desktop-v2 .kc-badge{background:linear-gradient(135deg,#8b5cf6,#c084fc)!important;box-shadow:0 6px 18px rgba(139,92,246,.45);letter-spacing:.14em}
body.kamar-member-desktop-v2 .kc-go{position:relative;overflow:hidden;border-radius:14px!important;background:linear-gradient(135deg,#f6e3a8,#d6ac4c)!important;color:#1b1406!important;font-weight:900;box-shadow:0 10px 26px rgba(232,199,119,.28)}
body.kamar-member-desktop-v2 .kc-go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:kv4sheen 4.2s ease-in-out infinite}
body.kamar-member-desktop-v2 .kc-warn{border-radius:16px!important;background:linear-gradient(90deg,rgba(232,199,119,.12),rgba(255,93,108,.08))!important;border:1px solid rgba(232,199,119,.35)!important}
body.kamar-member-desktop-v2 .fkx-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))!important;gap:18px!important}
body.kamar-member-desktop-v2 .fkx-card{position:relative;overflow:hidden;border-radius:24px!important;padding:24px!important;border:1px solid transparent!important;background:linear-gradient(165deg,#10161c,#0a0e13) padding-box,conic-gradient(from var(--kv4a),#e8c777,#2fe6a4,#e8c777 45%,#6b531c,#e8c777) border-box!important;animation:kv4spin 10s linear infinite;box-shadow:0 22px 56px rgba(0,0,0,.5),0 0 40px rgba(232,199,119,.08);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.kamar-member-desktop-v2 .fkx-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(100% 70% at 0% 0%,rgba(232,199,119,.13),transparent 60%)}
@media(hover:hover){body.kamar-member-desktop-v2 .fkx-card:hover{transform:translateY(-7px)}}
body.kamar-member-desktop-v2 .fkx-card h3{font-size:clamp(22px,2vw,27px)!important;font-weight:900;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,#f0d98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.kamar-member-desktop-v2 .fkx-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;font-weight:800;letter-spacing:.14em}
body.kamar-member-desktop-v2 .fkx-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fe6a4;box-shadow:0 0 10px #2fe6a4;animation:kv4pulse 1.8s ease-in-out infinite}
body.kamar-member-desktop-v2 .fkx-price{font-size:clamp(26px,2.4vw,32px);font-weight:900;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff7df,#e8c777);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.kamar-member-desktop-v2 .fkx-price small{-webkit-text-fill-color:rgba(255,255,255,.55);font-weight:600}
body.kamar-member-desktop-v2 .fkx-btn.primary{position:relative;overflow:hidden;border-radius:14px!important;background:linear-gradient(135deg,#f6e3a8,#d6ac4c)!important;color:#1b1406!important;font-weight:900;box-shadow:0 12px 30px rgba(232,199,119,.3)}
body.kamar-member-desktop-v2 .fkx-btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:kv4sheen 4.2s ease-in-out infinite}
@supports (not (display:block)){
body.kamar-member-desktop-v2 .kc-grp,body.kamar-member-desktop-v2 .kc-card:not(.hot),body.kamar-member-desktop-v2 .kc-warn{animation:kv4in linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
body.kamar-member-desktop-v2 .kc-card.hot{animation:kv4spin 7s linear infinite,kv4in linear both;animation-timeline:auto,view();animation-range:normal,entry 0% cover 26%}
body.kamar-member-desktop-v2 .fkx-card{animation:kv4spin 10s linear infinite,kv4in linear both;animation-timeline:auto,view();animation-range:normal,entry 0% cover 26%}
}
@supports not (animation-timeline:view()){
body.kamar-member-desktop-v2 .kc-grp,body.kamar-member-desktop-v2 .kc-warn{animation:kv4in .7s cubic-bezier(.2,.8,.2,1) both}
body.kamar-member-desktop-v2 .kc-card:not(.hot){animation:kv4in .7s cubic-bezier(.2,.8,.2,1) both}
body.kamar-member-desktop-v2 .kc-card:nth-child(2){animation-delay:.07s}body.kamar-member-desktop-v2 .kc-card:nth-child(3){animation-delay:.14s}body.kamar-member-desktop-v2 .kc-card:nth-child(4){animation-delay:.21s}body.kamar-member-desktop-v2 .kc-card:nth-child(5){animation-delay:.28s}
}
@media(prefers-reduced-motion:reduce){body.kamar-member-desktop-v2 .kc-grp,body.kamar-member-desktop-v2 .kc-card,body.kamar-member-desktop-v2 .fkx-card,body.kamar-member-desktop-v2 .kc-go::after,body.kamar-member-desktop-v2 .fkx-btn.primary::after,body.kamar-member-desktop-v2 .fkx-badge::before{animation:none!important}}

/* ===== FASILITAS MEMBER v5: hero, stat, accordion futuristik ===== */
body.kamar-member-desktop-v2 .kd-pagehero{position:relative;overflow:hidden;border-radius:28px!important;border:1px solid rgba(232,199,119,.28)!important;background:radial-gradient(80% 120% at 0% 0%,rgba(232,199,119,.16),transparent 60%),radial-gradient(60% 100% at 100% 100%,rgba(47,230,164,.09),transparent 65%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012))!important;box-shadow:0 26px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
body.kamar-member-desktop-v2 .kd-pagehero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 64px);-webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}
body.kamar-member-desktop-v2 .kd-pagehero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#e8c777,#2fe6a4,#e8c777,transparent);background-size:200% 100%;animation:kv5line 6s linear infinite}
@keyframes kv5line{to{background-position:-200% 0}}
body.kamar-member-desktop-v2 .kd-pagehero>*{position:relative;z-index:1}
body.kamar-member-desktop-v2 .kd-pagehero h1{font-size:clamp(30px,3.6vw,46px)!important;font-weight:900;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#f4dd97 65%,#d3a948);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.kamar-member-desktop-v2 .kamar-facility-eyebrow,body.kamar-member-desktop-v2 .kd-eyebrow{display:inline-flex!important;align-items:center;gap:8px;border-radius:999px!important;background:rgba(232,199,119,.09)!important;border:1px solid rgba(232,199,119,.32)!important;color:#f3d98d!important;letter-spacing:.16em}
body.kamar-member-desktop-v2 .kamar-facility-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fe6a4;box-shadow:0 0 10px #2fe6a4;animation:kv4pulse 1.8s ease-in-out infinite}
body.kamar-member-desktop-v2 .stat-card{position:relative;overflow:hidden;border-radius:22px!important;padding:20px 22px!important;background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.015))!important;border:1px solid rgba(255,255,255,.1)!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
body.kamar-member-desktop-v2 .stat-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#e8c777,#2fe6a4 60%,transparent)}
body.kamar-member-desktop-v2 .stat-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(232,199,119,.2),transparent 70%);pointer-events:none}
body.kamar-member-desktop-v2 .stat-card span{font-size:11px!important;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,199,119,.85)!important}
body.kamar-member-desktop-v2 .stat-card strong{font-size:clamp(28px,2.8vw,38px)!important;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff7df,#e8c777);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(hover:hover){body.kamar-member-desktop-v2 .stat-card:hover{transform:translateY(-5px);border-color:rgba(232,199,119,.5)!important;box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 30px rgba(232,199,119,.14)}}
body.kamar-member-desktop-v2 .kamar-sec-title{display:flex;align-items:center;gap:14px;font-weight:900;letter-spacing:.06em;background:linear-gradient(180deg,#fff,#f0d98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.kamar-member-desktop-v2 .kamar-rc{position:relative;overflow:hidden;border-radius:22px!important;border:1px solid rgba(255,255,255,.1)!important;background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.012))!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
body.kamar-member-desktop-v2 .kamar-rc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#e8c777,#2fe6a4)}
@media(hover:hover){body.kamar-member-desktop-v2 .kamar-rc:hover{transform:translateX(5px);border-color:rgba(232,199,119,.45)!important;box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 26px rgba(232,199,119,.1)}}
body.kamar-member-desktop-v2 .kamar-rc-title{font-size:clamp(20px,2vw,26px)!important;font-weight:900;letter-spacing:-.02em}
body.kamar-member-desktop-v2 .kamar-rc-arrow{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(232,199,119,.1);border:1px solid rgba(232,199,119,.35);color:#f3d98d;transition:transform .3s ease,background .3s ease}
body.kamar-member-desktop-v2 .kamar-rc:hover .kamar-rc-arrow{background:rgba(232,199,119,.22);transform:scale(1.1)}
body.kamar-member-desktop-v2 .kamar-guide-box,body.kamar-member-desktop-v2 .admin-empty-state{border-radius:16px!important}
@supports (not (display:block)){
body.kamar-member-desktop-v2 .kd-pagehero,body.kamar-member-desktop-v2 .stat-card,body.kamar-member-desktop-v2 .kamar-rc,body.kamar-member-desktop-v2 .kamar-sec-title{animation:kv4in linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
}
@supports not (animation-timeline:view()){
body.kamar-member-desktop-v2 .kd-pagehero,body.kamar-member-desktop-v2 .stat-card,body.kamar-member-desktop-v2 .kamar-rc{animation:kv4in .7s cubic-bezier(.2,.8,.2,1) both}
body.kamar-member-desktop-v2 .stat-card:nth-child(2){animation-delay:.08s}body.kamar-member-desktop-v2 .stat-card:nth-child(3){animation-delay:.16s}
}
@media(prefers-reduced-motion:reduce){body.kamar-member-desktop-v2 .kd-pagehero,body.kamar-member-desktop-v2 .kd-pagehero::after,body.kamar-member-desktop-v2 .stat-card,body.kamar-member-desktop-v2 .kamar-rc,body.kamar-member-desktop-v2 .kamar-sec-title,body.kamar-member-desktop-v2 .kamar-facility-eyebrow::before{animation:none!important}}