:root{
  --orange:#e67e22; --orange-d:#cf6f16; --amber:#f5a623; --yellow:#ffd23f;
  --brown:#8b5a2b; --brown-d:#5d3a17; --grass:#7cb342; --grass-d:#5a9216;
  --bg:#fffaf3; --card:#ffffff; --ink:#2b2118; --muted:#8a7a68; --line:#efe2d2;
  --red:#e53935; --green:#43a047; --blue:#1e88e5; --gold:#ffb300;
  --radius:16px; --shadow:0 6px 20px rgba(150,90,20,.10); --shadow-lg:0 14px 40px rgba(150,90,20,.18);
  --font:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif; --pixel:'Press Start 2P',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.section{padding:34px 0}
.muted{color:var(--muted)}
h1,h2,h3,h4{line-height:1.2;margin:.2em 0 .5em}

/* Grass strip on top */
.grass-top{height:10px;background:repeating-linear-gradient(90deg,var(--grass) 0 12px,var(--grass-d) 12px 24px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;border:none;cursor:pointer;font-family:var(--font);font-weight:700;padding:11px 18px;border-radius:12px;background:#eee;color:var(--ink);transition:.15s;font-size:14px;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg,var(--amber),var(--orange));color:#fff;box-shadow:0 4px 0 var(--orange-d)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--orange-d)}
.btn-green{background:var(--green);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-ghost{background:#f3ece2;color:var(--ink)}
.btn-lg{padding:14px 26px;font-size:16px}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn-block{width:100%}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}

/* Header */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:none}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:2px solid var(--line);box-shadow:0 2px 12px rgba(150,90,20,.06);transition:background .25s,box-shadow .25s,margin .25s,max-width .25s,border-radius .25s,top .25s,border-color .25s}
.site-header.floating{top:12px;max-width:1180px;margin:0 auto;width:calc(100% - 28px);background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border:1px solid rgba(230,126,34,.22);border-radius:18px;box-shadow:0 12px 34px rgba(150,90,20,.18)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
.brand-logo{width:38px;height:38px;border-radius:9px}
.brand-cube{color:var(--orange);font-size:22px;display:inline-flex}
.brand-cube .ic{width:26px;height:26px}
.brand-name{background:linear-gradient(90deg,var(--orange),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.main-nav>a{padding:9px 12px;border-radius:10px;font-weight:600;color:#5c4b38}
.main-nav>a:hover{background:#fdf1e3;color:var(--orange-d)}
.main-nav>a.active{background:linear-gradient(180deg,var(--yellow),var(--amber));color:#5d3a17}
.nav-account{display:flex;align-items:center;gap:12px;margin-left:auto;padding-left:14px;border-left:2px solid var(--line)}
.nav-admin{display:inline-flex;align-items:center;gap:6px;background:var(--brown);color:#fff;padding:8px 13px;border-radius:10px;font-size:13px;font-weight:700}
.nav-admin .ic{width:16px;height:16px}
.nav-user{display:flex;align-items:center;gap:10px;padding:5px 13px 5px 6px;border-radius:40px;background:#fdf3e7;border:1px solid var(--line)}
.nav-user:hover{border-color:var(--amber)}
.nav-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--amber);background:#fff}
.nav-user-meta{display:flex;flex-direction:column;gap:3px;line-height:1.05}
.nav-username{font-weight:700;font-size:13.5px;color:var(--ink)}
.nav-user-meta .role-badge{align-self:flex-start}
.btn-login{background:linear-gradient(180deg,var(--amber),var(--orange));color:#fff;padding:9px 16px;border-radius:10px;font-weight:700}
.btn-jualmc{margin-left:auto;background:linear-gradient(180deg,#7e57c2,#5e35b1);color:#fff;padding:10px 16px;border-radius:11px;font-weight:800;font-size:13px;box-shadow:0 4px 0 #4527a0;white-space:nowrap}
.btn-jualmc:hover{filter:brightness(1.08)}
.nav-toggle{display:none;margin-left:auto;background:none;border:none;cursor:pointer;color:var(--orange)}
.nav-toggle .ic{width:28px;height:28px}

/* Alerts */
.alert{padding:12px 16px;border-radius:12px;margin:14px 0;font-weight:600}
.alert.ok{background:#e8f6ea;color:#2e7d32;border:1px solid #b6e0bd}
.alert.err{background:#fdecea;color:#c62828;border:1px solid #f3c0bc}
.alert.warn{background:#fff6e5;color:#a5720a;border:1px solid #f2d99a}

/* Slider */
.hero{padding-top:22px}
.slider{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.slides{display:flex;transition:transform .45s ease;cursor:grab}
.slides:active{cursor:grabbing}
.slide{min-width:100%;height:300px;background:linear-gradient(120deg,var(--orange),var(--amber));background-size:cover!important;background-position:center!important;display:flex;align-items:flex-end;padding:32px;color:#fff}
.slide-content{background:rgba(60,30,5,.42);backdrop-filter:blur(3px);padding:16px 20px;border-radius:12px;max-width:520px}
.slide-content h2{margin:0 0 6px;font-size:26px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:none;width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--orange-d)}
.slider-arrow.prev{left:12px}.slider-arrow.next{right:12px}
.slider-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.slider-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.slider-dots span.active{background:#fff;width:22px;border-radius:5px}

/* Section head */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.section-title{font-size:23px;margin:0;display:inline-flex;align-items:center;gap:9px}
.section-title .ic{width:26px;height:26px;color:var(--orange)}
.search-box{display:flex;background:#fff;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.search-box input{border:none;padding:10px 14px;outline:none;font-family:var(--font);min-width:180px}
.search-box button{border:none;background:var(--orange);color:#fff;padding:0 16px;cursor:pointer;display:flex;align-items:center}
.search-box button .ic{width:18px;height:18px}

/* Category pills */
.cat-pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:30px;background:#fff;border:2px solid var(--line);font-weight:600;cursor:pointer;font-size:13.5px}
.pill:hover{border-color:var(--amber)}
.pill.active{background:linear-gradient(180deg,var(--amber),var(--orange));color:#fff;border-color:transparent}
.pill-ico,.tc-ico{width:20px;height:20px;border-radius:5px;object-fit:cover}
svg.pill-ico{color:inherit;border-radius:0}
.pill.active svg.pill-ico{color:#fff}
svg.tc-ico{color:var(--orange-d);border-radius:0}

/* Product grid + cards */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px}
.product-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--amber)}
.pc-img{position:relative;aspect-ratio:1/1;background:#f7efe4;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-badge{position:absolute;top:9px;left:9px;background:rgba(139,90,43,.92);color:#fff;padding:5px 10px;border-radius:8px;font-size:11.5px;font-weight:700;display:flex;align-items:center}
.pc-badge img{width:15px;height:15px;border-radius:3px}
.pc-process{position:absolute;bottom:9px;right:9px;background:var(--green);color:#fff;padding:4px 9px;border-radius:7px;font-size:11px;font-weight:700}
.pc-bestseller{position:absolute;top:9px;right:9px;background:linear-gradient(90deg,#e67e22,#f5a623);color:#fff;padding:5px 10px;border-radius:8px;font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:4px;box-shadow:0 3px 10px rgba(230,126,34,.45);z-index:2}
.pc-bestseller .ic{width:14px;height:14px}
.pd-media{position:relative}
.pc-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.pc-name{font-size:15px;margin:0;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.pc-meta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.pc-rating{color:#f39c12;font-weight:700;display:inline-flex;align-items:center;gap:3px}
.pc-rating .ic{width:14px;height:14px;color:#f6a821}
.pc-buy{display:inline-flex;align-items:center;gap:4px}
.pc-buy .ic{width:15px;height:15px}
.pc-price{margin-top:auto}
.price-old{text-decoration:line-through;color:#b7a998;font-size:12.5px;margin-right:6px}
.disc-badge{background:#ffe1e1;color:var(--red);font-weight:800;font-size:11.5px;padding:2px 7px;border-radius:6px}
.price-now{font-size:18px;font-weight:800;color:var(--orange-d)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.pc-stock{font-size:11.5px;font-weight:700;color:var(--green)}
.pc-stock.out{color:var(--red)}
.pc-buy{font-weight:800;color:var(--orange);font-size:13px}
.empty{padding:50px;text-align:center;color:var(--muted);background:#fff;border-radius:var(--radius);border:1px dashed var(--line)}

/* Topup page */
.topup-hero{text-align:center;padding:20px;background:linear-gradient(120deg,#fff3df,#ffe9c7);border-radius:var(--radius);margin-bottom:22px}
.topup-cat-section{margin-bottom:30px}
.topup-cat-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.topup-cat-head h2{margin:0;font-size:20px}
.tc-line{flex:1;height:3px;background:linear-gradient(90deg,var(--amber),transparent);border-radius:2px}

/* Role badges */
.role-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.2px;vertical-align:middle}
.role-visitor{background:var(--blue)}
.role-client{background:var(--green)}
.role-executive{background:var(--red)}
.role-spender{background:linear-gradient(90deg,#ffb300,#ff7a00,#fff,#ffb300);background-size:300% 100%;color:#7a4a00;animation:shimmer 3s linear infinite}
.role-rvip{background:linear-gradient(90deg,#bf953f,#fcf6ba,#b38728);color:#5d3a00}
.role-rmfa{background:linear-gradient(90deg,#7a1f1f,#e53935,#7a1f1f);color:#fff}
.role-team{background:linear-gradient(90deg,#7e57c2,#b39ddb,#7e57c2);background-size:300% 100%;color:#fff;animation:shimmer 3.5s linear infinite}
.role-ceo{background:linear-gradient(90deg,#0f0f0f,#3a3a3a,#0f0f0f);background-size:300% 100%;color:#ffd23f;animation:shimmer 4s linear infinite}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* Generic cards / panels */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.page-head{margin:8px 0 20px}
.page-head h1{font-size:26px;margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Forms */
.field{margin-bottom:13px;display:flex;flex-direction:column;gap:5px}
.field label{font-weight:600;font-size:13.5px}
input,select,textarea{font-family:var(--font);font-size:14.5px;padding:11px 13px;border:2px solid var(--line);border-radius:11px;outline:none;background:#fff;width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--amber)}
textarea{min-height:88px;resize:vertical}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;margin:8px 0}
.chk input{width:auto}
.row-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-form input,.row-form select{width:auto;flex:1;min-width:120px}
.auth-wrap{max-width:430px;margin:40px auto}
.hint{font-size:12.5px;color:var(--muted)}

/* Product detail */
.pd-wrap{display:grid;grid-template-columns:380px 1fr;gap:26px}
.pd-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.pd-title{font-size:24px;margin:0 0 8px}
.pd-price{font-size:26px;font-weight:800;color:var(--orange-d)}
.variant-list{display:flex;flex-direction:column;gap:9px;margin:12px 0}
.variant-opt{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer}
.variant-opt.sel{border-color:var(--orange);background:#fff6ec}
.variant-opt.disabled{opacity:.5;cursor:not-allowed}
.receipt{background:#fbf5ec;border:1px dashed var(--amber);border-radius:12px;padding:14px;margin:14px 0}
.receipt .row{display:flex;justify-content:space-between;margin:4px 0}
.receipt .total{font-size:19px;font-weight:800;color:var(--orange-d);border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.pay-methods{display:flex;gap:10px;flex-wrap:wrap}
.pay-opt{flex:1;min-width:130px;border:2px solid var(--line);border-radius:12px;padding:13px;text-align:center;cursor:pointer;font-weight:700}
.pay-opt.sel{border-color:var(--orange);background:#fff6ec}
.benefits-list{list-style:none;padding:0;margin:10px 0}
.benefits-list li{padding:6px 0 6px 26px;position:relative}
.benefits-list li:before{content:'\2714';position:absolute;left:0;color:var(--green);font-weight:800}
.tabs{display:flex;gap:8px;border-bottom:2px solid var(--line);margin:14px 0}
.tab{padding:10px 16px;cursor:pointer;font-weight:700;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--orange-d);border-color:var(--orange)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* Stars */
.stars .star{color:#ddd;font-size:18px}
.stars .star.full{color:#f6a821}
.stars .star.half{background:linear-gradient(90deg,#f6a821 50%,#ddd 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:4px}
.star-input input{display:none}
.star-input label{font-size:28px;color:#ddd;cursor:pointer}
.star-input input:checked ~ label,.star-input label:hover,.star-input label:hover ~ label{color:#f6a821}
.review-item{border-bottom:1px solid var(--line);padding:12px 0}
.review-item .rv-head{display:flex;justify-content:space-between;font-weight:700}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{background:#fbf3e8;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:#9c7c53}
.tbl tr:hover td{background:#fffaf2}
.thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:inline-block}
.thumb.sm{width:34px;height:34px}
.st{padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;text-transform:capitalize}
.st-done,.st-paid,.st-accepted,.st-ready{background:#e8f6ea;color:#2e7d32}
.st-pending,.st-processing,.st-open,.st-baru{background:#fff4e0;color:#b5730a}
.st-failed,.st-rejected,.st-expired{background:#fdecea;color:#c62828}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%}
.dot.on{background:var(--green)}.dot.off{background:var(--red)}

/* Leaderboard */
.lb-tabs{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.lb-table .rank{font-weight:800;color:var(--orange);width:40px}
.lb-top3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.lb-card{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow)}
.lb-card.r1{border-color:var(--gold);transform:scale(1.04)}
.lb-card .medal{font-size:32px}

/* About / owners */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.vm-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border-top:4px solid var(--amber)}
.vm-vision{border-top-color:var(--orange)}
.vm-mission{border-top-color:var(--grass)}
.vm-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vm-head h3{margin:0;font-size:18px}
.vm-head .ic{width:22px;height:22px;color:var(--orange)}
.vm-mission .vm-head .ic{color:var(--grass)}
.owner-quote{margin-top:12px;background:#fff8ee;border:1px dashed var(--amber);border-radius:12px;padding:10px 12px;font-style:italic;color:var(--brown);display:flex;gap:6px;align-items:flex-start;text-align:left}
.owner-quote .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--orange)}
.jual-rate{margin:12px 0;background:linear-gradient(90deg,#fff3d6,#ffe9c2);border:1px solid var(--amber);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--brown);display:flex;gap:8px;align-items:center}
.jual-rate .ic{width:20px;height:20px;color:var(--orange);flex:none}
@media(max-width:640px){.vm-grid{grid-template-columns:1fr}}
.owners{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.owner-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.owner-card img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:4px solid var(--amber)}

/* Popup */
.popup-overlay{position:fixed;inset:0;background:rgba(40,20,0,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.popup-overlay.show{display:flex}
.popup-box{background:#fff;border-radius:18px;max-width:440px;width:100%;max-height:calc(100vh - 36px);overflow-y:auto;padding:24px;position:relative;box-shadow:var(--shadow-lg);text-align:center;animation:pop .25s ease;overscroll-behavior:contain}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.popup-img{width:100%;max-height:45vh;object-fit:contain;border-radius:12px;margin-bottom:14px}
.popup-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:26px;cursor:pointer;color:var(--muted);width:auto}
.popup-dismiss{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:13px;color:var(--muted)}
.popup-dismiss input{width:auto}
.modal-confirm{position:fixed;inset:0;background:rgba(40,20,0,.55);display:none;align-items:center;justify-content:center;z-index:210;padding:18px}
.modal-confirm.show{display:flex}

/* WhatsApp float */
.wa-float{position:fixed;left:18px;bottom:18px;background:#25d366;color:#fff;display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:40px;font-weight:800;box-shadow:0 6px 20px rgba(37,211,102,.5);z-index:80}
.wa-float .wa-ico{font-size:20px}
.wa-float:hover{filter:brightness(1.05)}

/* Order toast */
.order-toast{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:9px;max-width:290px}
.toast-item{background:#fff;border-left:4px solid var(--green);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow-lg);font-size:13px;animation:slidein .35s ease}
.toast-item b{color:var(--orange-d)}
@keyframes slidein{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* QRIS */
.qris-box{text-align:center;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:22px;max-width:360px;margin:0 auto}
.qris-box img{width:250px;height:250px;margin:0 auto}
.countdown{font-size:22px;font-weight:800;color:var(--red);font-family:var(--pixel);font-size:16px;margin:10px 0}

/* Footer */
.site-footer{background:linear-gradient(180deg,#3a2614,#2a1a0c);color:#f0e2cf;margin-top:50px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:26px;padding:40px 18px 26px}
.footer-col h4{color:var(--amber);margin:0 0 12px;font-size:15px}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.footer-col a:hover{color:var(--amber)}
.footer-brand{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px}
.footer-col.about p{color:#c9b79f;font-size:13.5px}
.socials{display:flex;gap:10px;margin-top:12px}
.socials a{background:rgba(255,255,255,.12);padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:700}
.socials a:hover{background:var(--orange)}
.footer-bottom{text-align:center;padding:15px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#c9b79f}

/* Account page */
.akun-head{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);flex-wrap:wrap}
.akun-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:4px solid var(--amber)}
.coin-pill{background:linear-gradient(180deg,var(--yellow),var(--amber));color:#5d3a17;padding:8px 16px;border-radius:30px;font-weight:800}
.list-item{padding:12px 0;border-bottom:1px solid var(--line)}
.friend-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.online-dot{width:10px;height:10px;border-radius:50%;background:#bbb}
.online-dot.on{background:var(--green)}

code{background:#f4ece0;padding:2px 6px;border-radius:6px;font-size:12.5px}

/* Responsive */
@media(max-width:900px){
  .pd-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .owners{grid-template-columns:1fr}
  .lb-top3{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .main-nav{position:fixed;top:76px;right:12px;left:12px;background:#fff;flex-direction:column;align-items:stretch;padding:12px;border-radius:14px;box-shadow:var(--shadow-lg);display:none;z-index:60}
  .main-nav.open{display:flex}
  .main-nav>a{padding:12px}
  .nav-account{margin-left:0;flex-direction:column;align-items:stretch;padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:10px;margin-top:4px;gap:8px}
  .nav-user{width:100%}
  .site-header.floating{width:calc(100% - 16px);top:8px}
  .btn-jualmc{margin-left:0}
  .header-inner{gap:10px}
  .wa-float .wa-txt{display:none}
  .wa-float{padding:14px;border-radius:50%}
  .footer-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .slide{height:200px;padding:18px}
  .slide-content h2{font-size:19px}
}

/* ===== Ikon SVG & footer/social (v7) ===== */
.stars{display:inline-flex;align-items:center;gap:2px}
.stars .star{font-size:18px;color:#ddd;display:inline-flex}
.stars .star .ic{width:1em;height:1em}
.stars .star.full,.stars .star.half{color:#f6a821}
.slider-arrow{display:flex;align-items:center;justify-content:center}
.slider-arrow .ic{width:20px;height:20px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:rgba(255,255,255,.12);border-radius:50%;color:#f0e2cf;padding:0}
.socials a .ic{width:19px;height:19px}
.socials a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
.footer-brand .ic{width:22px;height:22px;color:var(--amber)}
.footer-col ul li .ic{width:16px;height:16px;color:var(--amber);vertical-align:-.22em;margin-right:5px}
.wa-float .wa-ico{display:inline-flex}
.wa-float .wa-ico .ic{width:22px;height:22px}
.icon-gallery{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.icon-gallery span{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;color:var(--orange-d);background:#fff}
.icon-gallery span .ic{width:22px;height:22px}
.cat-cell-ico{display:inline-flex}
.cat-cell-ico .ic{width:30px;height:30px;color:var(--orange-d)}
.cat-cell-ico img.thumb{width:30px;height:30px}
h1 .ic,h2 .ic,h3 .ic{vertical-align:-.15em}

/* ================= Revisi v8 ================= */
/* Hero sambutan (ala senov, gambar digelapkan) */
.welcome-hero{position:relative;min-height:340px;display:flex;align-items:center;background:linear-gradient(120deg,var(--orange),var(--amber));background-size:cover!important;background-position:center!important;color:#fff;overflow:hidden}
.welcome-hero .wh-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,15,3,.5),rgba(30,15,3,.72));z-index:1}
.wh-inner{position:relative;z-index:2;padding:54px 18px}
.wh-title{font-size:40px;font-weight:800;margin:0 0 10px;text-shadow:0 3px 18px rgba(0,0,0,.4);max-width:760px}
.wh-sub{font-size:16px;color:#ffe9cf;margin:0 0 22px;max-width:620px}
.wh-stats{display:flex;gap:16px;flex-wrap:wrap}
.wh-stat{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:12px 18px;border-radius:14px}
.wh-stat .wh-ico{display:inline-flex;color:var(--yellow)}
.wh-stat .wh-ico .ic{width:30px;height:30px}
.wh-meta{display:flex;flex-direction:column;line-height:1.1}
.wh-meta b{font-size:22px;font-weight:800}
.wh-meta small{font-size:12.5px;color:#ffe9cf}
@media(max-width:760px){.wh-title{font-size:26px}.wh-inner{padding:36px 16px}.welcome-hero{min-height:250px}.wh-meta b{font-size:18px}}

/* Card form gaya struk */
.card-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 40px rgba(120,70,20,.14);padding:26px 24px;max-width:560px;margin:20px auto;position:relative;overflow:hidden}
.card-form:before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--amber),var(--orange),var(--amber))}
.card-form:after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:18px;background:radial-gradient(circle at 9px -2px,transparent 0 8px,#fff 8px);background-size:18px 18px;background-repeat:repeat-x}
.card-form h1,.card-form h2{margin-top:0}
.card-form input,.card-form select,.card-form textarea{background:#fffdf9}
.container.narrow{max-width:760px}
.jual-note{display:flex;gap:9px;align-items:flex-start;background:#fff6e9;border:1px solid #f2d99a;color:#8a6a2a;padding:12px 15px;border-radius:12px;margin:12px auto;max-width:560px;font-size:13.5px}
.jual-note .ic{width:18px;height:18px;flex:none;color:var(--orange-d)}
.jual-banner{background:linear-gradient(120deg,var(--orange),var(--amber));background-size:cover!important;background-position:center!important;border-radius:var(--radius);padding:32px 26px;color:#fff;margin:0 auto 14px;max-width:760px;box-shadow:0 10px 30px rgba(120,70,20,.18)}
.jual-banner h1{margin:0 0 6px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.req-note{color:#c0392b;font-size:11.5px;font-weight:700}

/* Legal cards (S&K, privasi, ketentuan) */
.legal-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 34px rgba(120,70,20,.12);padding:26px;overflow:hidden}
.legal-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.legal-head h1{margin:0;font-size:24px}
.legal-ico{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,var(--yellow),var(--amber));color:#5d3a17;flex:none}
.legal-ico .ic{width:24px;height:24px}
.legal-body{color:#4a3a29;line-height:1.7}
.accordion{display:flex;flex-direction:column;gap:10px}
.acc-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fffdf9}
.acc-item summary{cursor:pointer;padding:13px 16px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary:after{content:'+';font-size:20px;color:var(--orange)}
.acc-item[open] summary:after{content:'\2212'}
.acc-body{padding:0 16px 15px;color:#5a4835;line-height:1.65}

/* Role badge dengan icon */
.role-badge{display:inline-flex;align-items:center;gap:4px}
.role-badge .rb-ico{display:inline-flex}
.role-badge .rb-ico .ic{width:12px;height:12px;vertical-align:middle}

/* Footer logo */
.footer-logo{width:34px;height:34px;border-radius:8px;object-fit:cover;vertical-align:-.4em}

/* WA float -> kanan bawah, notifikasi order -> kiri bawah */
.wa-float{left:auto;right:18px}
.order-toast{right:auto;left:18px}
@media(max-width:760px){.wa-float{right:14px}.order-toast{left:12px;max-width:220px}}

/* Avatar edit + crop modal (lingkaran) */
.avatar-edit{display:flex;align-items:center;gap:14px}
.avatar-preview{width:74px;height:74px;border-radius:50%;object-fit:cover;border:3px solid var(--amber);background:#fff;flex:none}
.avatar-edit input[type=file]{flex:1;min-width:0}
.crop-modal{position:fixed;inset:0;background:rgba(30,15,3,.6);display:none;align-items:center;justify-content:center;z-index:300;padding:16px}
.crop-modal.show{display:flex}
.crop-box{background:#fff;border-radius:18px;padding:22px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center}
.crop-box h3{margin:0 0 4px;display:flex;align-items:center;gap:8px;justify-content:center}
.crop-stage{position:relative;width:320px;height:320px;max-width:100%;margin:12px auto;border-radius:12px;overflow:hidden;background:#111;touch-action:none}
.crop-canvas{display:block;width:320px;height:320px;max-width:100%;cursor:grab}
.crop-canvas:active{cursor:grabbing}
.crop-ring{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 9999px rgba(0,0,0,.45);border-radius:50%;border:2px dashed rgba(255,255,255,.85)}
.crop-zoom-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;margin:8px 0 14px}
.crop-zoom-label input{flex:1}
.crop-box .btn-row{display:flex;gap:10px;justify-content:center}

/* Saldo Toko (admin) */
.saldo-hero{background:linear-gradient(120deg,#2a1a0c,#3a2614);color:#fff;border-radius:var(--radius);padding:26px;box-shadow:0 12px 34px rgba(60,30,5,.28);margin-bottom:16px}
.saldo-hero .s-label{color:#e9d3b3;font-size:14px;display:flex;align-items:center;gap:8px}
.saldo-hero .s-label .ic{width:18px;height:18px}
.saldo-amount{font-size:38px;font-weight:800;color:var(--yellow);margin-top:4px}
.saldo-sub{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:#e9d3b3}
.saldo-sub b{color:#fff}
.st-income{color:#2e7d32;font-weight:800}
.st-expense{color:#c62828;font-weight:800}

/* ================= Revisi v9 ================= */
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Tabs (akun) - perbaikan tampil + gaya */
.tabs{flex-wrap:wrap;gap:6px;overflow-x:auto}
.tab{border-radius:10px 10px 0 0}
.tab:hover{color:var(--orange-d)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeInUp .25s ease}

/* Struk / receipt gaya asli */
.receipt{background:#fffdf8;border:1px dashed #e0bd8e;border-radius:12px;padding:18px 18px 22px;margin:16px 0;position:relative;box-shadow:0 6px 18px rgba(120,70,20,.08)}
.receipt:before{content:'STRUK PEMBELIAN';display:block;text-align:center;font-size:11px;font-weight:800;letter-spacing:2px;color:#b98a4a;border-bottom:2px dashed #e6c99b;padding-bottom:10px;margin-bottom:10px}
.receipt:after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:16px;background:radial-gradient(circle at 8px -3px,transparent 0 7px,#fffdf8 7px);background-size:16px 16px;background-repeat:repeat-x}
.receipt .r-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0;font-size:14px;color:#5a4835}
.receipt .r-row>span:last-child,.receipt .r-row>b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.receipt .r-row.muted{color:#a08a70}
.receipt .r-row.total{border-top:2px dashed #e0bd8e;margin-top:10px;padding-top:10px;font-size:18px;font-weight:800;color:var(--orange-d)}

/* Panel beli + varian */
.buy-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(120,70,20,.10);padding:22px;margin-top:22px}
.buy-panel h2{margin-top:0}
.field-row{display:flex;gap:14px;flex-wrap:wrap}
.field-row>.field{flex:1;min-width:180px}
.variant-item{display:grid;grid-template-columns:22px 1fr auto;grid-template-areas:'r name price' 'r stock price';gap:2px 10px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;background:#fff}
.variant-item input{grid-area:r;accent-color:var(--orange);width:18px;height:18px}
.variant-item .v-name{grid-area:name;font-weight:700}
.variant-item .v-stock{grid-area:stock;font-size:12px;color:#6f9a3f}
.variant-item .v-price{grid-area:price;font-weight:800;color:var(--orange-d);font-size:15px}
.variant-item.sel{border-color:var(--orange);background:#fff7ec;box-shadow:0 6px 16px rgba(230,126,34,.15)}
.variant-item.disabled{opacity:.5;cursor:not-allowed}
.pay-opt{transition:border-color .15s,background .15s}
.pay-opt small{display:block;font-weight:500;color:#8a7358;margin-top:3px}

/* Header: role lebih kecil + teks kontras */
.nav-username{color:#3a2411;text-shadow:none}
.nav-user-meta .role-badge{font-size:9px;padding:1px 7px;gap:3px}
.nav-user-meta .role-badge .rb-ico .ic{width:10px;height:10px}
.role-badge{font-size:10px;padding:2px 8px}
.role-custom{background:linear-gradient(90deg,#6d4c9e,#9b6dd0);color:#fff}

/* Saldo toko - besar & tengah */
.saldo-hero{text-align:center}
.saldo-hero .s-label{justify-content:center}
.saldo-amount{font-size:54px;line-height:1.05}
.saldo-sub{justify-content:center}
@media(max-width:760px){.saldo-amount{font-size:40px}.saldo-sub{gap:14px}}

/* Hero sambutan - tengah + gambar tidak kepotong */
.welcome-hero{min-height:0;display:block;align-items:initial;background:#1c1108}
.welcome-hero.no-img{min-height:340px;display:flex;align-items:center;background:linear-gradient(120deg,var(--orange),var(--amber))}
.welcome-hero .wh-img{display:block;width:100%;height:auto}
.welcome-hero .wh-overlay{background:linear-gradient(180deg,rgba(25,13,3,.42),rgba(25,13,3,.66))}
.welcome-hero.has-img .wh-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wh-inner{text-align:center;width:100%}
.wh-title{margin-left:auto;margin-right:auto}
.wh-sub{margin-left:auto;margin-right:auto}
.wh-stats{justify-content:center}
@media(max-width:520px){.wh-stats{gap:10px}.wh-stat{padding:10px 12px}}

/* Banner carousel bebas scroll (tengah besar - ala senov) */
.slider-scroll{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:11%;padding:20px 11% 32px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.slider-scroll::-webkit-scrollbar{display:none}
.slider-scroll:active{cursor:grabbing}
.slider-scroll .slide{flex:0 0 78%;width:78%;min-width:78%;height:270px;scroll-snap-align:center;border-radius:20px;overflow:hidden;box-shadow:0 10px 26px rgba(60,30,5,.16);transform:scale(.87);opacity:.5;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s ease,box-shadow .4s ease}
.slider-scroll .slide.is-center{transform:scale(1);opacity:1;box-shadow:0 18px 44px rgba(60,30,5,.3)}
@media(max-width:760px){.slider-scroll{padding:14px 8% 22px;gap:12px;scroll-padding-inline:8%}.slider-scroll .slide{flex-basis:84%;width:84%;min-width:84%;height:190px;transform:scale(.9)}}

/* Leaderboard */
.lb-table{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.lb-row{display:grid;grid-template-columns:56px 2fr 1.5fr 1fr .6fr;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lb-row.lb-head{background:transparent;border:none;padding:0 14px;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#9a7a4a}
.lb-rank{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--orange-d)}
.lb-rank .ic{width:22px;height:22px}
.lb-name b{font-weight:700}
.lb-name small{color:#8a7358}
.lb-email{color:#7a6a55;font-size:13px}
.lb-spent{font-weight:800;color:var(--orange-d)}
.lb-orders{text-align:center;font-weight:700}
.lb-row.top1{background:linear-gradient(120deg,#fff6db,#fff);border-color:#f2c94c}
.lb-row.top1 .lb-rank .ic{color:#e6a700}
.lb-row.top2{background:linear-gradient(120deg,#f2f3f6,#fff);border-color:#cbd0d8}
.lb-row.top2 .lb-rank .ic{color:#9aa3af}
.lb-row.top3{background:linear-gradient(120deg,#f8eee2,#fff);border-color:#e0b48c}
.lb-row.top3 .lb-rank .ic{color:#c47a3d}
@media(max-width:760px){.lb-row{grid-template-columns:38px 1.6fr 1fr;gap:8px}.lb-email,.lb-orders{display:none}}


/* ============================================================
   Revisi v10 - QRIS keren, logo koin/QRIS, animasi klik, responsif
   ============================================================ */

/* --- Logo koin Mora & logo QRIS di opsi bayar --- */
.coin-ic{width:22px;height:22px;vertical-align:-5px;display:inline-block}
.coin-ic.sm{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.coin-box{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,#fff3d6,#ffe6a8);border:1px solid #f0cf7a;color:#7a5210;font-weight:700;padding:8px 14px;border-radius:12px;margin-top:8px}
.coin-box .coin-ic{filter:drop-shadow(0 1px 1px rgba(120,80,0,.35))}
.pay-opt{display:flex;flex-direction:column;align-items:center;gap:4px}
.pay-opt-logo{height:26px;width:auto;margin-bottom:2px}
.pay-opt .coin-ic{width:28px;height:28px;margin-bottom:2px}

/* --- Kartu pembayaran QRIS yang keren --- */
.pay-page{display:flex;justify-content:center}
.pay-card{max-width:420px;width:100%;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 30px;text-align:center;box-shadow:0 18px 44px rgba(60,30,5,.14);position:relative;overflow:hidden}
.pay-card:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--orange),var(--amber),var(--yellow))}
.pay-card h1{font-size:20px;margin:6px 0 4px}
.qris-brand{height:40px;width:auto;margin:6px auto 2px;display:block}
.pay-amount{font-size:34px;font-weight:800;color:var(--orange-d);margin:6px 0 14px;letter-spacing:.5px}
.qris-frame{background:#fff;border:2px dashed #e3b877;border-radius:18px;padding:14px;display:inline-block;margin:4px auto 10px;position:relative;box-shadow:inset 0 0 0 6px #fff,0 6px 18px rgba(60,30,5,.1)}
.qris-frame:before,.qris-frame:after{content:"";position:absolute;width:22px;height:22px;border:3px solid var(--orange)}
.qris-frame:before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.qris-frame:after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.qris-img{display:block;width:250px;height:250px;max-width:66vw;border-radius:8px}
.pay-status{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:#fff7ea;border:1px solid #f0d9ab;color:#a9772a;font-weight:700;padding:9px 16px;border-radius:999px;margin:8px 0}
.pay-status.paid{background:#e8f7ec;border-color:#b7e2c1;color:#2e7d32}
.pay-status .ic{width:18px;height:18px}
@keyframes qrpulse{0%,100%{box-shadow:inset 0 0 0 6px #fff,0 6px 18px rgba(60,30,5,.1)}50%{box-shadow:inset 0 0 0 6px #fff,0 6px 26px rgba(230,126,34,.4)}}
.qris-frame{animation:qrpulse 2.4s ease-in-out infinite}

/* --- Tombol hapus foto profil --- */
.del-ava-form{margin:10px 0 0}
.btn.btn-outline{background:#fff;border:1.5px solid currentColor}
.btn.btn-danger.btn-outline{color:#c62828;background:#fff}
.btn.btn-danger.btn-outline:hover{background:#c62828;color:#fff}
.avatar-edit{display:flex;align-items:center;gap:14px}
.avatar-preview{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--orange);background:#f2ece2}

/* --- Animasi klik/hover global (full interaktif) --- */
button,.btn,a.btn,.tab,.pay-opt,.variant-item,.nav-account a,.main-nav>a,.card,.product-card,.cat-chip,.friend-card,.socials a,.wa-float,.nav-toggle{transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease,filter .2s ease}
.btn:hover,button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.03)}
.btn:active,button:not(:disabled):active,.pay-opt:active,.variant-item:active,.tab:active,.cat-chip:active,.product-card:active{transform:scale(.96)}
.btn:disabled{cursor:not-allowed;opacity:.55;transform:none}
.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,30,5,.16)}
.main-nav>a:active{transform:scale(.94)}
a,button,.btn,.tab,.pay-opt,label{-webkit-tap-highlight-color:transparent}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid rgba(230,126,34,.45);outline-offset:2px}
/* ripple lembut untuk semua .btn */
.btn{position:relative;overflow:hidden}
.btn>.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* --- Penyempurnaan full-responsive --- */
img{max-width:100%}
.tbl{width:100%}
@media(max-width:760px){
  .pay-methods{flex-direction:column}
  .pay-opt{width:100%}
  .akun-head{flex-wrap:wrap}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .pay-card{padding:22px 16px 26px}
  .pay-amount{font-size:28px}
}
@media(max-width:520px){
  .avatar-edit{flex-direction:column;align-items:flex-start}
  .qris-img{width:210px;height:210px}
  .footer-grid{gap:18px}
}

/* --- v10b: hint nominal + banner gambar-saja --- */
.pay-hint{font-size:12.5px;color:#a9772a;background:#fff7ea;border:1px dashed #f0d9ab;border-radius:10px;padding:7px 12px;margin:0 auto 12px;max-width:340px;line-height:1.45}
.slide{background-size:cover;background-position:center;background-repeat:no-repeat;display:block;text-decoration:none}
a.slide{cursor:grab}
.slide,.slide img{-webkit-user-drag:none;user-select:none}
.slider-scroll.dragging,.slider-scroll.dragging .slide{cursor:grabbing}


/* ===================== v11: HASIL ORDER & DATA PRODUK ===================== */
.pay-card.result{max-width:560px;margin:0 auto;padding:0;overflow:hidden}
.pay-card.result .result-head{margin:0;padding:20px 24px;font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;color:#fff}
.pay-card.result .result-head svg{width:24px;height:24px}
.result-head.ok{background:linear-gradient(135deg,#7cb342,#5c9c28)}
.result-head.proc{background:linear-gradient(135deg,#f5a623,#e67e22)}
.result-info{padding:18px 24px 6px}
.result-info .r-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed #f0e2cf;font-size:14.5px}
.result-info .r-row:last-child{border-bottom:0}
.result-info .r-row>span:first-child{color:#8a6d52}
.result-info .r-row>span:last-child,.result-info .r-row>b{text-align:right;font-weight:600;color:#3a2a1a}
.result-info .r-row.hl{background:linear-gradient(135deg,#fff6e6,#fff);margin:4px -24px;padding:14px 24px;border-bottom:0;border-radius:12px}
.result-info .r-row.hl>span:last-child{font-weight:800;color:#e67e22;font-size:16px}

/* Kotak data produk yang dikirim (di-highlight) */
.delivered-box{margin:16px 24px 20px;border:1px solid #f0d9b8;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(139,90,43,.10)}
.delivered-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#8b5a2b,#7c2d12);color:#ffd9b0;font-weight:700;font-size:14px;padding:12px 16px}
.delivered-head span{display:flex;align-items:center;gap:8px}
.delivered-head svg{width:18px;height:18px}
.copy-btn{border:0;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:9px;transition:transform .15s,background .2s}
.copy-btn:hover{background:rgba(255,255,255,.28)}
.copy-btn:active{transform:scale(.94)}
.copy-btn.copied{background:#7cb342;color:#fff}
.delivered-data{margin:0;white-space:pre-wrap;word-break:break-word;background:#2c2016;color:#ffe8c2;padding:16px;font-family:Consolas,Menlo,monospace;font-size:13.5px;line-height:1.65}
.delivered-note{display:flex;align-items:center;gap:8px;background:#fff6e6;color:#9a5a1f;font-size:12.5px;padding:10px 16px;border-top:1px solid #f0d9b8}
.delivered-note svg{width:15px;height:15px;flex:none}

/* Tutorial & review polish */
.tutorial-box{margin:0 24px 18px;background:#f4faed;border:1px solid #d9ecc2;border-radius:14px;padding:14px 16px}
.tutorial-box h3{margin:0 0 8px;font-size:15px;color:#5c9c28;display:flex;align-items:center;gap:8px}
.review-form-box{padding:0 24px 22px}
.warn-note{background:#fff3e0;border:1px solid #ffd59e;color:#9a5a1f;font-size:12px;line-height:1.6;padding:12px 14px;border-radius:12px;margin-bottom:14px;font-weight:600}
.pay-card.result .btn-block{margin:0 24px 22px;width:calc(100% - 48px)}

@media (max-width:560px){
  .result-info .r-row{font-size:13.5px}
  .delivered-box,.tutorial-box{margin-left:16px;margin-right:16px}
  .result-info{padding-left:18px;padding-right:18px}
  .pay-card.result .btn-block{margin-left:16px;margin-right:16px;width:calc(100% - 32px)}
}

/* ===== v12: Star rating input ===== */
.star-input{display:flex;gap:6px;margin:6px 0 12px;cursor:pointer}
.star-input span{display:inline-flex;color:#d9c4a6;transition:transform .12s,color .12s}
.star-input span .ic{width:30px;height:30px}
.star-input span.on{color:#f5a623}
.star-input span:hover{transform:scale(1.15)}
.admin .row-actions{white-space:nowrap}

/* ===== v12: Role badge animasi (CEO & CEO Friend) ===== */
@keyframes roleShine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.role-badge.role-ceo{background:linear-gradient(90deg,#f5a623,#ffd23f,#e67e22,#ffd23f,#f5a623);background-size:300% 100%;color:#3a1d09;border:none;-webkit-background-clip:border-box;animation:roleShine 3.5s linear infinite;box-shadow:0 2px 10px rgba(230,126,34,.45)}
.role-badge.role-ceofriend{background:linear-gradient(90deg,#e9e9ee,#ffffff,#c7ccd6,#ffffff,#e9e9ee);background-size:300% 100%;color:#3a3f4b;border:none;animation:roleShine 3.5s linear infinite;box-shadow:0 2px 10px rgba(120,130,150,.35)}
.role-badge.role-ceo .ic,.role-badge.role-ceofriend .ic{color:inherit}


/* ==================== v13: Diskusi, DM, Profil, Notifikasi, Reseller ==================== */

/* Header CTA group + tombol reseller */
.header-cta{display:flex;align-items:center;gap:10px}
.btn-reseller{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-weight:800;font-size:.82rem;letter-spacing:.3px;color:#5b3a00;text-decoration:none;white-space:nowrap;background:linear-gradient(135deg,#ffd23f,#f5a623);box-shadow:0 4px 14px rgba(245,166,35,.45);border:2px solid #fff;position:relative;overflow:hidden;animation:resellerPulse 2.4s ease-in-out infinite}
.btn-reseller svg{width:16px;height:16px}
.btn-reseller::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:resellerShine 2.8s linear infinite}
@keyframes resellerShine{0%{left:-60%}55%,100%{left:130%}}
@keyframes resellerPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.btn-reseller.active{outline:2px solid #cf6f16}

/* Tombol umum tambahan */
.btn-amber{background:linear-gradient(135deg,#ffd23f,#f5a623);color:#5b3a00;font-weight:800;border:none}
.btn-amber:hover{filter:brightness(1.05)}
.btn-block{display:block;width:100%;text-align:center}

/* ===== Chatroom / Diskusi ===== */
.chatroom-wrap{max-width:820px}
.chatroom{background:#fff;border:1px solid #f0e2cf;border-radius:20px;box-shadow:0 10px 40px rgba(139,90,43,.10);overflow:hidden;display:flex;flex-direction:column;height:72vh;min-height:480px}
.chatroom-head{background:linear-gradient(135deg,#e67e22,#cf6f16);color:#fff;padding:16px 20px}
.cr-title{display:flex;align-items:center;gap:12px}
.cr-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.2)}
.cr-ic svg{width:22px;height:22px;stroke:#fff}
.chatroom-head h1{margin:0;font-size:1.15rem}
.chatroom-head p{margin:2px 0 0;font-size:.82rem;opacity:.9}
.chat-body{flex:1;overflow-y:auto;padding:18px;background:#fdf6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40' stroke='%23f2e6d2' stroke-width='.5'/%3E%3C/svg%3E");display:flex;flex-direction:column;gap:10px}
.chat-loading,.chat-empty{text-align:center;color:#a98c68;padding:24px;font-size:.9rem}
.msg{display:flex;gap:8px;max-width:82%;align-items:flex-end}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg-av{width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.msg-bubble{background:#fff;border-radius:14px;padding:8px 12px;box-shadow:0 1px 3px rgba(139,90,43,.12);position:relative}
.msg.mine .msg-bubble{background:linear-gradient(135deg,#dcf8c6,#c8f0ad);border-bottom-right-radius:4px}
.msg:not(.mine) .msg-bubble{border-bottom-left-radius:4px}
.msg-head{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.msg-name{font-weight:700;font-size:.78rem;color:#cf6f16;cursor:pointer}
.msg-text{font-size:.92rem;color:#3d2b18;word-break:break-word;white-space:pre-wrap}
.msg-time{display:block;text-align:right;font-size:.65rem;color:#a98c68;margin-top:2px}
.chat-input{display:flex;gap:10px;padding:12px 14px;background:#fff;border-top:1px solid #f0e2cf}
.chat-input input{flex:1;border:1.5px solid #eaddc7;border-radius:999px;padding:11px 16px;font-size:.92rem;outline:none;font-family:inherit}
.chat-input input:focus{border-color:#f5a623}
.chat-send{width:44px;height:44px;border:none;border-radius:50%;background:linear-gradient(135deg,#e67e22,#cf6f16);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.chat-send svg{width:20px;height:20px;stroke:#fff}
.chat-send:hover{filter:brightness(1.08)}
.chat-note{text-align:center;font-size:.72rem;color:#a98c68;padding:6px 0 12px;margin:0}
.chat-disabled{text-align:center;padding:60px 20px;background:#fff;border:1px solid #f0e2cf;border-radius:20px}
.chat-disabled .cd-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#fdf0dd;margin-bottom:14px}
.chat-disabled .cd-ic svg{width:32px;height:32px;stroke:#e67e22}
.chat-disabled h2{margin:0 0 8px;color:#8b5a2b}
.chat-disabled p{color:#a98c68;margin:0 0 18px}

/* ===== DM (Pesan) ===== */
.dm-wrap{max-width:1000px}
.dm-app{display:flex;height:74vh;min-height:500px;background:#fff;border:1px solid #f0e2cf;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(139,90,43,.10)}
.dm-list{width:320px;border-right:1px solid #f0e2cf;display:flex;flex-direction:column;flex:none}
.dm-list-head{padding:16px 18px;border-bottom:1px solid #f0e2cf}
.dm-list-head h1{margin:0;font-size:1.1rem;display:flex;align-items:center;gap:8px;color:#8b5a2b}
.dlh-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fdf0dd}
.dlh-ic svg{width:17px;height:17px;stroke:#e67e22}
.dm-convs{flex:1;overflow-y:auto}
.dm-noconv{padding:30px 20px;text-align:center;color:#a98c68;font-size:.86rem;line-height:1.6}
.dm-conv-item{display:flex;gap:11px;padding:12px 16px;cursor:pointer;border-bottom:1px solid #f7eedf;transition:background .15s}
.dm-conv-item:hover{background:#fdf6ec}
.dm-conv-item.active{background:#fdf0dd}
.dci-av{position:relative;flex:none}
.dci-av img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.dot-online{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#4caf50;border:2px solid #fff}
.dci-main{flex:1;min-width:0}
.dci-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.dci-name{font-weight:700;font-size:.9rem;color:#3d2b18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dci-time{font-size:.68rem;color:#a98c68;flex:none}
.dci-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:2px}
.dci-last{font-size:.8rem;color:#8a7357;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dci-unread{background:#e67e22;color:#fff;font-size:.66rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;flex:none}
.dm-thread{flex:1;display:flex;flex-direction:column;min-width:0}
.dm-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#a98c68;text-align:center;padding:30px}
.dm-empty .de-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#fdf0dd}
.dm-empty .de-ic svg{width:30px;height:30px;stroke:#e67e22}
.dm-empty p{max-width:280px}
.dm-conv{flex:1;display:flex;flex-direction:column;min-height:0}
.dm-conv-head{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid #f0e2cf;background:#fff}
.dm-back{display:none;border:none;background:none;cursor:pointer;padding:4px}
.dm-back svg{width:22px;height:22px;stroke:#8b5a2b}
.dm-peer-av{width:40px;height:40px;border-radius:50%;object-fit:cover;cursor:pointer}
.dm-peer-name{font-weight:700;color:#3d2b18;cursor:pointer}
.dm-peer-status{font-size:.74rem;color:#a98c68}
.dm-peer-status.on{color:#4caf50}
.dm-body{flex:1;overflow-y:auto;padding:16px;background:#fdf6ec;display:flex;flex-direction:column;gap:7px}
.dm-msg{max-width:75%;align-self:flex-start}
.dm-msg.mine{align-self:flex-end}
.dm-bubble{background:#fff;border-radius:14px;border-bottom-left-radius:4px;padding:8px 12px;box-shadow:0 1px 3px rgba(139,90,43,.12)}
.dm-msg.mine .dm-bubble{background:linear-gradient(135deg,#dcf8c6,#c8f0ad);border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.dm-mtext{font-size:.92rem;color:#3d2b18;word-break:break-word;white-space:pre-wrap}
.dm-time{display:block;text-align:right;font-size:.64rem;color:#a98c68;margin-top:2px}

/* ===== Popup profil ===== */
.profile-modal,.join-modal{position:fixed;inset:0;background:rgba(60,40,20,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.profile-modal.show,.join-modal.show{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pm-card{background:#fff;border-radius:22px;width:100%;max-width:360px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popIn .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.pm-close{position:absolute;top:10px;right:12px;z-index:2;border:none;background:rgba(255,255,255,.85);width:30px;height:30px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;color:#8b5a2b}
.pm-cover{height:88px;background:linear-gradient(135deg,#e67e22,#f5a623,#ffd23f)}
.pm-body{padding:0 22px 22px;text-align:center;margin-top:-44px}
.pm-loading{padding:40px 0;color:#a98c68}
.pm-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.pm-online{display:inline-block;margin-top:6px;background:#e8f5e9;color:#2e7d32;font-size:.68rem;font-weight:700;padding:2px 10px;border-radius:999px}
.pm-name{font-weight:800;font-size:1.15rem;color:#3d2b18;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pm-username{color:#a98c68;font-size:.85rem}
.pm-bio{margin-top:12px;font-size:.88rem;color:#5c4630;background:#fdf6ec;border-radius:12px;padding:10px 14px;word-break:break-word}
.pm-bio.muted{color:#b7a488}
.pm-mutual{margin-top:14px;text-align:left}
.pm-mutual-label{font-size:.76rem;color:#a98c68;font-weight:600}
.pm-mutual-avs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pm-mutual-avs img{width:30px;height:30px;border-radius:50%;object-fit:cover;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.pm-actions{margin-top:18px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pm-actions .btn{flex:1;min-width:120px}
/* v18: statistik profil (total belanja + ranking) */
.pm-stats{display:flex;gap:10px;margin-top:14px}
.pm-stat{flex:1;background:#fdf6ec;border:1px solid #f0e2cf;border-radius:12px;padding:10px 8px;text-align:center}
.pm-stat-label{display:block;font-size:.68rem;color:#a98c68;font-weight:600;margin-bottom:3px}
.pm-stat-val{font-size:.92rem;font-weight:800;color:#8b5a2b}
.pm-stat-val.rank-on{color:#e67e22}

/* ===== Notifikasi lonceng ===== */
.notif-wrap{position:relative}
.notif-bell{position:relative;border:none;background:#fdf0dd;width:40px;height:40px;border-radius:12px;cursor:pointer;display:grid;place-items:center}
.notif-bell svg{width:20px;height:20px;stroke:#cf6f16}
.notif-bell:hover{background:#fbe3c2}
.notif-badge{position:absolute;top:-4px;right:-4px;background:#e53935;color:#fff;font-size:.62rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.notif-dropdown{position:absolute;top:52px;right:0;width:340px;max-width:88vw;background:#fff;border:1px solid #f0e2cf;border-radius:16px;box-shadow:0 16px 44px rgba(139,90,43,.22);display:none;overflow:hidden;z-index:1500}
.notif-dropdown.show{display:block;animation:fadeIn .15s ease}
.notif-head{padding:13px 16px;font-weight:700;color:#8b5a2b;border-bottom:1px solid #f0e2cf;background:#fdf6ec}
.notif-list{max-height:380px;overflow-y:auto}
.notif-empty{padding:28px 16px;text-align:center;color:#a98c68;font-size:.85rem}
.ni-link{text-decoration:none;color:inherit;display:block}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid #f7eedf}
.notif-item.unread{background:#fff8ec}
.ni-img{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.ni-main{flex:1;min-width:0}
.ni-title{font-weight:700;font-size:.88rem;color:#3d2b18}
.ni-body{font-size:.8rem;color:#7a6045;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ni-time{font-size:.68rem;color:#a98c68;margin-top:4px}

/* ===== Halaman Reseller ===== */
.reseller-page{max-width:960px}
.reseller-hero{text-align:center;background:linear-gradient(135deg,#fff7ed,#fde3c4);border:1px solid #f3d9b3;border-radius:24px;padding:40px 26px;box-shadow:0 10px 40px rgba(230,126,34,.10)}
.rh-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ffd23f,#f5a623);color:#5b3a00;font-weight:800;font-size:.76rem;letter-spacing:.5px;padding:6px 16px;border-radius:999px;box-shadow:0 4px 12px rgba(245,166,35,.4)}
.rh-badge svg{width:15px;height:15px}
.reseller-hero h1{margin:16px 0 8px;font-size:1.8rem;color:#8b3d0a}
.reseller-hero>p{color:#9a6a3a;max-width:520px;margin:0 auto 8px}
.rh-active{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:#e8f5e9;color:#2e7d32;font-weight:600;padding:8px 18px;border-radius:999px}
.rh-active svg{width:18px;height:18px;stroke:#2e7d32}
.reseller-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.reseller-btns .rbtn{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.reseller-btns .rbtn svg{width:18px;height:18px}
.reseller-prices{margin-top:30px;background:#fff;border:1px solid #f0e2cf;border-radius:20px;padding:24px}
.reseller-prices h2{display:flex;align-items:center;gap:8px;font-size:1.2rem;color:#8b5a2b;margin:0 0 16px}
.reseller-prices h2 svg{width:20px;height:20px;stroke:#e67e22}
.table-scroll{overflow-x:auto}
.res-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.res-table th{background:#fdf0dd;color:#8b5a2b;text-align:left;padding:11px 12px;font-weight:700;white-space:nowrap}
.res-table th:first-child{border-top-left-radius:10px}
.res-table th:last-child{border-top-right-radius:10px}
.res-table td{padding:11px 12px;border-bottom:1px solid #f2e6d3}
.res-table tbody tr:hover{background:#fdf6ec}
.rt-id{color:#a98c68;font-weight:600}
.rt-name{font-weight:700;color:#3d2b18}
.rt-var{color:#7a6045;font-size:.8rem}
.rt-normal{color:#9a6a3a;text-decoration:line-through;opacity:.75}
.rt-vip{color:#cf6f16;font-weight:800}
.rt-mfa{color:#7b1fa2;font-weight:800}
.reseller-prices .hint{margin:14px 0 0;font-size:.78rem;color:#a98c68}

/* Modal join reseller */
.jm-card{background:#fff;border-radius:22px;width:100%;max-width:400px;padding:30px 26px;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popIn .25s cubic-bezier(.2,.9,.3,1.2)}
.jm-close{position:absolute;top:12px;right:16px;border:none;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#a98c68}
.jm-ic{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#ffd23f,#f5a623);margin-bottom:12px}
.jm-ic svg{width:30px;height:30px;stroke:#fff}
.jm-card h2{margin:0 0 12px;color:#8b3d0a}
.jm-warn{display:flex;gap:8px;text-align:left;background:#fff3e0;border:1px solid #ffcc80;border-radius:12px;padding:11px 13px;font-size:.8rem;color:#8a5a1a;margin-bottom:16px}
.jm-warn svg{width:18px;height:18px;stroke:#e67e22;flex:none;margin-top:1px}
.jm-info{font-size:.85rem;color:#7a6045;margin:0 0 4px}
.jm-price{font-size:2rem;font-weight:800;color:#cf6f16;margin-bottom:20px;padding:10px;background:linear-gradient(135deg,#fff7ed,#fde3c4);border-radius:14px;border:2px dashed #f5a623;animation:pricePulse 1.8s ease-in-out infinite}
@keyframes pricePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.jm-actions{display:flex;gap:10px}
.jm-actions .btn{flex:1;font-weight:800}

/* Responsif */
@media(max-width:640px){
  .dm-app .dm-list{width:100%}
  .dm-app .dm-thread{display:none}
  .dm-app.show-thread .dm-list{display:none}
  .dm-app.show-thread .dm-thread{display:flex}
  .dm-back{display:block}
  .reseller-hero h1{font-size:1.4rem}
  .header-cta{gap:6px}
  .btn-reseller,.btn-jualmc{font-size:.72rem;padding:8px 12px}
}


/* ==================== v14: Tombol CTA Beranda (bawah banner) ==================== */
.home-cta{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.hc-btn{flex:1;min-width:200px;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 22px;border-radius:16px;font-weight:800;font-size:1.02rem;letter-spacing:.5px;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;border:2px solid #fff}
.hc-btn span{position:relative;z-index:1}
.hc-btn svg{width:22px;height:22px;position:relative;z-index:1}
.hc-btn:hover{transform:translateY(-2px)}
.hc-reseller{background:linear-gradient(135deg,#ffd23f,#f5a623,#e67e22);color:#5b3a00;box-shadow:0 6px 18px rgba(245,166,35,.45)}
.hc-reseller svg{stroke:#5b3a00}
.hc-reseller::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:resellerShine 2.8s linear infinite}
.hc-jualmc{background:linear-gradient(135deg,#7cb342,#5c9a2e);color:#fff;box-shadow:0 6px 18px rgba(124,179,66,.4)}
.hc-jualmc svg{stroke:#fff}
@media(max-width:560px){.hc-btn{min-width:100%}}

/* ===================== v18: Tutorial, Varian editor & Stok admin ===================== */
/* Tutorial box rata kiri (hasil order & halaman tutorial) */
.tutorial-box{text-align:left}
.tut-item{background:#fff;border:1px solid #e6d6bd;border-radius:12px;margin:8px 0;overflow:hidden}
.tut-item summary{cursor:pointer;padding:11px 14px;font-weight:700;color:#5c4630;list-style:none;display:flex;align-items:center;gap:8px;text-align:left}
.tut-item summary::-webkit-details-marker{display:none}
.tut-item[open] summary{border-bottom:1px solid #f0e2cf;background:#fdf6ec}
.tut-title{font-weight:800;color:#5c9c28;margin:4px 0;text-align:left}
.tut-content{padding:12px 14px;text-align:left;line-height:1.7;color:#4a3a28;white-space:normal}
.tut-vtag{background:#fff1dc;color:#cf6f16;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px}
.tut-cat{margin:26px 0 6px;color:#8b5a2b;border-bottom:2px solid #f0e2cf;padding-bottom:6px}
.tut-prod{margin:10px 0 18px}
.tut-prod h3{margin:6px 0;color:#3d2b18;font-size:1.02rem}

/* Editor varian admin (edit + urutkan) */
.var-admin{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.var-row{background:#fdf6ec;border:1px solid #f0e2cf;border-radius:12px;padding:10px 12px}
.var-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.var-edit{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.var-edit input{flex:1;min-width:120px}
.var-ops{display:flex;gap:4px;align-items:center}
.var-ops .btn{padding:4px 9px}
.var-stock{font-size:.78rem;color:#a98c68}

/* Panel tutorial admin */
.tut-admin{display:flex;flex-direction:column;gap:8px}
.tut-admin .tut-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fdf6ec;border:1px solid #f0e2cf;border-radius:10px;padding:8px 12px}

/* Contoh format kode (stok/bulk) */
.code-help{background:#2c2016;color:#ffe8c2;border-radius:10px;padding:12px 14px;font-family:Consolas,Menlo,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-x:auto}

/* ===== v20: Analytics income cards + filter ===== */
.analytics-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:14px 0 6px}
.analytics-filter .af-field{display:flex;flex-direction:column;gap:4px}
.analytics-filter .af-field label{font-size:12px;font-weight:700;color:#8a6a2a}
.analytics-filter select{min-width:190px;padding:9px 12px;border:1px solid #eaddc6;border-radius:11px;background:#fff;font-size:13.5px;color:#4a3a26}
.analytics-filter .btn{margin-bottom:1px}
.af-note{font-size:12.5px;margin:2px 0 10px}
.income-grid{margin-bottom:12px}
.income-grid .stat-card{border-left:5px solid transparent}
.stat-card.income-gross{border-left-color:#e67e22;background:linear-gradient(180deg,#fff7ec,#fff)}
.stat-card.income-cost{border-left-color:#c0895b;background:linear-gradient(180deg,#faf2e8,#fff)}
.stat-card.income-net{border-left-color:#7cb342;background:linear-gradient(180deg,#f3faea,#fff)}
.stat-card.income-net .s-val{color:#5c9c28}
.txt-net{color:#5c9c28;font-weight:700}

/* ===== v20: Review cards redesign ===== */
.reviews-box{margin-top:22px}
.reviews-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.reviews-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:20px;color:var(--brown)}
.reviews-head h2 .ic{width:20px;height:20px;color:#f5a623}
.reviews-count{background:linear-gradient(135deg,#ffd23f,#f5a623);color:#5a3d13;font-weight:800;font-size:13px;padding:6px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 3px 8px rgba(245,166,35,.28)}
.reviews-count b{font-size:14px}
.no-review{background:#fffaf3;border:1px dashed #eaddc6;border-radius:14px;padding:18px;text-align:center}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.review-card{background:#fff;border:1px solid #f0e4d2;border-radius:16px;padding:15px 16px;display:flex;flex-direction:column;gap:9px;box-shadow:0 3px 12px rgba(139,90,43,.06);transition:transform .18s,box-shadow .18s}
.review-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(139,90,43,.13)}
.review-card .rv-top{display:flex;align-items:center;gap:11px}
.review-card .rv-ava{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,#e67e22,#f5a623);box-shadow:0 3px 8px rgba(230,126,34,.3)}
.review-card .rv-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.review-card .rv-name{font-size:14.5px;color:#3d2f1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-card .rv-user{font-size:12px;color:#a98c68}
.review-card .rv-stars .stars{display:inline-flex;gap:2px}
.review-card .rv-stars .star{font-size:16px}
.review-card .rv-stars .star .ic{width:16px;height:16px}
.review-card .rv-body{font-size:13.5px;line-height:1.6;color:#5a4a35;background:#fffaf3;border-radius:11px;padding:10px 12px}
.review-card .rv-date{font-size:11.5px;color:#b7a486;margin-top:auto}
/* Bintang: kuning terisi, abu lembut utk kosong (berlaku global) */
.stars .star{color:#e6d9c4}
.stars .star.full,.stars .star.half{color:#f5a623}
.rv-stars .star{color:#e6d9c4}
.rv-stars .star.full,.rv-stars .star.half{color:#f5a623}
@media (max-width:560px){
  .review-grid{grid-template-columns:1fr 1fr;gap:10px}
  .review-card{padding:12px}
  .review-card .rv-ava{width:36px;height:36px;font-size:16px}
  .analytics-filter select{min-width:0;width:100%}
  .analytics-filter .af-field{flex:1;min-width:140px}
}

@media(max-height:560px){.popup-overlay{align-items:flex-start}.popup-box{margin:0 auto}}


/* Giveaway + admin order additions */
.giveaway-nav{background:linear-gradient(135deg,#ff8a00,#ff4d4d)!important;color:#fff!important;border-radius:10px;padding:8px 12px!important;box-shadow:0 5px 14px rgba(230,126,34,.25)}
.popup-giveaway-btn{display:inline-flex;margin-top:10px;width:100%;justify-content:center}
.giveaway-page{max-width:820px}.give-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow);overflow:hidden}.give-kicker{display:inline-block;background:#fff0df;color:#bd5b00;border:1px solid #ffd29f;border-radius:8px;padding:6px 10px;font-weight:800;letter-spacing:.08em;font-size:13px}.give-card h1{margin:12px 0 8px}.give-meta{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin:18px 0}.give-meta span{background:#fff8ef;border:1px solid #f5dfc4;border-radius:12px;padding:13px;font-weight:600}.give-deadline{padding:12px;background:#f8f5ef;border-radius:10px}.give-form{margin-top:22px}.give-requirement{border:1px solid #f0d4ad;background:#fffaf3;border-radius:12px;padding:14px;margin:12px 0}.give-requirement p{margin:5px 0 10px}.give-submit{width:100%;justify-content:center;font-size:16px;margin-top:14px}.winner-list{font-size:19px;font-weight:700;line-height:1.8;background:#fff8e8;border:1px solid #f4d08a;border-radius:12px;padding:18px}.give-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.give-proof-grid img{width:100%;height:190px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.give-proof-thumb{width:150px;height:110px;object-fit:cover;border-radius:8px;margin:4px}.give-proof-mini{width:46px;height:46px;object-fit:cover;border-radius:6px;margin:2px}.table-scroll{overflow-x:auto}.pagination{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.admin-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.admin-detail-grid>div{display:flex;flex-direction:column;padding:14px;border:1px solid var(--line);border-radius:10px}.admin-detail-grid span,.admin-detail-grid small{color:var(--muted)}.admin-pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f7f4ef;border-radius:10px;padding:14px}
@media(max-width:700px){.give-meta,.admin-detail-grid{grid-template-columns:1fr}.give-proof-grid{grid-template-columns:1fr 1fr}.give-card{padding:20px}.give-proof-grid img{height:150px}}