/* tema emas /akun (28 Sep) - override variabel dari order.css, hanya berlaku di /akun */
:root{
  --accent:#9C7A29; --accent-soft:#F5E9C8; --on-accent:#FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#D9B65B; --accent-soft:#3A2F14; --on-accent:#241C08;
  }
}
:root[data-theme="dark"]{
  --accent:#D9B65B; --accent-soft:#3A2F14; --on-accent:#241C08;
}

/* ---------- kartu jenjang affiliate (7 tingkat) ---------- */
.tcard{
  position:relative; overflow:hidden; border-radius:16px; padding:12px 16px 13px;
  color:#241f14; border:0;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  background:linear-gradient(135deg,#c9ccd1 0%,#f4f6f8 26%,#aeb3ba 64%,#e2e5e9 100%);
}
.tcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.22) 48%,rgba(255,255,255,0) 58%);
}
.tcard > *{ position:relative; z-index:2; }

.tcard-0{ background:linear-gradient(160deg,#eae4d6 0%,#cdc4b2 100%); }
.tcard-1{ background:linear-gradient(160deg,#2a7a49 0%,#164a2b 100%); }
.tcard-2{ background:linear-gradient(160deg,#5c7c9c 0%,#33455c 100%); }
.tcard-3{ background:linear-gradient(160deg,#d1a53a 0%,#96700f 100%); }
.tcard-4{ background:linear-gradient(160deg,#8a5a2d 0%,#4a2f17 100%); }
.tcard-5{ background:linear-gradient(160deg,#332c26 0%,#181410 100%); }
.tcard-6{ background:linear-gradient(150deg,#3a1650 0%,#5b2170 32%,#1c2a5c 66%,#7a3420 100%); }
.tcard-7{ background:linear-gradient(150deg,#0b0b0d 0%,#3b2a08 38%,#b8860b 70%,#1a1206 100%); }

/* kartu gelap -> teks terang */
.tcard.is-dark{ color:#f7f3ec; }
.tcard.is-dark::after{ background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.10) 48%,rgba(255,255,255,0) 58%); }
.tcard.is-dark .tcard-bar{ background:rgba(255,255,255,.2); box-shadow:inset 0 1px 2px rgba(0,0,0,.3); }


.tcard-head{ display:flex; align-items:center; gap:10px; }
.tcard-head h2{ margin:0; flex:1 1 auto; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.72; }
.tcard-mark{ font-weight:700; font-size:15px; letter-spacing:.02em; opacity:.6; }

.tcard-name{ margin:8px 0 1px; font-size:27px; font-weight:700; line-height:1.05; font-family:"Fraunces",Georgia,serif; }
.tcard-next{ margin:0; font-size:13.5px; opacity:.82; }

/* lambang burung */

.tcard-chip{
  position:absolute; right:18px; top:62px; width:50px; height:38px; border-radius:7px; z-index:2;
  background:linear-gradient(135deg,#e7d9a8,#c8b274 55%,#efe5c4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
}
.tcard-chip i{ position:absolute; background:rgba(0,0,0,.22); }
.tcard-chip i:nth-child(1){ left:0; right:0; top:33%; height:1px; }
.tcard-chip i:nth-child(2){ left:0; right:0; top:66%; height:1px; }
.tcard-chip i:nth-child(3){ top:0; bottom:0; left:34%; width:1px; }
.tcard-chip i:nth-child(4){ top:22%; bottom:22%; left:64%; width:1px; }

.tcard-bar{
  margin:11px 0 7px; height:9px; border-radius:99px; background:rgba(0,0,0,.16);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18); overflow:hidden;
}
.tcard-bar span{
  display:block; height:100%; border-radius:99px; min-width:6px;
  background:currentColor; opacity:.72;
}
.tcard-foot{ margin:0; font-size:13.5px; }
.tcard-note{ margin:8px 0 0; font-size:12.5px; opacity:.78; }

@media (max-width:430px){
  .tcard-name{ font-size:26px; }
  .tcard-chip{ width:42px; height:32px; right:14px; top:62px; }
}

/* ---------- carousel jenjang ---------- */
.tcarousel{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:2px 0 8px; margin:0 0 4px;
  scroll-padding-left:0; scrollbar-width:none;
}
.tcarousel::-webkit-scrollbar{ display:none; }
.tcarousel > .tcard{ flex:0 0 84%; scroll-snap-align:start; margin:0; }
@media (min-width:560px){ .tcarousel > .tcard{ flex-basis:70%; } }

/* jenjang yang belum tercapai */
.tcard.is-locked{ }

.tcard-lockmark{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.tcard-lockmark svg{ width:64px; height:64px; opacity:.32; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.tcard-lockmark span{ font-size:13px; font-weight:700; opacity:.5; letter-spacing:.02em; }
/* jenjang yang sudah dilewati */
.tcard.is-done{ opacity:.9; }

.tcard-flag{ display:inline-flex; align-items:center; gap:5px; }
.tcard-flag svg{ width:13px; height:13px; flex:0 0 auto; }

/* titik penunjuk posisi */
.tdots{ display:flex; justify-content:center; gap:6px; margin:0 0 14px; }
.tdots i{ width:6px; height:6px; border-radius:50%; background:#c9c2b4; display:block; }
.tdots i.on{ background:#1f5c4a; width:18px; border-radius:99px; }
.thint{ text-align:center; font-size:12px; color:#8a8378; margin:-6px 0 12px; }
/* geser pakai mouse + tombol panah (desktop) */
.twrap{ position:relative; }
.tnav{ display:none; }
.tcarousel.is-drag{ scroll-snap-type:none; cursor:grabbing; user-select:none; }
.tcarousel.is-drag *{ pointer-events:none; }
.tdots i{ cursor:pointer; }
.tcarousel[data-href]{ cursor:pointer; }
@media (hover:hover) and (pointer:fine){
  .tcarousel{ cursor:grab; }
  .tnav{ display:flex; align-items:center; justify-content:center; position:absolute; top:calc(50% - 22px); z-index:2;
    width:36px; height:36px; padding:0 0 3px; border-radius:50%; border:1px solid rgba(0,0,0,.15);
    background:rgba(255,255,255,.92); color:#1f5c4a; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); }
  .tnav:hover{ background:#fff; }
  .tnav-prev{ left:6px; } .tnav-next{ right:6px; }
}
/* pita diskon member (emas) */
.tcard-head{ padding-right:64px; }
.tcard-ribbon{
  position:absolute; right:16px; top:0; width:56px; height:82px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0 16px;
  text-align:center; line-height:1; color:#2b2108;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 85%,0 100%);
  background:linear-gradient(180deg,#8f6d1c 0,#c9a23e 6px,rgba(0,0,0,0) 7px),
    linear-gradient(165deg,#f8e8ad 0%,#dcb455 42%,#a98122 74%,#ecd07d 100%);
}
.tcard-ribbon small{ font-size:7.5px; font-weight:700; letter-spacing:.18em; opacity:.8; padding-left:.18em; }
.tcard-ribbon b{ font-family:"Fraunces",Georgia,serif; font-size:19px; font-weight:800; margin:3px 0 2px; letter-spacing:-.01em; }
.tcard-ribbon ~ .tcard-chip{ display:none; }