/* =====================================================================
   MetaTraderKit — Sistem Desain (mtk.css)
   Satu sumber styling untuk SEMUA halaman (user & admin).
   Cara pakai di setiap halaman:
     <link rel="stylesheet" href="/assets/mtk.css">
   Logo di navbar/footer:
     <a class="brand"><img src="/assets/logo.png" alt="MetaTraderKit"><span>MetaTraderKit<small>Smart Trading Tools</small></span></a>
   Ikon: pakai sprite SVG (lihat README). Contoh: <svg class="icon"><use href="#i-wallet"/></svg>
   Warna, jarak, radius, dsb. dikunci di :root — ubah di sini sekali, berlaku di semua halaman.
   ===================================================================== */


  :root{
    /* Depth pass: halaman dibuat lebih gelap (near-black) supaya panel & kartu
       menonjol (kontras "tegas"), sementara warna hijau panel/kartu dinaikkan
       tipis biar hangat ("halus"). --line-top dipertegas untuk garis atas menyala. */
    --ink:#040806; --ink-2:#10241C; --ink-3:#143024; --band:#07110C;
    --green:#1FE374; --green-2:#16C96B; --green-ink:#03100A;
    --gold:#D4B25C; --gold-2:#E2C179;
    --paper:#F4F7F5; --muted:#A8B6AE; --muted-2:#728179;
    --line:rgba(135,170,145,.18); --line-2:rgba(135,170,145,.28); --line-top:rgba(135,170,145,.26);
    --ok:#1FE374; --warn:#D4B25C; --info:#7FA7FF; --bad:#FF7A7A;
    /* Token tambahan dari panduan warna final */
    --card-inner:#08140F; --card-main:#0D1C16; --border-active:rgba(31,227,116,.55);
    /* Surface panel: solid, sedikit lebih terang dari --ink (background) supaya
       hierarki kartu terlihat jelas di semua halaman (bukan transparan). */
    --panel:#101F19; --panel2:#152A20;
    --gold-bg:rgba(212,178,92,.12); --gold-border:rgba(212,178,92,.38);
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;
    --r-sm:12px;--r:16px;--r-lg:22px;--r-xl:28px;
    --sh:0 30px 70px rgba(0,0,0,.5);
    --max:1160px;
    --disp:'Inter',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative}
  /* CATATAN (build 723): di sini DULU ada aturan body::before kedua berisi
     tekstur grid 44px. Ia tidak pernah tampil sekali pun — aturan body::before
     di bawah menimpanya seluruhnya, dan sebuah elemen cuma punya satu ::before.
     Dibuang karena membaca kode mati sebagai kode hidup menyesatkan siapa pun
     yang nanti mencoba mengubah latarnya. */
  body>*{position:relative;z-index:1}
  /* Latar elegant: glow mesh + garis chart abstrak + grain + grid samar */
  body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%231FE374' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%231FE374' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23D4B25C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 160 L150 140 L300 165 L450 110 L600 130 L750 60 L900 90 L1050 30 L1200 50' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3C/svg%3E") center bottom/100% 190px no-repeat,
      radial-gradient(900px 560px at 90% -6%,rgba(31,227,116,.06),transparent 55%),
      radial-gradient(720px 460px at 2% 4%,rgba(212,178,92,.05),transparent 58%),
      radial-gradient(1000px 560px at 40% 112%,rgba(31,227,116,.05),transparent 60%)}
  body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),
      linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:150px 150px,60px 60px,60px 60px;
    -webkit-mask-image:radial-gradient(circle at 50% -5%,#000,transparent 90%);
    mask-image:radial-gradient(circle at 50% -5%,#000,transparent 90%)}
  a{color:inherit;text-decoration:none}
  .num{font-variant-numeric:tabular-nums}
  .disp{font-family:var(--disp);font-weight:800;letter-spacing:-.018em;line-height:1.05}
  h1.disp,h2.disp{letter-spacing:-.022em}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s6);position:relative}
  .eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;background:rgba(227,192,107,.09);border:1px solid rgba(227,192,107,.22);padding:6px 13px;border-radius:999px}
  .icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .i18{width:18px;height:18px}.i20{width:20px;height:20px}.i24{width:24px;height:24px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--disp);font-weight:600;font-size:15px;padding:12px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .2s,border-color .2s,background .2s;letter-spacing:.01em}
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .btn .icon{width:18px;height:18px}

  /* Tombol beraksen sesuai FUNGSI — halus: cuma ikon berwarna + garis tint,
     bukan blok penuh (biar tidak norak). Warnanya makin hidup saat hover. */
  .btn.acc-green .icon{color:var(--green)}
  .btn.acc-green{border-color:rgba(31,227,116,.32)}
  .btn.acc-green:hover{border-color:var(--green);background:rgba(31,227,116,.09);color:var(--paper);transform:translateY(-2px)}
  .btn.acc-gold .icon{color:var(--gold)}
  .btn.acc-gold{border-color:rgba(227,192,107,.34)}
  .btn.acc-gold:hover{border-color:var(--gold);background:rgba(227,192,107,.09);color:var(--paper);transform:translateY(-2px)}

  .btn-primary{background:linear-gradient(135deg,var(--green),var(--green-2));color:var(--green-ink);box-shadow:0 8px 22px rgba(31,227,116,.28),inset 0 1px 0 rgba(255,255,255,.28)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(31,227,116,.32)}
  .btn-ghost{background:var(--ink-3);color:var(--paper);border-color:var(--line-2)}
  .btn-ghost:hover{border-color:var(--paper);transform:translateY(-2px)}
  .btn-danger{background:transparent;color:var(--bad);border-color:rgba(240,122,122,.4)}
  .btn-danger:hover{background:rgba(240,122,122,.1)}
  .btn-block{width:100%}.btn-sm{padding:9px 15px;font-size:14px}


  /* NAV */
  .topnav{position:sticky;top:0;z-index:60;background:rgba(6,12,9,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
  /* Tombol auth header: desktop 2 tombol terpisah, HP 1 tombol gabungan */
  .ft-sempit{display:none}
  @media(max-width:560px){ .ft-lebar{display:none} .ft-sempit{display:inline-flex} }
  .brand{display:flex;align-items:center;gap:var(--s3);font-family:var(--disp);font-weight:700;letter-spacing:.01em}
  .brand img{width:38px;height:38px;border-radius:10px;object-fit:cover;box-shadow:0 4px 14px rgba(31,227,116,.2)}
  .brand small{display:block;font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:-1px}
  .navlinks{display:flex;gap:var(--s8);font-size:14.5px;color:var(--muted);font-weight:500}
  .navlinks a{display:flex;align-items:center;gap:6px;cursor:pointer}.navlinks a:hover,.navlinks a.on{color:var(--paper)}
  .navact{display:flex;gap:var(--s3);align-items:center}
  .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,var(--green),var(--green-2));color:var(--green-ink);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:15px;cursor:pointer}
  .backbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:500;font-size:14px;color:var(--muted);cursor:pointer;padding:8px 0}
  .backbtn:hover{color:var(--paper)}
  .backbtn .icon{width:18px;height:18px;transform:rotate(180deg)}

  /* Panel dgn sudut teknis (kedalaman) */
  .tick{position:relative}
  .tick::before,.tick::after{content:'';position:absolute;width:12px;height:12px;border-color:var(--line-2);pointer-events:none}
  .tick::before{top:10px;left:10px;border-left:1.5px solid;border-top:1.5px solid;border-top-left-radius:3px}
  .tick::after{bottom:10px;right:10px;border-right:1.5px solid;border-bottom:1.5px solid;border-bottom-right-radius:3px}

  /* HERO */
  .hero{padding:var(--s20) 0 var(--s16);position:relative;overflow:hidden}
  .hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(780px 440px at 84% -4%,rgba(31,227,116,.14),transparent 60%),radial-gradient(560px 320px at 4% 10%,rgba(227,192,107,.07),transparent 62%)}
  .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s12);align-items:center}
  .hero h1{font-size:clamp(40px,5.6vw,66px);margin:var(--s5) 0;font-weight:900;letter-spacing:-.03em}
  .hero h1 .hl{color:var(--green)}
  .hero .lede{font-size:18.5px;color:var(--muted);max-width:36ch;margin-bottom:var(--s8)}
  .hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s10)}
  .mini-vals{display:flex;gap:var(--s6);flex-wrap:wrap}
  .mini-vals .mv{display:flex;align-items:center;gap:var(--s2);font-size:13.5px;font-weight:500}
  .mini-vals .mv .icon{color:var(--green);width:17px;height:17px}

  .live-panel{background:linear-gradient(165deg,var(--ink-2),#081410);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--sh);position:relative;overflow:hidden}
  .live-panel::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(31,227,116,.5),transparent)}
  .lp-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s4)}
  .lp-title{font-family:var(--disp);font-weight:600;font-size:16px;display:flex;align-items:center;gap:var(--s2)}
  .lp-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--green);letter-spacing:.1em;text-transform:uppercase}
  .lp-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,227,116,.55)}70%{box-shadow:0 0 0 8px rgba(31,227,116,0)}100%{box-shadow:0 0 0 0 rgba(31,227,116,0)}}
  .lp-price{font-family:var(--disp);font-weight:700;font-size:30px}
  .lp-price .chg{font-family:var(--body);font-size:13px;font-weight:600;color:var(--green);margin-left:8px}
  .lp-chart{margin:var(--s4) 0;border-radius:var(--r);overflow:hidden;background:rgba(0,0,0,.22);border:1px solid var(--line)}
  .lp-chart svg{display:block;width:100%;height:150px}
  .lp-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
  .lp-ctrl{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;display:flex;align-items:center;justify-content:space-between}
  .lp-ctrl small{color:var(--muted);font-size:12px;display:block}.lp-ctrl b{font-family:var(--disp);font-size:14px}
  .toggle{width:38px;height:22px;border-radius:999px;background:var(--green);position:relative;flex:none;cursor:pointer}
  .toggle::after{content:'';position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#04140c;transition:.2s}
  .toggle.off{background:#2c433a}.toggle.off::after{right:auto;left:2px;background:#8ca598}

  /* SECTION */
  section.block{padding:var(--s24) 0;position:relative}
  section.alt{background:linear-gradient(180deg,var(--band),var(--ink));border-top:1px solid var(--line-top);border-bottom:1px solid var(--line)}
  .sec-head{max-width:60ch;margin-bottom:var(--s12)}
  .sec-head h2{font-size:clamp(28px,3.8vw,44px);margin-top:var(--s3);font-weight:700}
  .sec-head .instr{color:var(--muted);font-size:17px;margin-top:var(--s4)}
  .center{text-align:center;margin-left:auto;margin-right:auto}

  .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
  .val{background:var(--ink-2);border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);padding:var(--s6);transition:.2s}
  .val:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .val .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(31,227,116,.06);color:var(--green);margin-bottom:var(--s4)}
  .val .ico.gold{background:rgba(227,192,107,.13);color:var(--gold)}
  .val h4{font-family:var(--disp);font-size:17px;font-weight:600;margin-bottom:var(--s2)}
  .val p{color:var(--muted);font-size:14px}

  .brokers{padding:var(--s10) 0}
  .brokers .wrap{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;justify-content:space-between}
  .brokers .lbl{color:var(--muted);font-size:14px;max-width:24ch;display:flex;align-items:center;gap:var(--s2)}
  .brokers .lbl .icon{color:var(--green);width:20px;height:20px}
  .chips{display:flex;gap:var(--s3);flex-wrap:wrap}
  .chip{font-family:var(--disp);font-weight:600;font-size:14px;opacity:.7;padding:9px 15px;border:1px solid var(--line);border-radius:10px;transition:.2s}
  .chip:hover{opacity:1;border-color:var(--line-2)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .card{background:var(--ink-2);border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;transition:.2s;cursor:pointer}
  .card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 20px 44px rgba(0,0,0,.32)}
  .card-cat{align-self:flex-start;font-family:var(--disp);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--green);background:rgba(31,227,116,.06);padding:5px 11px;border-radius:999px}
  .card-visual{margin:var(--s5) 0;height:120px;border-radius:var(--r);position:relative;overflow:hidden;background:linear-gradient(150deg,var(--ink-3),#081410);border:1px solid var(--line)}
  .card-visual svg{position:absolute;inset:0;width:100%;height:100%}
  .card h3{font-family:var(--disp);font-size:22px;font-weight:600;margin-bottom:var(--s2)}
  .card .benefit{color:var(--muted);font-size:14.5px;margin-bottom:var(--s5);flex:1}
  .plats{display:flex;gap:var(--s2);margin-bottom:var(--s5)}
  .plat{font-family:var(--disp);font-size:11.5px;color:var(--muted);border:1px solid var(--line);padding:3px 9px;border-radius:6px;font-weight:500}
  .price-row{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5)}
  .price{font-family:var(--disp);font-size:25px;font-weight:700;color:var(--gold)}
  .price small{font-family:var(--body);font-size:12px;color:var(--muted);font-weight:500}
  .price-was{font-size:14px;color:var(--muted);text-decoration:line-through;opacity:.6}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .stepc{background:var(--ink-2);border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);padding:var(--s8);position:relative;overflow:hidden}
  .stepc::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--green),transparent)}
  .stepc .n{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--green-ink);background:var(--green);width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:var(--s5)}
  .stepc .ico{color:var(--gold);margin-bottom:var(--s3)}
  .stepc h4{font-family:var(--disp);font-size:19px;font-weight:600;margin-bottom:var(--s2)}
  .stepc p{color:var(--muted);font-size:15px}

  .band{background:linear-gradient(160deg,var(--ink-2),#081410);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:var(--s16);text-align:center;position:relative;overflow:hidden}
  .band::before{content:'';position:absolute;inset:0;background:radial-gradient(620px 320px at 50% -10%,rgba(227,192,107,.1),transparent 60%)}
  .band>*{position:relative}
  .band h2{font-size:clamp(28px,3.6vw,42px);margin:var(--s4) auto var(--s5);max-width:20ch;font-weight:700}
  .band p{color:var(--muted);max-width:52ch;margin:0 auto var(--s8);font-size:17px}

  footer{border-top:1px solid var(--line);padding:var(--s16) 0 var(--s10)}
  .foot{display:flex;justify-content:space-between;gap:var(--s10);flex-wrap:wrap;margin-bottom:var(--s12)}
  .fcol h6{font-family:var(--disp);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:var(--s4)}
  .fcol a{display:block;color:var(--paper);opacity:.8;font-size:14.5px;margin-bottom:var(--s3);cursor:pointer}
  .fcol a:hover{opacity:1;color:var(--green)}
  .foot-b{border-top:1px solid var(--line);padding-top:var(--s6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);color:var(--muted-2);font-size:13px}
  .foot-disc{color:var(--muted-2);font-size:12px;line-height:1.7;border-top:1px solid var(--line);padding-top:var(--s5);margin-bottom:var(--s5)}
  .foot-disc b{color:var(--muted)}

  /* Generic app pages */
  .app-head{padding:var(--s8) 0 0}
  .page-title{font-family:var(--disp);font-size:clamp(26px,3.4vw,38px);font-weight:700}
  .page-sub{color:var(--muted);margin-top:var(--s2)}

  .panel{background:var(--ink-2);border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);padding:var(--s8);margin-top:var(--s6)}
  .panel-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6);flex-wrap:wrap}
  .panel-head .ph-ico{width:40px;height:40px;border-radius:11px;background:rgba(31,227,116,.06);color:var(--green);display:grid;place-items:center;flex:none}
  .panel-head h3{font-family:var(--disp);font-size:20px;font-weight:600}
  .panel-head .ph-sub{color:var(--muted);font-size:13.5px}
  .panel-head .spacer{flex:1}

  .grid-2{display:grid;grid-template-columns:340px 1fr;gap:var(--s6);align-items:start;margin-top:var(--s6)}
  /* Profil */
  .profile-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s8);text-align:center}
  .profile-photo{width:88px;height:88px;border-radius:50%;margin:0 auto var(--s4);background:linear-gradient(150deg,var(--green),var(--green-2));color:var(--green-ink);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:32px}
  .profile-card h3{font-family:var(--disp);font-size:20px;font-weight:600}
  .profile-card .role{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--green);background:rgba(31,227,116,.1);padding:4px 12px;border-radius:999px}
  .profile-meta{text-align:left;margin:var(--s6) 0;display:grid;gap:var(--s3)}
  .pm{display:flex;align-items:center;gap:var(--s3);font-size:14px}
  .pm .icon{color:var(--muted);width:18px;height:18px}

  .wallet{background:linear-gradient(150deg,#0f3524,#0a1c14);border:1px solid rgba(31,227,116,.22);border-radius:var(--r-lg);padding:var(--s8);position:relative;overflow:hidden}
  .wallet::before{content:'';position:absolute;top:-30%;right:-10%;width:60%;height:130%;background:radial-gradient(circle,rgba(31,227,116,.16),transparent 65%)}
  .wallet .lbl{position:relative;color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:var(--s2)}
  .wallet .amt{position:relative;font-family:var(--disp);font-weight:700;font-size:clamp(30px,4vw,42px);margin:var(--s2) 0 var(--s6)}
  .wallet .wact{position:relative;display:flex;gap:var(--s3);flex-wrap:wrap}

  .owned{display:flex;align-items:flex-start;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);scrollbar-width:thin}

  /* LATAR DI BELAKANG KARTU — di sinilah teksturnya sekarang tinggal.
     Kisinya lebih rapat (22px) dan lebih redup daripada versi kartu dulu:
     tugasnya memberi kedalaman, bukan menarik perhatian. */
  .d-prods, .p-grid{position:relative;border-radius:var(--r-lg);padding:var(--s5);
    background:
      linear-gradient(rgba(135,170,145,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(135,170,145,.05) 1px, transparent 1px),
      radial-gradient(120% 120% at 20% 0%, rgba(31,227,116,.07), transparent 58%),
      linear-gradient(160deg, #0B1711, #070E0A);
    background-size:22px 22px, 22px 22px, auto, auto;
    border:1px solid rgba(135,170,145,.07)}
  @media(max-width:760px){ .d-prods, .p-grid{padding:var(--s4);border-radius:var(--r)} }
  .owned::-webkit-scrollbar{height:6px}.owned::-webkit-scrollbar-thumb{background:rgba(31,227,116,.35);border-radius:3px}
  .owned .oc{flex:0 0 calc(50% - var(--s5)/2);scroll-snap-align:start}
  .mini-cat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:calc((100% - var(--s5)*2)/3);gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);scrollbar-width:thin}
  .mini-cat::-webkit-scrollbar{height:6px}.mini-cat::-webkit-scrollbar-thumb{background:rgba(31,227,116,.35);border-radius:3px}
  .mini-cat > .card{scroll-snap-align:start;cursor:pointer}
  .scroll-hint{color:var(--muted-2);font-size:12px;display:flex;align-items:center;gap:6px;margin-top:var(--s2)}
  @media(max-width:760px){ .owned .oc{flex:0 0 86%} .mini-cat{grid-auto-columns:calc((100% - var(--s5))/2)} }
  /* KARTU: sengaja TANPA kisi. Kisinya dipindah ke latar di belakangnya
     (.d-prods / .p-grid) supaya kartu terbaca sebagai permukaan yang
     TERANGKAT, bukan menyatu dengan latarnya. Kalau keduanya bertekstur,
     matanya kehilangan pegangan dan tak ada yang menonjol.
     Kedalamannya datang dari tiga hal: warna sedikit lebih terang dari
     latar, garis tipis di tepi atas (seperti cahaya jatuh), dan bayangan. */
  .oc{border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r);padding:var(--s6);cursor:pointer;transition:.18s;
    background:linear-gradient(180deg, #16302407, #0000 40%), linear-gradient(180deg, #17332690, #0F241B);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.32)}
  .oc:hover{border-color:rgba(31,227,116,.30);transform:translateY(-2px);
    background:linear-gradient(180deg, #1a3a2b0d, #0000 40%), linear-gradient(180deg, #1B3B2B95, #12291E);
    box-shadow:inset 0 1px 0 rgba(31,227,116,.16), 0 12px 28px rgba(0,0,0,.4)}

  /* --- TOMBOL AKSI KARTU (dipakai kartu produk & kartu validasi) ---
     Dulu dicetak dari dalam kartu-produk.php, sehingga halaman yang hanya
     menampilkan kartu validasi kehilangan gayanya sama sekali. */
  .oc-act{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s4)}
  /* Teks ditengahkan & BOLEH melipat. Dulu dipaksa satu baris (nowrap),
     sehingga teks panjang keluar dari bentuk tombolnya di layar sempit. */
  .oc-act .btn{width:100%;justify-content:center;min-width:0;
               font-size:12px;padding:8px 10px;gap:6px;
               white-space:normal;text-align:center;line-height:1.35}
  .oc-act .btn .icon{width:14px;height:14px}

  /* --- SUSUNAN TOMBOL MENURUT JUMLAHNYA ---
     Aturannya: tak boleh ada tombol yang menggantung setengah baris.
       1 tombol  -> satu baris penuh
       2 tombol  -> dua baris, masing-masing penuh
       3 tombol  -> dua di atas, satu penuh di bawah
       4 tombol  -> dua di atas, dua di bawah
       5 tombol  -> 2 + 2 + satu penuh, dan seterusnya
     Dihitung lewat pemilih CSS (:nth-last-child), bukan kelas yang harus
     ditambahkan manual — jadi berlaku sendiri berapa pun tombolnya. */

  /* satu-satunya tombol */
  .oc-act > :only-child{grid-column:1 / -1}

  /* tepat dua tombol -> keduanya penuh, bertumpuk */
  .oc-act > :first-child:nth-last-child(2),
  .oc-act > :first-child:nth-last-child(2) ~ *{grid-column:1 / -1}

  /* jumlah GANJIL (3, 5, 7, 9) -> yang terakhir melebar penuh
     supaya tak ada sisa setengah baris */
  .oc-act > :first-child:nth-last-child(3) ~ :last-child,
  .oc-act > :first-child:nth-last-child(5) ~ :last-child,
  .oc-act > :first-child:nth-last-child(7) ~ :last-child,
  .oc-act > :first-child:nth-last-child(9) ~ :last-child{grid-column:1 / -1}


  /* Tombol didorong ke DASAR kartu. Kartu diregangkan setinggi yang tertinggi,
     jadi yang isinya sedikit menyisakan ruang di bawah; menaruh tombol di sana
     membuat ruang itu terbaca sebagai jeda, bukan kartu yang belum selesai. */
  .oc{display:flex;flex-direction:column}
  .oc-act{margin-top:auto}

  /* Badge tak boleh melipat: di layar sempit "Menunggu Admin" pecah dua baris
     dan teksnya keluar dari bentuk pilnya. Judul yang mengalah. */
  .oc .badge{white-space:nowrap;flex:none}
  .oc-top > :first-child{min-width:0}
  .oc-top .nm{overflow-wrap:anywhere}
  .oc:hover{border-color:var(--line-2)}
  .oc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s4)}
  .oc h4{font-family:var(--disp);font-size:18px;font-weight:600}.oc .meta{color:var(--muted);font-size:13px;margin-top:2px}
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;font-family:var(--disp)}
  .badge.ok{background:rgba(31,227,116,.13);color:var(--ok);border:1px solid rgba(31,227,116,.3)}
  .badge.warn{background:rgba(227,192,107,.13);color:var(--warn);border:1px solid rgba(227,192,107,.3)}
  .badge.info{background:rgba(90,168,240,.13);color:var(--info);border:1px solid rgba(90,168,240,.3)}
  .badge.bad{background:rgba(240,122,122,.13);color:var(--bad);border:1px solid rgba(240,122,122,.3)}
  .oc-rows{display:grid;gap:var(--s2);border-top:1px solid var(--line);padding-top:var(--s4)}
  .oc-line{display:flex;justify-content:space-between;font-size:13.5px}.oc-line span{color:var(--muted)}
  /* Pemisah antara keterangan pesanan dan angka uang. Keduanya dibaca dengan
     cara berbeda: yang atas dipindai sekali untuk memastikan pesanannya benar,
     yang bawah dihitung. Dicampur dalam satu daftar, mata harus menyaring
     sendiri mana yang mana setiap kali. */
  .oc-pisah{height:1px;background:var(--line);margin:11px 0 3px}
  /* Keterangan penutup pada kartu pengajuan yang sudah ditolak/dibatalkan.
     Sengaja tenang: ini kabar baik yang tak perlu menarik perhatian. */
  .oc-tutup-nb{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
               font-size:12px;color:var(--muted)}
  /* Angka yang paling dicari — dibedakan supaya ketemu tanpa membaca yang lain. */
  .oc-line.oc-akhir{margin-top:3px;font-size:14.5px}
  .oc-line.oc-akhir span{color:var(--paper)}
  .oc-line.oc-akhir b{color:var(--green);font-weight:700}

  /* ===== Modal "Detail Produk" — dirapikan agar mudah dibaca ===== */
  #dtRows{display:block;border-top:0;padding-top:0}
  #dtRows .dt-gt{font-family:var(--disp);font-size:11px;font-weight:700;text-transform:uppercase;
                 letter-spacing:.07em;color:var(--muted-2);margin:0 0 10px}
  #dtRows .dt-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;
                   background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
                   padding:11px 13px;margin-bottom:8px}
  #dtRows .dt-copy-l{min-width:0;flex:1}
  #dtRows .dt-copy-l span{display:block;color:var(--muted);font-size:10.5px;text-transform:uppercase;
                          letter-spacing:.05em;margin-bottom:4px}
  #dtRows .dt-copy-l b{display:block;font-family:var(--mono,monospace);font-size:13px;font-weight:600;
                       color:var(--paper);word-break:break-all;line-height:1.4}
  #dtRows .dt-cbtn{flex:none;display:inline-flex;align-items:center;gap:5px;background:transparent;
                   border:1px solid var(--line);border-radius:8px;padding:6px 11px;color:var(--muted);
                   font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--disp)}
  #dtRows .dt-cbtn:hover{color:var(--green);border-color:rgba(31,227,116,.4)}
  #dtRows .oc-line{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
                   padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px}
  #dtRows .oc-line:last-child{border-bottom:0}
  #dtRows .oc-line span{color:var(--muted)}
  #dtRows .oc-line b{color:var(--paper);text-align:right}

  .hist{display:grid;gap:2px}
  .hrow{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
  .hrow:last-child{border-bottom:0}
  .hrow .hl{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0}
  .hrow .hl>div{min-width:0}
  .hrow .hi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--ink-3);flex:none}
  .hrow .hi.in{color:var(--green)}.hrow .hi.out{color:var(--gold)}
  .hrow .ht{font-weight:500;font-size:14px;line-height:1.35}.hrow .hd{color:var(--muted);font-size:12px;margin-top:1px}
  .hrow .ha{font-family:var(--disp);font-weight:600;font-size:15px;white-space:nowrap;flex:none;padding-left:12px}.ha.in{color:var(--green)}.ha.out{color:var(--paper)}

  /* Katalog */
  .cat-bar{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin:var(--s8) 0;padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
  .fchip{font-family:var(--disp);font-weight:500;font-size:14px;color:var(--muted);padding:9px 16px;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:.15s}
  .fchip.on{color:var(--green-ink);background:var(--green);border-color:var(--green);font-weight:600}
  .search{display:flex;align-items:center;gap:var(--s2);background:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;min-width:220px}
  .search .icon{color:var(--muted)}
  .search input{background:none;border:0;color:var(--paper);font-size:14.5px;width:100%;outline:none}
  .sortsel{font-family:var(--disp);font-size:13.5px;color:var(--muted);background:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:9px 14px}
  .cat-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5);color:var(--muted);font-size:14px}
  .grid-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}

  /* Detail */
  .detail{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:start;margin-top:var(--s6)}
  .detail-media{background:linear-gradient(150deg,var(--ink-3),#081410);border:1px solid var(--line);border-radius:var(--r-lg);height:340px;position:relative;overflow:hidden}
  .detail-media svg{position:absolute;inset:0;width:100%;height:100%}
  .featlist{display:grid;gap:var(--s4);margin:var(--s6) 0}
  .feat{display:flex;gap:var(--s3);align-items:flex-start}
  .feat .fi{width:38px;height:38px;border-radius:11px;background:rgba(31,227,116,.06);color:var(--green);display:grid;place-items:center;flex:none}
  .feat b{font-family:var(--disp);font-weight:600;display:block;margin-bottom:2px}.feat p{color:var(--muted);font-size:14px}
  .buybox{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s6);margin-top:var(--s5)}
  .buybox .p{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5)}

  /* Stepper */
  .stepper{display:flex;align-items:center;gap:var(--s2);margin:var(--s8) 0 var(--s10);flex-wrap:wrap}
  .st{display:flex;align-items:center;gap:var(--s3)}
  .st .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14px;border:1px solid var(--line-2);color:var(--muted)}
  .st.on .dot{background:var(--green);color:var(--green-ink);border-color:var(--green)}
  .st .lab{font-family:var(--disp);font-weight:500;font-size:14px;color:var(--muted)}.st.on .lab{color:var(--paper)}
  .st-line{width:40px;height:1px;background:var(--line-2)}

  .field{margin-bottom:var(--s5)}
  .field label{display:block;font-family:var(--disp);font-weight:500;font-size:14px;margin-bottom:var(--s2)}
  /* .hint berlaku DI MANA PUN, tidak cuma di dalam .field.

     Sampai build 752 aturannya .field .hint — dan 16 tempat di seluruh situs
     memakai class="hint" di luar .field. Semuanya tampil sebesar teks biasa,
     termasuk peringatan "Alamat belum lengkap" di halaman rincian pengguna.

     Keterangan kecil yang tampil sebesar teks biasa terbaca sebagai
     pengumuman, bukan catatan — dan yang terbaca sebagai pengumuman menarik
     perhatian dari hal yang sebenarnya penting di halaman itu.

     Ini bukan kesalahan yang memakainya: nama "hint" tidak menyiratkan syarat
     harus berada di dalam .field, jadi tiap orang yang memakainya wajar
     mengira ia bekerja sendiri. Selektor yang menuntut induk tertentu harus
     punya nama yang menyebutkan induknya. */
  .hint{color:var(--muted-2);font-size:12.5px;line-height:1.55}
  .field .hint{margin-top:6px}
  .input,textarea.input,select.input{width:100%;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;color:var(--paper);font-size:16px;font-family:var(--body);outline:none;transition:border-color .15s}
  .input:focus{border-color:var(--green)}
  textarea.input{resize:vertical;min-height:96px}
  .quick{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
  .qbtn{font-family:var(--disp);font-weight:600;font-size:14px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--paper);transition:.15s}
  .qbtn:hover{border-color:var(--green);color:var(--green)}
  .note-soft{background:rgba(90,168,240,.08);border:1px solid rgba(90,168,240,.25);border-radius:var(--r);padding:var(--s5);margin-top:var(--s6);font-size:13.5px;color:var(--paper);display:flex;gap:var(--s3)}
  .note-soft .icon{color:var(--info);flex:none;width:20px;height:20px;margin-top:2px}

  /* Checkout */
  .checkout{display:grid;grid-template-columns:1fr 360px;gap:var(--s8);align-items:start;margin-top:var(--s6)}
  .co-step{margin-bottom:var(--s10)}
  .co-step-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
  .co-step-h .n{width:32px;height:32px;border-radius:9px;background:var(--green);color:var(--green-ink);font-family:var(--disp);font-weight:700;font-size:15px;display:grid;place-items:center;flex:none}
  .co-step-h h3{font-family:var(--disp);font-size:19px;font-weight:700}
  .co-step-h p{color:var(--muted);font-size:13px}
  .dur-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .dur{border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);cursor:pointer;position:relative;transition:.15s;text-align:left}
  .dur:hover{border-color:var(--line-2)}
  .dur.sel{border-color:var(--green);background:rgba(31,227,116,.06)}
  .dur .dm{font-family:var(--disp);font-weight:700;font-size:16px}
  .dur .dp{color:var(--gold);font-family:var(--disp);font-weight:700;font-size:18px;margin-top:4px}
  .dur .dp small{font-size:11px;color:var(--muted);font-weight:500}
  .dur .dtot{color:var(--muted);font-size:12px;margin-top:2px}
  .dur .save{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:700;font-family:var(--disp);color:var(--green-ink);background:var(--gold);padding:3px 8px;border-radius:999px}
  .opt-cards{display:grid;gap:var(--s3)}
  .opt{border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);cursor:pointer;display:flex;gap:var(--s4);align-items:flex-start;transition:.15s}
  .opt:hover{border-color:var(--line-2)}
  .opt.sel{border-color:var(--green);background:rgba(31,227,116,.06)}
  .opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none;margin-top:2px;position:relative}
  .opt.sel .radio{border-color:var(--green)}
  .opt.sel .radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--green)}
  .opt .ic{width:38px;height:38px;border-radius:11px;background:var(--ink-3);color:var(--green);display:grid;place-items:center;flex:none}
  .opt b{font-family:var(--disp);font-weight:600;display:block;margin-bottom:2px}
  .opt p{color:var(--muted);font-size:13.5px}
  .opt .rec{font-size:10.5px;font-weight:700;font-family:var(--disp);color:var(--gold);border:1px solid rgba(227,192,107,.4);padding:2px 8px;border-radius:999px;margin-left:8px}
  .field-group{display:none;margin-top:var(--s5);padding-top:var(--s5);border-top:1px dashed var(--line-2)}
  .field-group.show{display:block;animation:rise .3s ease}
  .fg-title{font-family:var(--disp);font-weight:600;font-size:14px;margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2);color:var(--muted)}
  .co-summary{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s6);position:sticky;top:120px}
  .co-summary h3{font-family:var(--disp);font-size:18px;font-weight:700;margin-bottom:var(--s5)}
  .sum-line{display:flex;justify-content:space-between;font-size:14px;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .sum-line span{color:var(--muted)}.sum-line b{font-family:var(--disp);font-weight:600;text-align:right}
  .sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--s5);margin-top:var(--s2)}
  .sum-total span{color:var(--muted);font-size:14px}.sum-total b{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--gold)}
  .sum-bal{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin:var(--s4) 0 var(--s5)}
  .dur-disc{display:grid;gap:var(--s2)}
  .dd-row{display:flex;align-items:center;gap:var(--s3);background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:10px var(--s4)}
  .dd-row b{font-family:var(--disp);font-size:14px;flex:1}
  .dd-fix{color:var(--muted-2);font-size:12.5px}
  .dd-in{display:flex;align-items:center;gap:6px}
  .dd-in input{width:60px;padding:7px 8px;text-align:center;font-size:14px}
  .dd-in span{color:var(--muted)}

  /* Konsultasi = Q&A di dalam situs (thread) */
  .thread{display:grid;gap:var(--s4);margin:var(--s5) 0}
  .msg{display:flex;gap:var(--s3);max-width:88%}
  .msg .mav{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:13px}
  .msg.user{margin-left:auto;flex-direction:row-reverse;text-align:right}
  .msg.user .mav{background:var(--ink-3);color:var(--paper)}
  .msg.admin .mav{background:linear-gradient(150deg,var(--green),var(--green-2));color:var(--green-ink)}
  .bubble{background:var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:var(--s4) var(--s5);font-size:14.5px}
  .msg.user .bubble{background:rgba(31,227,116,.08);border-color:rgba(31,227,116,.2)}
  .bubble .mt{color:var(--muted-2);font-size:11.5px;margin-top:6px}
  .reply-box{display:flex;gap:var(--s3);align-items:flex-end;margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s5)}
  .reply-box textarea{flex:1}
  .escalate{display:flex;align-items:center;gap:var(--s2);justify-content:center;color:var(--muted);font-size:13px;margin-top:var(--s5)}
  .escalate a{color:var(--green);font-weight:500;cursor:pointer}

  /* FAQ accordion */
  .faq-list{display:grid;gap:var(--s3);margin-top:var(--s6);max-width:760px}
  .faq-item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5) var(--s6);cursor:pointer;font-family:var(--disp);font-weight:600;font-size:15.5px}
  .faq-q .icon{color:var(--green);transition:transform .2s;flex:none}
  .faq-item.open .faq-q .icon{transform:rotate(45deg)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--muted);font-size:14.5px}
  .faq-item.open .faq-a{max-height:220px}
  .faq-a div{padding:0 var(--s6) var(--s5)}

  /* Monitoring "Akun Pantau" (semi-tersembunyi) */
  .mon-note{background:rgba(90,168,240,.08);border:1px solid rgba(90,168,240,.25);border-radius:var(--r);padding:var(--s5);margin:var(--s6) 0;display:flex;gap:var(--s3);font-size:13.5px}
  .mon-note .icon{color:var(--info);flex:none;width:20px;height:20px}
  .mon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s6)}
  .mon-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
  .mon-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4)}
  .mon-top b{font-family:var(--disp);font-weight:600}
  .mon-chart{height:70px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.2);border:1px solid var(--line);margin-bottom:var(--s4)}
  .mon-chart svg{width:100%;height:100%}
  .mon-stats{display:flex;justify-content:space-between;font-size:13px}.mon-stats .g{color:var(--green);font-family:var(--disp);font-weight:600}

  /* Admin: panel yang bisa diganti (tab berfungsi) */
  .apanel{display:none}.apanel.on{display:block}
  .curate-row{display:flex;align-items:center;gap:var(--s4);background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);margin-bottom:var(--s3)}
  .curate-row .drag{color:var(--muted-2);cursor:grab;flex:none}
  .curate-row .ci{flex:1}
  .curate-row .ci b{font-family:var(--disp);font-weight:600;font-size:15px}
  .curate-row .ci small{color:var(--muted);font-size:12.5px;display:block}
  .curate-hint{color:var(--muted);font-size:13.5px;margin-bottom:var(--s5);display:flex;align-items:center;gap:var(--s2)}
  .set-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
  .set-section{margin-bottom:var(--s8)}
  .set-section h4{font-family:var(--disp);font-size:16px;font-weight:600;margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2)}
  .set-section h4 .icon{color:var(--green)}

  /* Metode topup / opsi bump (dipakai ulang) */
  .method-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s5)}
  .bankbox{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);margin-bottom:var(--s5)}
  .bankbox .bl{display:flex;justify-content:space-between;font-size:14px;padding:var(--s2) 0}.bankbox .bl span{color:var(--muted)}.bankbox .bl b{font-family:var(--disp)}

  /* Pipeline status layanan (di modal produk) */
  .pipeline{display:flex;align-items:flex-start;gap:0;margin:var(--s5) 0}
  .pstep{flex:1;text-align:center;position:relative;font-size:11px;color:var(--muted-2)}
  .pstep .pd{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);margin:0 auto 6px;display:grid;place-items:center;background:var(--ink-2);position:relative;z-index:1}
  .pstep.done .pd{background:var(--green);border-color:var(--green);color:var(--green-ink)}
  .pstep.now .pd{border-color:var(--green);color:var(--green)}
  .pstep.done,.pstep.now{color:var(--paper)}
  .pstep::before{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line-2);z-index:0}
  .pstep:first-child::before{display:none}
  .pstep.done::before{background:var(--green)}

  /* ====== v4: penegas bagian (biar tidak flat) ====== */
  .section-tag{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:rgba(31,227,116,.1);border:1px solid rgba(31,227,116,.25);padding:6px 13px;border-radius:999px}
  .section-tag.gold{color:var(--gold);background:rgba(227,192,107,.1);border-color:rgba(227,192,107,.25)}
  section.alt{background:linear-gradient(180deg,#0B1712,#070F0B 60%,var(--ink));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
  .divider-lbl{display:flex;align-items:center;gap:var(--s4);margin:var(--s4) 0 var(--s8)}
  .divider-lbl::before,.divider-lbl::after{content:'';height:1px;flex:1;background:var(--line)}

  /* ====== Segmented toggle (login/daftar) ====== */
  .seg{display:flex;background:var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:5px;margin-bottom:var(--s6);position:relative}
  .seg button{flex:1;padding:12px;border:0;background:transparent;color:var(--muted);font-family:var(--disp);font-weight:600;font-size:15px;border-radius:10px;cursor:pointer;transition:.2s;z-index:1}
  .seg button.on{color:var(--green-ink)}
  .seg .glider{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:linear-gradient(180deg,var(--green),var(--green-2));border-radius:10px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
  .seg.reg .glider{transform:translateX(100%)}
  .auth-form{display:none}.auth-form.on{display:block}

  /* ====== Feed testimoni ala sosial media ====== */
  .feed{max-width:600px;margin:var(--s6) auto 0}
  .compose{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s6);display:flex;gap:var(--s3);align-items:flex-start}
  .compose .cav{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--green),var(--green-2));color:var(--green-ink);display:grid;place-items:center;font-family:var(--disp);font-weight:700;flex:none}
  .compose .cbody{flex:1}
  .compose .crate{color:var(--gold);font-size:20px;letter-spacing:3px;margin:var(--s3) 0;cursor:pointer}
  .compose .crow{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s2)}
  .compose select.input{width:auto;padding:8px 12px;font-size:13px}
  .login-gate{background:var(--ink-2);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--s6);text-align:center;margin-bottom:var(--s6)}
  .login-gate .icon{color:var(--green);width:30px;height:30px;margin-bottom:var(--s3)}
  .login-gate p{color:var(--muted);font-size:14.5px;margin-bottom:var(--s5)}
  .post{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);margin-bottom:var(--s4)}
  .post.pinned{border-color:rgba(227,192,107,.4);background:linear-gradient(160deg,rgba(227,192,107,.05),var(--ink-2))}
  .post-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
  .post-av{width:42px;height:42px;border-radius:50%;background:var(--ink-3);color:var(--green);display:grid;place-items:center;font-family:var(--disp);font-weight:700;flex:none}
  .post-id{flex:1}.post-id b{font-family:var(--disp);font-weight:600;font-size:15px;display:flex;align-items:center;gap:var(--s2)}
  .post-id small{color:var(--muted);font-size:12.5px}
  .pin-badge{font-size:10.5px;font-weight:700;font-family:var(--disp);color:var(--gold);border:1px solid rgba(227,192,107,.4);padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
  .post .prate{color:var(--gold);letter-spacing:2px;margin-bottom:var(--s3)}
  .post .ptext{font-size:14.5px;color:var(--paper)}
  .post-foot{display:flex;gap:var(--s6);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--muted);font-size:13px}
  .post-foot span{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.post-foot span:hover{color:var(--paper)}
  .post .tag-prod{font-size:11.5px;color:var(--green);background:rgba(31,227,116,.1);padding:3px 9px;border-radius:999px;font-family:var(--disp);font-weight:600}

  /* ====== Akun Pantau (MT5 login access) ====== */
  .mt5-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
  .mt5-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5)}
  .mt5-head b{font-family:var(--disp);font-weight:600;font-size:16px}
  .mt5-rows{display:grid;gap:var(--s2)}
  .mt5-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:var(--s3);background:var(--ink-3);border:1px solid var(--line);border-radius:10px}
  .mt5-line span{color:var(--muted)}
  .mt5-line b{font-family:var(--disp);display:flex;align-items:center;gap:var(--s2)}
  .copy-btn{color:var(--green);cursor:pointer;font-size:12px;border:1px solid var(--line);border-radius:7px;padding:2px 8px;font-family:var(--disp);font-weight:600}

  /* ====== Admin sidebar (profesional desktop) ====== */
  .admin-shell{display:grid;grid-template-columns:240px 1fr;gap:var(--s8);margin-top:var(--s6);align-items:start}
  .admin-side{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);position:sticky;top:120px}
  .admin-side .side-lbl{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:var(--s3) var(--s3) var(--s2)}
  .side-item{display:flex;align-items:center;gap:var(--s3);padding:11px 13px;border-radius:11px;color:var(--muted);font-family:var(--disp);font-weight:500;font-size:14.5px;cursor:pointer;transition:.15s;margin-bottom:2px}
  .side-item:hover{color:var(--paper);background:var(--ink-3)}
  .side-item.on{color:var(--green-ink);background:var(--green)}
  .side-item .icon{width:19px;height:19px;flex:none}
  .side-item .count{margin-left:auto;font-size:11px;background:rgba(240,122,122,.2);color:var(--bad);padding:2px 8px;border-radius:999px;font-weight:700}
  .side-item.on .count{background:rgba(4,20,12,.25);color:var(--green-ink)}
  .admin-main{min-width:0}

  /* ====== Navigasi bawah (mobile) ====== */
  .mobnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(8,17,13,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
  .mobnav-inner{display:flex;justify-content:space-around;align-items:center;max-width:520px;margin:0 auto}
  .mobnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10.5px;font-family:var(--disp);font-weight:500;padding:4px 10px;cursor:pointer}
  .mobnav a .icon{width:22px;height:22px}
  .mobnav a.on{color:var(--green)}
  @media (max-width:760px){ .mobnav{display:block} body{padding-bottom:74px} }

  /* ===== v6: Kondisi/State ===== */
  .alert{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);border-radius:var(--r);font-size:14px;align-items:flex-start;margin-bottom:var(--s3)}
  .alert .icon{flex:none;width:20px;height:20px;margin-top:1px}
  .alert b{font-family:var(--disp);font-weight:600;display:block;margin-bottom:2px}
  .alert.err{background:rgba(240,122,122,.1);border:1px solid rgba(240,122,122,.3)}.alert.err .icon{color:var(--bad)}
  .alert.ok{background:rgba(31,227,116,.1);border:1px solid rgba(31,227,116,.3)}.alert.ok .icon{color:var(--ok)}
  .alert.warn{background:rgba(227,192,107,.1);border:1px solid rgba(227,192,107,.3)}.alert.warn .icon{color:var(--warn)}
  .alert.info{background:rgba(90,168,240,.1);border:1px solid rgba(90,168,240,.3)}.alert.info .icon{color:var(--info)}
  .alert p{color:var(--muted)}

  .empty{text-align:center;padding:var(--s12) var(--s6);border:1px dashed var(--line-2);border-radius:var(--r-lg)}
  .empty .ei{width:56px;height:56px;border-radius:16px;background:var(--ink-3);color:var(--muted);display:grid;place-items:center;margin:0 auto var(--s4)}
  .empty h4{font-family:var(--disp);font-size:18px;font-weight:600;margin-bottom:var(--s2)}
  .empty p{color:var(--muted);font-size:14px;margin:0 auto var(--s5);max-width:34ch}

  .toast{display:inline-flex;align-items:center;gap:var(--s3);background:var(--ink-3);border:1px solid var(--line-2);border-radius:12px;padding:13px var(--s5);font-size:14px;box-shadow:var(--sh);margin-bottom:var(--s3)}
  .toast .icon{width:20px;height:20px;flex:none}
  .toast.ok{border-color:rgba(31,227,116,.4)}.toast.ok .icon{color:var(--ok)}
  .toast.err{border-color:rgba(240,122,122,.4)}.toast.err .icon{color:var(--bad)}

  .field.has-err .input{border-color:var(--bad);background:rgba(240,122,122,.05)}
  .err-msg{color:var(--bad);font-size:12.5px;margin-top:6px;display:flex;align-items:center;gap:5px}

  .spinner{width:26px;height:26px;border:3px solid var(--line-2);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;flex:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  .loading-row{display:flex;align-items:center;gap:var(--s3);color:var(--muted);font-size:14px;padding:var(--s5)}
  .skeleton{background:linear-gradient(90deg,var(--ink-3),var(--ink-2),var(--ink-3));background-size:200% 100%;animation:shim 1.3s infinite;border-radius:8px}
  @keyframes shim{to{background-position:-200% 0}}

  .state-block{margin-bottom:var(--s10)}
  .state-lbl{display:flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:var(--s4)}
  .state-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
  @media(max-width:760px){ .state-grid{grid-template-columns:1fr} }

  @media (max-width:920px){ .admin-shell{grid-template-columns:1fr} .admin-side{position:static;display:flex;flex-wrap:wrap;gap:6px} .admin-side .side-lbl{display:none} .side-item{flex:1;justify-content:center;min-width:calc(50% - 6px)} }



  /* Auth */
  /* minmax(0,1fr), BUKAN 1fr. Lebar minimum kolom grid adalah auto — selebar
     isi terlebarnya — jadi isi yang lebar membuat grid meluber keluar layar.
     Aturan platform yang sudah pernah menggigit di tempat lain. */
  .auth{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-rows:auto auto;
    column-gap:var(--s16);row-gap:var(--s8);
    align-items:center;padding:var(--s6) 0 var(--s12);
  }
  /* Kartu membentang dua baris di kanan; judul dan tiga poin bertumpuk di
     kiri. Sebelumnya keduanya satu blok, jadi di layar tinggi mereka
     mengambang di tengah sementara kartunya kependekan. */
  .auth-copy{grid-column:1;grid-row:1;align-self:end}
  .auth .pts{grid-column:1;grid-row:2;align-self:start}
  .auth .kolom-kartu{grid-column:2;grid-row:1 / span 2}
  .auth-copy h1{font-family:var(--disp);font-size:clamp(30px,4vw,46px);font-weight:700;margin:var(--s4) 0}
  .auth-copy p{color:var(--muted);font-size:17px;max-width:38ch}
  .auth .pts{display:grid;gap:var(--s4)}
  .auth .pt{display:flex;gap:var(--s3);align-items:center;font-size:15px}
  .auth .pt .icon{color:var(--green);width:20px;height:20px;flex:none}
  /* Kembali MASUK KE DALAM isinya, sejajar dengan kolom kiri.

     Dulu position:fixed di pojok layar dengan alasan "tidak memakan ruang
     vertikal". Alasannya benar, akibatnya tidak: ia jadi terlihat seperti
     elemen nyasar yang tidak punya hubungan dengan halamannya, dan di layar
     lebar jaraknya dari isi bisa ratusan piksel.

     Bentuknya juga diturunkan: dulu pil bergaris dengan bayangan — seberat
     tombol utama untuk sesuatu yang cuma "mundur". Sekarang tautan biasa. */
  /* Isi halaman auth DIPUSATKAN TEGAK di layar.

     Aturan lama `.auth{min-height:calc(100vh - 60px)}` dibuang saat merombak
     grid, dan tidak ada yang menggantikannya — akibatnya isinya menempel ke
     atas dan menyisakan ruang kosong sangat besar di bawah, terutama di layar
     lebar. Dilaporkan Yanz: "posisi gak di tengah dan banyak space kosong".

     Dua baris grid, bukan flex terpusat: baris pertama untuk tombol Kembali
     (tetap di ATAS), baris kedua mengambil sisa ruang dan memusatkan isinya.
     Flex dengan justify-content:center akan ikut memusatkan tombol Kembali,
     dan ia jadi mengambang di tengah bersama isinya.

     100dvh, bukan 100vh: di peramban HP, 100vh dihitung dari layar TANPA bilah
     alamat, jadi halaman selalu lebih tinggi dari yang terlihat dan selalu
     bisa digulir sedikit walau isinya muat. */
  /* Halaman auth jadi TIGA baris setinggi layar: kepala, isi, kaki.

     Isinya di baris tengah yang mengambang, jadi kartunya tetap di tengah
     sementara logo terpaku di atas dan kaki di bawah. Ruang yang tersisa jadi
     BINGKAI, bukan kekosongan — itu perbedaan yang dirasakan orang walau
     luasnya sama persis.

     100dvh, bukan 100vh: di peramban HP, 100vh dihitung dari layar TANPA
     bilah alamat, jadi halamannya selalu sedikit lebih tinggi dari yang
     terlihat dan selalu bisa digulir walau isinya muat. */
  body.auth-page{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}
  body.auth-page .wrap{display:grid;align-items:center;padding-top:var(--s6);padding-bottom:var(--s6)}
  .auth-kepala,.auth-kaki{max-width:var(--max);margin:0 auto;width:100%;padding:0 var(--s5)}
  .auth-kepala{padding-top:var(--s6)}
  .auth-kepala .brand img{width:34px;height:34px}
  .auth-kepala .brand small{font-size:11px}
  .auth-kaki{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
    flex-wrap:wrap;padding-top:var(--s5);padding-bottom:var(--s6);
    border-top:1px solid var(--line);margin-top:var(--s6);
    font-size:12.5px;color:var(--muted-2);
  }
  .auth-kaki nav{display:flex;gap:var(--s5);flex-wrap:wrap}
  .auth-kaki a{color:var(--muted-2);transition:color .16s}
  .auth-kaki a:hover{color:var(--paper)}
  @media(max-width:640px){
    .auth-kaki{justify-content:center;text-align:center}
    .auth-kepala .brand small{display:none}
  }
  /* Halaman auth SATU KOLOM: kartunya dipusatkan mendatar dan dibatasi
     lebarnya. Tanpa batas ini kartu akan melebar sampai 1160px di layar
     lebar — sebuah form berisi dua kolom isian selebar itu terlihat seperti
     kesalahan, bukan seperti keputusan. */
  /* 520px, bukan 460px.

     460 terasa ramping di desktop: dengan padding kartu 32px di kiri-kanan,
     lebar isinya cuma 396px — sesempit kartu di HP, padahal layarnya jauh
     lebih luas. Kartunya jadi terlihat seperti tampilan HP yang kebetulan
     ditaruh di tengah layar besar.

     Tidak lebih dari itu: kolom isian yang terlalu lebar justru sulit dibaca,
     dan sebuah form dua kolom selebar 700px terlihat seperti kesalahan. */
  .wrap-solo{max-width:520px}
  .wrap-solo .formcard{width:100%}
  .auth-top{padding-top:var(--s6);align-self:start}
  .back-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-family:var(--disp);font-size:13.5px;font-weight:500;text-decoration:none;padding:7px 12px 7px 8px;border-radius:999px;transition:color .16s,background .16s}
  .back-link:hover{color:var(--paper);background:rgba(135,170,145,.08)}
  .back-link .icon{width:15px;height:15px;flex:none;transform:scaleX(-1)}
  /* Bantuan turun ke KAKI KARTU, tidak lagi bulatan melayang.

     Dua alasan. Pertama, bulatan hijau di kanan bawah berebut perhatian
     dengan tombol utama yang juga hijau — dua hijau terang di satu layar dan
     tidak ada yang menang. Kedua, dan ini yang menentukan: pojok layar adalah
     tempat orang BELUM butuh bantuan. Yang kepentok di halaman masuk mencari
     pertolongan SESUDAH gagal, dan saat itu matanya sudah di bawah, di sekitar
     tombol dan "Lupa password?".

     Di kaki kartu ia bergabung dengan rombongan yang sama — "Daftar di sini",
     "Lupa password?" — jadi orang yang buntu menemukan semuanya sekaligus.

     Tulisannya cukup "Butuh bantuan?" dan itu sendiri yang diklik. Menambah
     "Chat dengan kami" di belakangnya membuat satu baris mengerjakan dua hal:
     bertanya, lalu menyuruh. Pertanyaannya sudah cukup. */
  .kaki-bantu{display:block;text-align:center;margin-top:var(--s2);color:var(--muted-2);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;transition:color .16s}
  .kaki-bantu:hover{color:var(--paper)}
  /* Alamat email yang dituju, di halaman konfirmasi */
  .verif-mail{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--s4);padding:12px 14px;border:1px solid var(--line);background:var(--ink-3);border-radius:12px}
  .verif-mail .icon{color:var(--green);flex:none}
  .verif-mail span{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--paper);word-break:break-all}
  /* Catatan kecil di halaman Lupa/Reset Password */
  .rs-help{margin-top:var(--s5);color:var(--muted);font-size:12.5px;line-height:1.6;text-align:center}
  .rs-help a{color:var(--green);font-weight:500}
  .pw-note{font-size:12.5px;margin-top:7px;min-height:16px}
  .pw-note.ok{color:var(--green)}
  .pw-note.bad{color:var(--bad)}
  /* Form auth dipadatkan supaya halaman Daftar muat tanpa perlu di-scroll */
  /* Dikurung ke .formcard, BUKAN ke .auth.

     Aturan pemadat ini dulu terikat kerangka dua kolom, jadi halaman auth satu
     kolom (forgot, reset, verify, pin-atur) tidak pernah mendapatkannya —
     kolomnya lebih longgar dan kartunya lebih renggang tanpa alasan.
     Perbedaan yang tidak pernah disengaja siapa pun, cuma akibat selektor.

     Sejak build 725 halaman masuk juga satu kolom, jadi kalau dibiarkan
     terikat .auth ia akan ikut kehilangan aturannya. .formcard cuma dipakai
     enam halaman auth, jadi mengurungnya di situ aman dan seragam. */
  /* Isi kartunya ikut dilonggarkan seiring lebarnya. Kartu yang melebar tapi
     paddingnya tetap membuat isinya terlihat mendesak ke pinggir. */
  .formcard{padding:var(--s10) var(--s8)}
  .formcard h2{margin-bottom:var(--s4)}
  .formcard .field{margin-bottom:var(--s3)}
  .formcard .field label{margin-bottom:6px}
  .formcard .input{padding:11px 14px}
  @media(max-width:880px){
    /* Satu kolom, urutan apa adanya: judul → sub → tiga poin → kartu.

       Versi pertama menaruh kartu paling atas ("yang mau masuk tidak perlu
       membaca dulu") — halaman jadi dibuka dengan kotak isian tanpa satu kata
       pun yang menerangkan ini halaman apa. Versi kedua memperbaikinya tapi
       SEKALIAN memindahkan tiga poin ke bawah kartu, padahal yang diminta cuma
       kartunya jangan di atas judul. Yang benar juga yang paling sederhana:
       susun apa adanya.

       TIGA baris, bukan dua — .auth-copy dan .pts bersaudara, bukan
       induk-anak, jadi baris yang sama akan membuat keduanya menumpuk. */
    .auth{
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:auto auto auto;
      row-gap:0;padding:var(--s4) 0 var(--s10);
    }
    .auth-copy{grid-column:1;grid-row:1;align-self:auto}
    .auth .pts{grid-column:1;grid-row:2;align-self:auto;margin:var(--s6) 0 var(--s8)}
    .auth .kolom-kartu{grid-column:1;grid-row:3}
    .auth-copy h1{font-size:27px}
    .auth-copy p{font-size:15px}
    .formcard{padding:var(--s6)}
    .auth-top{padding-top:var(--s4)}
  }
  /* ===== Kartu auth =====
     Bahasa visualnya disalin dari kartu checkout (.cw-card / .cw-btn.primary /
     .cw-promo-in di checkout-wizard.php), bukan dikarang baru. Yang membuat
     kartu checkout terasa "kaca dan bergradasi" ada tiga:

       1. gradasi hijau turun di atas dasar #0C1D16
       2. garis kaca di pinggir atas — inset 0 1px 0 rgba(31,227,116,.18)
       3. bayangan luar yang dalam, supaya ia terangkat dari halaman

     Kartu auth lama tidak punya ketiganya: kotak rata --ink-2 dengan garis
     tipis. Itu sebabnya ia terasa hambar di sebelah kartu checkout.

     AMAN diubah langsung: .formcard cuma dipakai enam halaman auth
     (login, register, forgot, reset, verify, pin-atur). Sudah dicek. */
  .formcard{
    position:relative;
    border:1px solid var(--line-2);border-radius:20px;padding:var(--s10);
    background:
      linear-gradient(180deg, rgba(31,227,116,.13) 0%, rgba(31,227,116,.05) 42%, rgba(31,227,116,.015) 100%),
      #0C1D16;
    box-shadow:inset 0 1px 0 rgba(31,227,116,.18), 0 24px 60px rgba(0,0,0,.55);
  }
  /* Kolom isian CEKUNG: dasarnya lebih gelap dari kartunya, plus bayangan ke
     dalam. Kontras itu yang membuat "ini bisa diisi" terbaca tanpa dijelaskan —
     kartunya terangkat, kolomnya masuk.

     DIKURUNG di dalam .formcard. .input dipakai 22 berkas dan .btn-primary 41
     berkas; mengubahnya langsung akan merombak seluruh situs. */
  .formcard .input{
    background:var(--card-inner);border:1px solid var(--line);border-radius:10px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
    transition:border-color .15s,box-shadow .15s;
  }
  .formcard .input:focus{
    border-color:var(--green);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.25), 0 0 0 3px rgba(31,227,116,.1);
  }
  .formcard .btn-primary{
    background:linear-gradient(180deg, #5BFCA3 0%, #2AEA80 40%, var(--green-2) 78%, #0FA855 100%);
    color:#062013;border-color:rgba(31,227,116,.85);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(31,227,116,.22);
    transition:box-shadow .15s,transform .15s;
  }
  .formcard .btn-primary:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 26px rgba(31,227,116,.3);
    transform:translateY(-1px);
  }
  /* Cahaya lembut di belakang kartu. Latar situs sudah punya cahaya sendiri,
     tapi topengnya memudar di sepertiga atas — persis di bawahnya, tempat
     kartu auth berada, halamannya jadi rata gelap. Ini menambalnya HANYA di
     halaman auth, lewat kelas di <body>. */
  /* Lapisan ini MENIMPA body::after bawaan seluruhnya — sebuah elemen cuma
     punya satu ::after. Jadi teksturnya harus ikut ditulis ulang di sini,
     bukan cuma cahayanya; kalau tidak, halaman auth justru kehilangan bintik
     dan grid yang dipunyai halaman lain. Persis jenis kesalahan yang membuat
     aturan body::before ganda di atas jadi kode mati. */
  /* Latar halaman auth: MOTIF PASAR, bukan hiasan.

     Situs ini menjual alat trading, jadi yang mengisi ruang seharusnya datang
     dari dunia itu — bukan pola acak yang bisa ditempel di situs mana pun.
     Tiga lapis, dari belakang ke depan:

       1. grid harga — kotak-kotak halus seperti latar sebuah chart
       2. dua garis ekuitas yang naik melintasi layar, satu tebal satu tipis
       3. cahaya hijau lembut yang jatuh tepat di belakang kartu

     Topengnya memusat ke kartu dan memudar ke tepi, jadi motifnya paling
     terbaca di sekitar isi dan menghilang di sudut — mengisi ruang tanpa
     menarik perhatian dari kotak isian.

     Lapisan ini MENIMPA body::after bawaan seluruhnya: sebuah elemen cuma
     punya satu ::after. Teksturnya karena itu ikut ditulis ulang di sini,
     bukan cuma cahayanya. Persis jenis kesalahan yang membuat aturan
     body::before ganda di atas jadi kode mati selama entah berapa build. */
  body.auth-page::after{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cpath d='M0 700 L160 640 L300 672 L440 560 L580 604 L720 470 L860 520 L1000 380 L1140 430 L1280 300 L1440 348 L1600 230' fill='none' stroke='%231FE374' stroke-opacity='.20' stroke-width='2'/%3E%3Cpath d='M0 790 L170 760 L320 782 L470 700 L620 736 L770 660 L920 692 L1070 596 L1220 634 L1380 540 L1600 486' fill='none' stroke='%231FE374' stroke-opacity='.09' stroke-width='1.4'/%3E%3C/svg%3E"),
      linear-gradient(rgba(135,170,145,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(135,170,145,.045) 1px,transparent 1px),
      radial-gradient(760px 520px at 50% 46%, rgba(31,227,116,.09), transparent 64%);
    background-size:150px 150px, 100% 100%, 52px 52px, 52px 52px, auto;
    background-position:0 0, center bottom, 0 0, 0 0, center;
    background-repeat:repeat, no-repeat, repeat, repeat, no-repeat;
    -webkit-mask-image:radial-gradient(1250px 900px at 50% 48%,#000 0%,rgba(0,0,0,.55) 58%,transparent 88%);
            mask-image:radial-gradient(1250px 900px at 50% 48%,#000 0%,rgba(0,0,0,.55) 58%,transparent 88%);
  }

  .formcard h2{font-family:var(--disp);font-size:24px;font-weight:600;margin-bottom:var(--s2)}
  .formcard .fsub{color:var(--muted);font-size:14.5px;margin-bottom:var(--s6)}
  .frow{display:flex;justify-content:space-between;align-items:center;margin:calc(var(--s2)*-1) 0 var(--s6)}
  .frow a{color:var(--green);font-size:13.5px;font-weight:500;cursor:pointer}

  /* ===== Centang "Ingat saya" di halaman masuk =====
     .frow sudah space-between, jadi centangnya cukup jadi anak pertama —
     tata letaknya mengikuti sendiri tanpa aturan tambahan. */
  .ingat-cek{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
  .ingat-cek input{accent-color:var(--green);width:15px;height:15px;flex:none;cursor:pointer}
  .ingat-cek span{font-size:13.5px;color:var(--muted)}
  /* Lama berlakunya TIDAK lagi ditulis di sebelah centang — angka mentah di
     situ membuat formnya ramai. Sekarang ada di atribut title. Aturan untuk
     <small> dipertahankan supaya tidak ada yang telanjang kalau nanti dipakai
     lagi di tempat lain dalam label yang sama. */
  .ingat-cek small{font-size:11px;color:var(--muted-2);margin-left:3px}
  .ingat-cek:hover span{color:var(--paper)}
  /* Baris "Masuk sebagai ... · Bukan kamu?" — muncul cuma kalau kolom emailnya
     terisi dari ingatan. Sengaja di BAWAH tombol: yang lanjut masuk tidak perlu
     membacanya sama sekali, dan yang perlu mengganti akun akan mencarinya
     justru sesudah sadar namanya bukan namanya. */
  .ingat-bukan{margin-top:var(--s4);text-align:center;font-size:12.5px;color:var(--muted-2);line-height:1.5}
  .ingat-bukan strong{color:var(--muted);font-weight:600;word-break:break-all}
  .ingat-bukan a{color:var(--green);cursor:pointer}
  .switch-auth{text-align:center;color:var(--muted);font-size:14px;margin-top:var(--s5)}
  .switch-auth a{color:var(--green);font-weight:500;cursor:pointer}
  .auth-toggle{display:flex;background:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:var(--s6);position:relative}
  .auth-toggle button{flex:1;font-family:var(--disp);font-weight:600;font-size:14.5px;padding:11px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:999px;z-index:1;transition:color .2s}
  .auth-toggle button.on{color:var(--green-ink)}
  .auth-toggle .slider{position:absolute;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);background:linear-gradient(180deg,var(--green),var(--green-2));border-radius:999px;transition:transform .25s ease;box-shadow:0 6px 18px rgba(31,227,116,.3)}
  .auth-toggle.reg .slider{transform:translateX(100%)}
  .auth-form{display:none}.auth-form.on{display:block;animation:rise .3s ease}

  /* Testimoni */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s6)}
  .testi{background:var(--ink-2);border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);padding:var(--s6)}
  .testi .stars{color:var(--gold);letter-spacing:2px;margin-bottom:var(--s3)}
  .testi p{color:var(--paper);font-size:14.5px;margin-bottom:var(--s5)}
  .testi .who{display:flex;align-items:center;gap:var(--s3)}
  .testi .wa{width:38px;height:38px;border-radius:50%;background:var(--ink-3);color:var(--green);display:grid;place-items:center;font-family:var(--disp);font-weight:700;flex:none}
  .testi .wn{font-family:var(--disp);font-weight:600;font-size:14px}.testi .wp{color:var(--muted);font-size:12px}

  /* Testimoni gaya media sosial (feed) */
  .feed{max-width:640px;margin:var(--s6) auto 0;display:grid;gap:var(--s5)}
  .composer{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s6);box-shadow:0 16px 44px rgba(0,0,0,.3)}
  .composer .crow{display:flex;gap:var(--s3);align-items:center}
  .composer .cav{width:44px;height:44px;border-radius:50%;background:var(--ink-3);color:var(--muted);display:grid;place-items:center;flex:none}
  .composer .cin{flex:1;background:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:13px 20px;color:var(--muted);cursor:pointer;font-size:14.5px}
  .composer .cin:hover{border-color:var(--line-2)}
  .composer .clogin{margin-top:var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:var(--s4)}
  .post{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:0 10px 30px rgba(0,0,0,.26)}
  .post.pinned{border-color:rgba(227,192,107,.4);background:linear-gradient(180deg,rgba(227,192,107,.05),var(--ink-2))}
  .pin-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:600;font-size:11px;color:var(--gold);margin-bottom:var(--s4);text-transform:uppercase;letter-spacing:.06em}
  .post-head{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s4)}
  .post-head .pav{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--disp);font-weight:700;background:linear-gradient(150deg,var(--green),var(--green-2));color:var(--green-ink)}
  .post-head .pn{font-family:var(--disp);font-weight:600;display:flex;align-items:center;gap:7px}
  .post-head .verified{color:var(--green);display:inline-flex}
  .post-head .pm{color:var(--muted);font-size:12.5px}
  .post .rating{color:var(--gold);letter-spacing:2px;margin-bottom:var(--s3);font-size:15px}
  .post .ptext{font-size:15px;margin-bottom:var(--s5)}
  .post-foot{display:flex;gap:var(--s6);color:var(--muted);font-size:13.5px;border-top:1px solid var(--line);padding-top:var(--s4)}
  .post-foot .pf{display:flex;align-items:center;gap:7px;cursor:pointer}.post-foot .pf:hover{color:var(--paper)}
  .post-foot .pf .icon{width:17px;height:17px}

  /* Konsultasi */
  .konsul{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s10);margin-top:var(--s6);align-items:start}
  .topic-list{display:grid;gap:var(--s3);margin-top:var(--s5)}
  .topic{display:flex;align-items:center;gap:var(--s3);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
  .topic .ti{width:40px;height:40px;border-radius:11px;background:rgba(227,192,107,.12);color:var(--gold);display:grid;place-items:center;flex:none}
  .topic b{font-family:var(--disp);font-weight:600;display:block}.topic p{color:var(--muted);font-size:13.5px}

  /* Admin */
  .admin-nav{background:#0A1510;border-bottom:1px solid var(--line)}
  .admin-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s6)}
  .metric{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);position:relative;overflow:hidden}
  .metric .mt{display:flex;align-items:center;gap:var(--s2);color:var(--muted);font-size:13px}
  .metric .mv{font-family:var(--disp);font-weight:700;font-size:32px;margin-top:var(--s3)}
  .metric .accent{position:absolute;left:0;top:0;bottom:0;width:3px}
  .metric.green .accent{background:var(--green)}.metric.gold .accent{background:var(--gold)}
  .metric.info .accent{background:var(--info)}.metric.bad .accent{background:var(--bad)}
  .admin-tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s10) 0 0;border-bottom:1px solid var(--line)}
  .atab{font-family:var(--disp);font-weight:500;font-size:14.5px;color:var(--muted);padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .atab.on{color:var(--paper);border-bottom-color:var(--green)}
  .tablecard{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);margin-top:var(--s6);overflow:hidden}
  .tch{display:flex;align-items:center;justify-content:space-between;padding:var(--s6) var(--s6) var(--s4);flex-wrap:wrap;gap:var(--s3)}
  .tch h3{font-family:var(--disp);font-size:19px;font-weight:600}
  .table-scroll{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
  thead th{text-align:left;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);padding:var(--s3) var(--s6);border-bottom:1px solid var(--line)}
  tbody td{padding:var(--s4) var(--s6);border-bottom:1px solid var(--line)}
  tbody tr:last-child td{border-bottom:0}tbody tr{cursor:pointer}tbody tr:hover{background:rgba(255,255,255,.02)}
  td .u{font-weight:500}td .sub{color:var(--muted);font-size:12.5px}
  .linkbtn{color:var(--green);font-family:var(--disp);font-weight:600;font-size:13px;cursor:pointer}

  /* MODAL */
  .modal-overlay{position:fixed;inset:0;background:rgba(4,10,7,.74);backdrop-filter:blur(6px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
  .modal-overlay.open{display:flex}
  .modal{background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-xl);max-width:540px;width:100%;max-height:88vh;overflow:auto;padding:var(--s8);position:relative;box-shadow:var(--sh)}
  .modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
  .modal-x:hover{color:var(--paper);border-color:var(--line-2)}
  .modal h3{font-family:var(--disp);font-size:22px;font-weight:600;margin-bottom:var(--s2);padding-right:var(--s8)}
  .modal .msub{color:var(--muted);font-size:14px;margin-bottom:var(--s6)}
  .modal-actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
  .modal-actions .btn{flex:1;min-width:120px}
  .kv{display:grid;gap:var(--s3);margin:var(--s5) 0;border-top:1px solid var(--line);padding-top:var(--s5)}
  .kv .r{display:flex;justify-content:space-between;font-size:14px}.kv .r span{color:var(--muted)}.kv .r b{font-family:var(--disp);font-weight:600}

  /* === Penegasan kedalaman & pembeda antar bagian (untuk user awam) === */
  .card,.val,.stepc,.testi,.mon-card,.metric,.oc{box-shadow:0 10px 30px rgba(0,0,0,.28)}
  .panel{box-shadow:0 16px 44px rgba(0,0,0,.30)}
  .panel-head{padding-bottom:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
  .sec-head h2{position:relative;padding-bottom:var(--s4)}
  .sec-head h2::after{content:'';position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--gold))}
  .sec-head.center h2::after{left:50%;transform:translateX(-50%)}
  section.alt{background:linear-gradient(180deg,#0C1913,#070F0B)}
  /* garis pemisah tegas di antara bagian beranda */
  .sec-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);margin:0 auto;max-width:var(--max)}

  /* Reveal */
  .rv{opacity:0;transform:translateY(14px);animation:rise .6s ease forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}
  @keyframes rise{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.rv{animation:none;opacity:1;transform:none}.pulse{animation:none}}

  @media (max-width:920px){
    .hero-grid,.detail,.auth,.konsul,.grid-2{grid-template-columns:1fr;gap:var(--s10)}
    .vals{grid-template-columns:1fr 1fr}
    .grid3,.grid-cat,.steps,.owned,.admin-metrics,.testi-grid{grid-template-columns:1fr 1fr}
    .navlinks{display:none}
    .search{min-width:0;flex:1}
  }
  @media (max-width:600px){
    .grid3,.grid-cat,.steps,.owned,.admin-metrics,.vals,.testi-grid{grid-template-columns:1fr}
    section.block{padding:var(--s16) 0}.hero{padding:var(--s12) 0}
    .band,.formcard,.modal{padding:var(--s8)}
  }

/* ===== Tambahan: toggle auth dengan tautan (login.php / register.php) & show-password ===== */
.auth-toggle a{flex:1;text-align:center;font-family:var(--disp);font-weight:600;font-size:14.5px;padding:11px;color:var(--muted);cursor:pointer;border-radius:999px;z-index:1;text-decoration:none;transition:color .2s}
.auth-toggle a.on{color:var(--green-ink)}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:64px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--green);font-family:var(--disp);font-weight:600;font-size:13px;cursor:pointer;padding:6px 10px}

/* ===== SCROLLBAR SERAGAM DENGAN TEMA =========================================
   Scrollbar bawaan browser (putih/abu terang) tabrakan dengan tema gelap.
   Aturan global ini menyatukan SEMUA area yang bisa di-scroll — halaman, panel,
   maupun geseran mendatar — tanpa perlu menandai satu per satu.
   Selector `*` sengaja dipakai supaya kelas yang lebih spesifik (mis. .hscroll,
   .thin-scroll) tetap bisa menimpa ukurannya bila perlu. */
/* ---------------------------------------------------------------------------
   BATANG GULIR

   JANGAN menyebut scrollbar-width / scrollbar-color pada elemen yang sama
   dengan aturan ::-webkit-scrollbar. Kalau keduanya disebut, browser berbasis
   Chrome/WebKit MENGABAIKAN seluruh ::-webkit-scrollbar dan memakai batang
   gulir standarnya — sehingga semua gaya di bawah ini tak pernah terpakai dan
   yang tampil justru batang gulir bawaan. Tidak ada galat, tidak ada peringatan.

   Karena itu keduanya dipisah:
     - Chrome / Safari / Edge  -> ::-webkit-scrollbar
     - Firefox (tak mengenal pseudo-element itu) -> scrollbar-width/color
   --------------------------------------------------------------------------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(31,227,116,.42);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(31,227,116,.60);background-clip:padding-box}
*::-webkit-scrollbar-thumb:active{background:rgba(31,227,116,.78);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:rgba(31,227,116,.30) transparent}
}

/* --- Geseran mendatar (carousel produk, promo, chip, dsb) ---------------------
   Area ini sudah punya panah / bisa di-swipe / ada tulisan "Geser ke samping",
   jadi batang scroll-nya tidak diperlukan dan justru terlihat mengganggu.
   Disembunyikan dengan cara yang dikenali SEMUA browser (bukan hanya Chrome),
   karena sebelumnya Firefox tetap menampilkan batang terang bawaannya.
   Awalan `html` dipakai supaya menang atas aturan lama di masing-masing halaman. */
html .hscroll, html .dgrid, html .docs, html .rev-scroll, html .owned,
html .mini-cat, html .d-prods, html .d-mini, html .pc-track,
html .rw-chips, html .fseg, html .adm-side{
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* Edge lama */
}
html .hscroll::-webkit-scrollbar, html .dgrid::-webkit-scrollbar,
html .docs::-webkit-scrollbar, html .rev-scroll::-webkit-scrollbar,
html .owned::-webkit-scrollbar, html .mini-cat::-webkit-scrollbar,
html .d-prods::-webkit-scrollbar, html .d-mini::-webkit-scrollbar,
html .pc-track::-webkit-scrollbar, html .rw-chips::-webkit-scrollbar,
html .fseg::-webkit-scrollbar, html .adm-side::-webkit-scrollbar{
  width:0;height:0;display:none;     /* Chrome, Safari, Edge */
}

/* --- Tabel yang bisa digeser: batang TETAP ada (biar ketahuan masih ada kolom
       di samping), tapi warnanya ikut tema — termasuk di Firefox. --- */
html .table-scroll, html .tbl-wrap, html .twrap{
  scrollbar-width:thin;
  scrollbar-color:rgba(31,227,116,.30) transparent;
}

/* Scrollbar tipis (riwayat, dsb) */
.thin-scroll{scrollbar-width:thin;scrollbar-color:rgba(31,227,116,.28) transparent}
.thin-scroll::-webkit-scrollbar{width:6px;height:6px}
.thin-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(31,227,116,.42), rgba(31,227,116,.18));border-radius:6px}
.thin-scroll::-webkit-scrollbar-track{background:transparent}
/* Menu profil user (dropdown) */
.pmenu{position:relative}
.pmenu-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;min-width:190px;box-shadow:0 16px 40px rgba(0,0,0,.5);display:none;z-index:2147483000}
.pmenu{position:relative;z-index:2147483000}
.pmenu-pop.open{display:block}
.pmenu-pop a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--paper);font-size:14px;font-weight:500}
.pmenu-pop a:hover{background:var(--panel2)}
.pmenu-pop a.danger{color:var(--bad)}
.pmenu-pop .sep{height:1px;background:var(--line);margin:4px 0}
.pmenu-pop .phead{padding:10px 12px 8px}
.pmenu-pop .phead b{display:block;font-family:var(--disp);font-size:14px}
.pmenu-pop .phead small{color:var(--muted);font-size:12px}
  /* ===== BARIS ATAS MELAYANG =====
     Dipakai halaman yang header-nya dicabut (katalog, testimoni, konsultasi).
       kiri  : tombol Kembali
       kanan : menu profil (atau Masuk/Daftar untuk tamu)
     Melayang supaya tidak memakan ruang vertikal. */
  /* Lebarnya DISEJAJARKAN dengan isi halaman (bukan menempel pojok browser).
     Tombolnya jadi segaris dengan judul & kartu produk — terlihat disengaja,
     bukan seperti tempelan yang nyangkut di sudut layar. */
  .float-top{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:90;
             width:min(calc(100% - 48px), var(--max));
             display:flex;align-items:center;justify-content:space-between;gap:12px;
             pointer-events:none}
  .float-top > *{pointer-events:auto}
  .ft-right{display:flex;align-items:center;gap:8px}
  /* Latar buram supaya tetap terbaca saat melayang di atas isi halaman */
  .float-top .back-link,
  .float-top .acct-pill{background:rgba(12,20,16,.92);backdrop-filter:blur(10px)}
  .float-top .btn{backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
  @media(max-width:820px){ .float-top{top:16px;width:calc(100% - 32px)} }

  /* ===== PIL AKUN =====
     SATU pil, dua bagian:
       kiri  = tombol Dashboard (langsung ke tujuan yang paling sering dipakai)
       kanan = foto profil (membuka menu)
     Nama akun DIBUANG dari pil. Orang sudah tahu dirinya siapa — yang dia butuhkan
     itu PINTU, bukan papan nama. Namanya tetap tampil di dalam menunya. */
  .acct-pill{display:inline-flex;align-items:center;height:44px;box-sizing:border-box;margin:0;
             background:rgba(12,20,16,.92);backdrop-filter:blur(10px);
             border:1px solid var(--line-2);border-radius:999px;padding:3px 3px 3px 4px;gap:2px;
             box-shadow:0 6px 18px rgba(0,0,0,.35);transition:border-color .18s}
  .acct-pill:hover{border-color:rgba(31,227,116,.5)}

  .ap-dash{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 13px;
           border-radius:999px;color:var(--paper);font-family:var(--disp);font-size:13.5px;font-weight:600;
           text-decoration:none;white-space:nowrap;transition:background .16s,color .16s}
  .ap-dash .icon{width:16px;height:16px;color:var(--green)}
  .ap-dash:hover{background:rgba(31,227,116,.12);color:var(--green)}

  .ap-ava{display:inline-flex;align-items:center;gap:3px;height:36px;padding:0 6px 0 3px;
          border:0;background:none;border-radius:999px;cursor:pointer;transition:background .16s}
  .ap-ava:hover{background:rgba(255,255,255,.06)}
  .ap-img{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
          background:linear-gradient(150deg,var(--green),var(--green-2));color:var(--green-ink);
          font-family:var(--disp);font-weight:700;font-size:13px}
  .ap-img img{width:100%;height:100%;object-fit:cover}
  .ap-caret{width:13px;height:13px;color:var(--muted);transform:rotate(90deg)}

  /* Tombol tamu: DUA tombol di layar lebar, SATU tombol di HP.
     Di layar sempit dua tombol bersebelahan gampang salah pencet — dan "Masuk"
     vs "Daftar" itu dua tujuan yang sangat berbeda. */
  .ft-gabung{display:none}
  @media(max-width:560px){
    .ft-pisah{display:none}
    .ft-gabung{display:inline-flex}
    /* HP: teks "Dashboard" disembunyikan, ikonnya saja — hemat lebar,
       supaya tombol Kembali tidak terdorong keluar layar. */
    .ap-dash span{display:none}
    .ap-dash{padding:0 11px}
  }

  /* Tombol tamu: DUA tombol di layar lebar, SATU tombol di HP.
     Di layar sempit, dua tombol bersebelahan gampang salah pencet — jempol tidak
     seakurat kursor, dan "Masuk" vs "Daftar" itu dua tujuan yang sangat berbeda. */

  /* Pil profil TETAP tampil di HP (nama + foto). Yang dipendekkan cuma namanya,
     supaya tidak mendorong tombol Kembali keluar layar. */
  @media(max-width:480px){
    .float-top .acct-pill .ap-name{max-width:80px}
  }

  /* --- Tombol tamu --- */
  .ft-gabung{display:none}                       /* layar lebar: dua tombol terpisah */
  @media(max-width:560px){
    .ft-pisah{display:none}                      /* HP: digabung jadi satu tombol */
    .ft-gabung{display:inline-flex}
  }

  /* --- Tombol Dashboard di samping foto profil --- */
  @media(max-width:560px){
  }

/* ============================================================
   FONDASI MOBILE (v-mobile) — kenyamanan di HP. Hanya ≤560px,
   desktop TIDAK terpengaruh.
   ============================================================ */
@media (max-width:560px){
  /* Input 16px: cegah auto-zoom iOS + lebih nyaman disentuh */
  .input, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"], input[type="date"],
  select, textarea{ font-size:16px }
  /* Target jempol lebih nyaman */
  .btn{ padding:13px 20px }
  .btn-sm{ padding:11px 16px; font-size:14px }
  .iconbtn{ min-height:40px }
  /* Panel & kartu: padding pas, tidak boros di layar kecil */
  .panel{ padding:var(--s5) }
  .card{ padding:var(--s5) }
  .card h3{ font-size:19px }
  .card .benefit{ font-size:14px }
  .card-visual{ height:104px; margin:var(--s4) 0 }
  /* Sisi container lebih rapat → konten lebih lega */
  .wrap{ padding:0 var(--s4) }
  /* Jarak antar field sedikit lebih rapat */
  .field{ margin-bottom:var(--s4) }
  /* Judul hero/section tidak kegedean */
  .disp{ letter-spacing:-.01em }
  /* Grid → 1 kolom di HP kecil (produk, langkah, dsb) */
  .steps, .grid3, .grid-cat, .mon-grid, .grid-2, .set-grid{ grid-template-columns:1fr }
  .vals{ grid-template-columns:1fr 1fr; gap:var(--s4) }
  /* Band CTA: padding tidak berlebihan */
  .band{ padding:var(--s8) var(--s5) }
  .band h2{ font-size:24px }
  .band p{ font-size:15px }
  /* Tombol CTA hero: menumpuk penuh, gampang dipencet */
  .hero-cta{ flex-direction:column; align-items:stretch }
  .hero-cta .btn{ width:100% }
  .hero .lede{ font-size:16px }
  /* Jarak vertikal section lebih rapat di HP */
  .hero{ padding:var(--s10) 0 }
  .sec-head{ margin-bottom:var(--s8) }
  /* Modal: padding & sisi lebih pas, hampir penuh layar */
  .modal{ padding:var(--s5); border-radius:18px }
  .modal-overlay{ padding:12px }
  /* Pengaman: media & teks panjang tidak menembus layar HP */
  img, video, iframe{ max-width:100%; height:auto }
  .panel, .card, .wrap, .msg, .conv-prev, .conv-topic, .jawab-b, .cd-row{ overflow-wrap:break-word }
}

/* ============================================================
   PANEL BERTEKSTUR — JALUR CHECKOUT
   Satu resep untuk semua halaman jalur CO (wizard, isi data,
   validasi IB). Ditaruh di sini, bukan disalin ke tiap halaman,
   supaya sekali setel semuanya ikut berubah.
   ============================================================ */

/* A. Panel besar — tekstur penuh: gradien, pendar, kisi halus.
      Aman diberi position:relative karena tak ada yang sticky. */
.mtk-tex,
.cw-panel, .cw-paycard,
.cp-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(31,227,116,.10), transparent 62%),
    linear-gradient(180deg, rgba(18,40,30,.96), rgba(7,16,11,.96));
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 var(--line-top);
}
.mtk-tex::before,
.cw-panel::before, .cw-paycard::before,
.cp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(135,170,145,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135,170,145,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}
.mtk-tex > *,
.cw-panel > *, .cw-paycard > *,
.cp-card > * { position: relative; }

/* B. Kartu ringkasan samping — SENGAJA tanpa lapisan kisi.
      Kartu ini position:sticky di layar lebar dan position:static di
      layar kecil. Lapisan absolute di dalamnya akan "lepas" ke elemen
      lain saat static, dan kisinya bisa menutupi seluruh halaman.
      Cukup gradien + bayangan; position-nya tidak disentuh sama sekali. */
.cw-sum, .cp-sum, .iv-sumcard {
  /* Kisi ditaruh sebagai LAPISAN BACKGROUND, bukan elemen ::before.
     Kartu ini position:sticky di layar lebar dan static di layar kecil —
     lapisan absolute di dalamnya akan "lepas" saat static dan kisinya bisa
     menutupi seluruh halaman. Sebagai background, risiko itu tidak ada. */
  background-image:
    linear-gradient(rgba(135,170,145,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135,170,145,.045) 1px, transparent 1px),
    radial-gradient(130% 85% at 50% -15%, rgba(31,227,116,.12), transparent 62%),
    linear-gradient(180deg, rgba(18,40,30,.96), rgba(7,16,11,.96));
  background-size: 26px 26px, 26px 26px, auto, auto;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 1px 0 var(--line-top);
}

/* C. Kartu yang tampil berulang: pendar lembut saja. Kisi yang
      bertumpuk-tumpuk membuat halaman terlihat ramai. */
.iv-card {
  background:
    radial-gradient(140% 100% at 50% -30%, rgba(31,227,116,.07), transparent 60%),
    linear-gradient(180deg, rgba(18,40,30,.94), rgba(7,16,11,.94));
  box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 var(--line-top);
}

/* ============================================================
   BARIS ATAS JALUR CO — tombol Kembali sebaris dengan stepper
   align-items:stretch membuat tinggi tombol otomatis mengikuti
   stepper, jadi tak perlu menebak angka piksel yang akan meleset
   begitu isi stepper berubah.
   Di layar kecil tombol ini disembunyikan — topbar sudah punya
   tombol Kembali, dan barisnya memakan tinggi yang membuat
   halaman ikut ter-scroll.
   ============================================================ */
.co-head{display:flex;align-items:stretch;gap:10px;margin-bottom:18px}
.co-head > .os-steps{flex:1 1 auto;min-width:0;margin-bottom:0}
.co-back{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:0 18px;border-radius:13px;
  border:1px solid rgba(31,227,116,.20);color:var(--paper);font-size:13.5px;font-weight:600;
  text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;transition:.15s;
  background:linear-gradient(180deg, rgba(31,227,116,.12), rgba(31,227,116,.035)), #0E211A;
  box-shadow:inset 0 1px 0 rgba(31,227,116,.14), 0 2px 10px rgba(0,0,0,.24)}
.co-back:hover{border-color:rgba(31,227,116,.45);
  background:linear-gradient(180deg, rgba(31,227,116,.22), rgba(31,227,116,.07)), #0E211A;
  box-shadow:inset 0 1px 0 rgba(31,227,116,.22), 0 8px 20px rgba(0,0,0,.3)}
.co-back .icon{width:14px;height:14px}
@media(max-width:900px){ .co-head > .co-back{display:none} }

/* Tombol utama di bawah kartu produk — selebar kartunya. */
.co-aside-act{margin-top:12px}
.co-aside-act > .cw-btn,
.co-aside-act > button,
.co-aside-act > a{width:100%;justify-content:center}

  /* ===== Layar PIN di halaman masuk =====
     Tampil menggantikan form kata sandi, bukan di sebelahnya — dua form masuk
     di satu layar membuat orang ragu yang mana yang harus diisi. */
  .pin-sapa{font-size:16px;color:var(--paper);text-align:center;margin-top:var(--s2)}
  .pin-akun{font-size:12.5px;color:var(--muted-2);text-align:center;margin-bottom:var(--s5);word-break:break-all}
  /* ===== Kotak PIN: enam titik, dan BISA DIISI =====

     Yang membuat versi pertama rusak bukan titik-titiknya, melainkan kolom
     aslinya: lebar 1px di left:-9999px. Mustahil diklik, jadi satu-satunya
     jalan masuk adalah JavaScript memindahkan fokus — dan begitu fokus lepas
     ke apa pun di halaman, mengetik tidak menghasilkan apa pun, tanpa satu pun
     petunjuk bahwa titiknya harus diklik dulu.

     Sekarang kolomnya MENUTUPI SELURUH KOTAK (inset:0) dan tetap tembus
     pandang. Ia ada di atas titik-titiknya, jadi mengetuk di mana pun di dalam
     kotak langsung mengenai kolomnya — tanpa JavaScript sama sekali untuk
     sekadar bisa diisi. JavaScript cuma mengurus tampilan titiknya, dan kalau
     ia gagal dimuat, kolomnya tetap bisa diketik dan dikirim. */
  .pin-kotak{
    position:relative;display:flex;justify-content:center;align-items:center;gap:13px;
    height:58px;margin-bottom:var(--s5);
    background:var(--card-inner);border:1px solid var(--line);border-radius:10px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
    transition:border-color .15s,box-shadow .15s;
  }
  .pin-kotak:focus-within{
    border-color:var(--green);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.25), 0 0 0 3px rgba(31,227,116,.1);
  }
  /* font-size 16px WAJIB: di bawah itu, Safari iOS memperbesar seluruh halaman
     begitu kolomnya difokus, dan tata letaknya melompat. */
  .pin-isi{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;cursor:pointer}
  .pin-titik{width:13px;height:13px;border-radius:50%;border:1px solid var(--line-2);pointer-events:none;transition:background .13s,border-color .13s,transform .13s}
  .pin-titik.isi{background:var(--green);border-color:var(--green);transform:scale(1.08)}
  .pin-titik.kini{border-color:rgba(31,227,116,.6)}
  .pin-jalan{text-align:center;margin-top:var(--s4);font-size:12.5px;color:var(--muted-2);line-height:1.9}
  .pin-jalan a{color:var(--green);cursor:pointer}
  .pin-jalan span{margin:0 6px;color:var(--muted-2)}

  /* ===== Halaman atur PIN ===== */
  .pin-ok-ikon{text-align:center;margin-bottom:var(--s3)}
  .pin-ok-ikon .icon{width:40px;height:40px;color:var(--green)}
  .pin-ok-ikon.bahaya .icon{color:var(--bad)}
  .pin-ok-judul{text-align:center;margin-bottom:var(--s4)}
  .pin-sub{color:var(--muted);font-size:13.5px;line-height:1.7;margin:0 0 var(--s5)}
  /* Dua baris keadaan menggantikan paragraf penjelasan: yang baru selesai
     membuat PIN tidak perlu dijelaskan lagi apa itu PIN, ia perlu tahu
     keadaan sekarang bagaimana. */
  .pin-ok-tabel{background:var(--card-main);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s5)}
  .pin-ok-tabel div{display:flex;justify-content:space-between;gap:var(--s3);font-size:12.5px;padding:5px 0}
  .pin-ok-tabel span{color:var(--muted-2)}
  .pin-ok-tabel b{color:var(--muted);font-weight:500}
  .pin-ok-tabel b.ok{color:var(--green)}
  /* Kosong saat dimuat — tanpa min-height, supaya tidak ada ruang menganga di
     bawah kolom sebelum ada yang perlu dikatakan. Isinya menggeser tombol ke
     bawah sedikit saat muncul, dan itu justru menarik perhatian. */
  .pin-cocok{font-size:12px;line-height:1.6;margin-top:6px}
  .pin-cocok.ok{color:var(--green)}
  .pin-cocok.salah{color:var(--bad)}
  .pin-bantu{font-size:11.5px;color:var(--muted-2);line-height:1.6;margin-top:6px}
  /* Tindakan yang MERUSAK: tautan kecil, bukan tombol terang. */
  .pin-jalan a.bahaya{color:var(--bad)}
  .btn-bahaya{background:transparent;border:1px solid var(--bad);color:var(--bad)}
  .btn-bahaya:hover{background:rgba(255,122,122,.1)}

  /* ===== Penyesuaian kartu auth (build 726) ===== */
  /* Kembali pindah KE DALAM kartu. Dulu di pojok layar (terlihat nyasar), lalu
     dipindah ke atas .wrap — sejajar kartunya, tapi di layar tinggi jaraknya
     bisa 400px lebih ke bawah dan ia jadi yatim lagi. Dua kali memindahkan
     masalah, bukan menyelesaikannya. Di dalam kartu ia jelas milik kartu itu. */
  .kartu-top{margin:calc(var(--s2) * -1) 0 var(--s4)}
  .kartu-top .back-link{margin-left:-8px}
  /* Tautan kecil di bawah sebuah kolom isian — konteksnya kolom itu, bukan
     seluruh form. Rata kanan supaya tidak tertukar dengan label di kiri. */
  .field-lain{display:block;text-align:right;margin-top:6px;font-size:12px;color:var(--muted-2);text-decoration:underline;text-underline-offset:3px}
  .field-lain:hover{color:var(--paper)}
  .rata-tengah{text-align:center}

  /* ===== Halaman Akun Saya (build 733) =====
     DIKURUNG ke body.akun-page. Kelas .panel dipakai 18 berkas — dashboard,
     transaksi, poin, dan semua halaman admin. Mengubahnya langsung merombak
     semuanya sekaligus, dan halaman admin punya tabel padat yang belum tentu
     cocok dengan gradasi. Disebar bertahap sesudah halaman ini dinilai. */
  body.akun-page .panel{
    background:
      linear-gradient(180deg, rgba(31,227,116,.07) 0%, rgba(31,227,116,.025) 45%, rgba(31,227,116,.008) 100%),
      #0C1D16;
    border:1px solid var(--line-2);
    box-shadow:inset 0 1px 0 rgba(31,227,116,.12), 0 14px 34px rgba(0,0,0,.42);
  }
  /* Gradasinya SETENGAH dari kartu checkout (.07 vs .13). Halaman dalam punya
     kartu banyak dan berdempetan; kekuatan penuh membuat halaman terasa
     seperti tumpukan tombol. */
  body.akun-page .panel .input{
    background:var(--card-inner);box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  }
  body.akun-page .panel .input:focus{
    border-color:var(--green);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.25), 0 0 0 3px rgba(31,227,116,.1);
  }

  /* Dua kolom: kiri kartu identitas (pendek), kanan form-formnya.
     minmax(0,1fr) bukan 1fr — lebar minimum kolom grid adalah auto, jadi isi
     yang lebar membuat grid meluber keluar layar. */
  /* Perbandingan kolomnya .82/1.18, bukan .78/1.22.

     Dengan kartu PIN pindah ke kiri, kolom kiri sekarang berisi dua kartu dan
     butuh sedikit lebih banyak ruang supaya sapaan dan emailnya tidak melipat
     di tengah nama. */
  .akun{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s5);align-items:start}
  .akun-kol{display:grid;gap:var(--s5);min-width:0}
  /* Kolom kiri MENGIKUTI saat digulir.

     Isinya jauh lebih pendek daripada kolom kanan — begitu orang menggulir ke
     Ubah Password, kolom kiri sudah lewat dan yang tersisa di sebelahnya cuma
     ruang kosong sepanjang layar. Sticky membuat ruang itu terisi identitas
     yang memang relevan sepanjang halaman.

     top-nya HARUS menghitung tinggi topbar, yang position:sticky di
     assets/app.css baris 62. Tanpa itu kartunya menyelinap ke bawah topbar
     dan sudut atasnya tertutup.

     Tingginya dihitung, bukan ditebak: padding 14px atas + 14px bawah + isi
     ~38px + garis 1px = 67px. Ditambah 16px jeda supaya kartunya tidak
     menempel persis. Angka tebakan (88px) akan meleset diam-diam begitu
     padding topbar berubah — dan melesetnya tidak menghasilkan galat, cuma
     jarak yang terlihat salah tanpa ada yang tahu kenapa. */
  .akun-kol:first-child{position:sticky;top:calc(67px + var(--s4))}
  @media(max-width:900px){ .akun-kol:first-child{position:static} }
  .akun-kol > .panel{margin-top:0}

  .profil-atas{display:flex;align-items:center;gap:14px;margin-bottom:var(--s5)}
  .profil-teks{min-width:0}
  .profil-teks .nm{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--paper)}
  .profil-teks .em{color:var(--muted-2);font-size:12px;line-height:1.45;word-break:break-all}

  /* ===== Panel yang bisa dilipat =====
     Memakai <details>/<summary> bawaan peramban, BUKAN buka-tutup lewat JS.
     Kalau JS gagal dimuat, panel yang dilipat lewat JS tertutup selamanya dan
     isinya tidak bisa dibuka sama sekali — halaman akun kehilangan separuh
     fungsinya tanpa ada galat. Dengan <details>, JS mati berarti panelnya
     tetap bisa dibuka; ia fitur peramban. Gratis pula: bisa dibuka dengan
     papan ketik, dan pembaca layar mengumumkannya sebagai bisa-dilipat. */
  .lipat{padding:0;overflow:hidden}
  .lipat > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:var(--s6);margin:0}
  .lipat > summary::-webkit-details-marker{display:none}
  .lipat > summary:hover{background:rgba(135,170,145,.05)}
  .lipat[open] > summary{border-bottom:1px solid var(--line)}
  .lipat .ph-teks{flex:1;min-width:0}
  .lipat .ph-teks h3{font-family:var(--disp);font-size:15px;font-weight:600;margin:0}
  .lipat .panah{margin-left:auto;flex:none;width:16px;height:16px;color:var(--muted-2);transform:rotate(90deg);transition:transform .18s}
  .lipat[open] .panah{transform:rotate(-90deg)}
  .lipat-isi{padding:var(--s6)}
  /* Panel yang memuat galat ditandai, DAN dipaksa terbuka dari peladen. */
  .lipat.ada-galat > summary{box-shadow:inset 2px 0 0 var(--bad)}

  @media(max-width:900px){
    .akun{grid-template-columns:minmax(0,1fr)}
    .lipat > summary,.lipat-isi{padding:var(--s5)}
  }

  /* ===== Kode referral di halaman daftar (build 750) =====
     Dilipat: kolom yang selalu terbuka membuat orang yang TIDAK punya kode
     berhenti sejenak untuk memastikan ia memang boleh dikosongkan — dan
     berhenti sejenak di formulir pendaftaran itu mahal. */
  .reg-ref{margin-bottom:var(--s3)}
  .reg-ref > summary{list-style:none;cursor:pointer;font-size:13px;color:var(--muted);
                     padding:4px 0;display:flex;align-items:center;gap:6px}
  .reg-ref > summary::-webkit-details-marker{display:none}
  .reg-ref > summary::before{content:'+';color:var(--green);font-weight:700;width:12px;flex:none}
  .reg-ref[open] > summary::before{content:'–'}
  .reg-ref > summary:hover{color:var(--paper)}
  .reg-ref > summary span{color:var(--muted-2);font-size:12px}
  .reg-ref-isi{padding-top:8px}
  /* Gayanya sendiri, tidak menumpang .hint — .hint cuma berlaku di dalam
     .field, dan di luar itu ia tampil sebesar teks biasa. */
  .reg-ref-nb{color:var(--muted-2);font-size:12px;line-height:1.5;margin-top:6px}

  /* ===== Kode & tautan mitra (build 751) ===== */
  .mp-bagi{display:grid;gap:8px;margin:12px 0}
  .mp-bagi-r{display:flex;align-items:center;gap:10px;background:var(--card-inner);
             border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
  .mp-bagi-r > span{color:var(--muted-2);font-size:11px;text-transform:uppercase;
                    letter-spacing:.05em;flex:none;width:52px}
  /* Teksnya TETAP TERLIHAT dan bisa disorot: kalau JS gagal, mitranya masih
     bisa menyalin sendiri. overflow-wrap, bukan nowrap — tautan yang terpotong
     tidak bisa disalin dengan mata. */
  .mp-bagi-r > b{flex:1;min-width:0;font-family:var(--mono,monospace);font-size:13px;
                 font-weight:600;color:var(--paper);overflow-wrap:anywhere;user-select:all}
  .mp-bagi-r > .btn{flex:none}
  .mp-bagi-nb{color:var(--muted-2);font-size:12px;line-height:1.65}
  .mp-bagi-nb code{background:rgba(31,227,116,.1);color:var(--green);
                   padding:1px 6px;border-radius:5px;font-size:11.5px}
  @media(max-width:560px){
    .mp-bagi-r{flex-wrap:wrap}
    .mp-bagi-r > span{width:auto}
    .mp-bagi-r > b{flex:1 1 100%;order:3}
  }