:root{
  --paper:#f4f4f4; --card:#fff; --ink:#222; --red:#f5330a; --red2:#d92a06; --orange:#f7941d; --yellow:#ffc107;
  --gray:#4b4b4b; --gray2:#2b2b2b; --line:#e3e3e3; --mute:#777; --soft:#f1f1f1; --ok:#2f7d32; --off:#b5b5b5; --blue:#0a84e0;
  --green:#f5330a; --green2:#f7941d;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.45}
h1,h2,h3,.brand{font-family:"Trebuchet MS","Segoe UI",sans-serif}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:"Courier New",monospace}


.btn{display:inline-block;border:1px solid #cfcfcf;background:#fff;color:var(--ink);padding:8px 16px;cursor:pointer;font-weight:700;text-decoration:none;border-radius:4px;transition:.12s}
.btn:hover{background:#f5f5f5}
.btn.pri,.btn.grn{background:var(--red);border-color:var(--red);color:#fff}
.btn.pri:hover,.btn.grn:hover{background:var(--red2)}
.btn.sm{padding:4px 10px;font-size:13px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border:1px solid #0002;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;background:var(--soft)}
.tag.shopee{background:#ffd9c7}.tag.tokopedia{background:#cdeccd}.tag.lazada{background:#d6dcff}.tag.tiktok{background:#e0e0e0}

/* ===== FRONTEND ===== */
body.fe{background:#fff;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:#222}
body.fe .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.fe-head{background:#f5330a;border-top:8px solid #f5330a;padding:12px 0 8px}
.fe-head .wrap{display:flex;align-items:flex-start;gap:26px}
.fe-logo{width:220px;height:70px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.fe-logo .brand{color:var(--ink);font-size:28px}
.fe-logo .brand b{color:#f5330a}
.fe-searchcol{flex:1}
.fe-search{display:flex;background:#ffe9e4;height:48px;align-items:center;margin-top:0}
.fe-search input{flex:1;background:transparent;border:0;outline:0;padding:0 16px;font-size:16px;color:#222;height:100%}
.fe-search input::placeholder{color:#9b8e8a}
.fe-search button{background:transparent;border:0;cursor:pointer;padding:0 14px;height:100%;display:flex;align-items:center}
.fe-top100{text-align:right;margin-top:8px;font-size:13px;font-weight:700;color:#ffc107;letter-spacing:.02em}
.fe-top100 span{color:#fff;font-weight:400;margin-right:10px;opacity:.9}
.fe-top100 a{cursor:pointer;color:#ffc107}
.fe-right{display:flex;align-items:center;gap:22px;color:#fff;margin-top:8px;flex-shrink:0}
.fe-right a{color:#fff;text-decoration:none;font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px;cursor:pointer}
.fe-right .sep{font-weight:400;opacity:.8}
.fe-fav{position:relative;display:flex}
.fe-fav i{position:absolute;top:-8px;right:-10px;background:#ffc107;color:#222;font-style:normal;font-size:11px;font-weight:700;border-radius:10px;padding:0 6px}
.fe-main{display:flex;max-width:1180px;margin:0 auto;padding:0 20px}
.fe-main .inner{display:flex;width:100%}
.cats{width:287px;background:#4b4b4b;color:#fff;flex-shrink:0;padding:6px 0}
.cats a{display:flex;gap:14px;align-items:center;padding:9px 16px;font-weight:600;font-size:15px;cursor:pointer;border-left:4px solid transparent}
.cats a .ic{width:22px;text-align:center;font-size:17px}
.cats a:hover{background:#5a5a5a}
.cats a.on{background:#f5330a;border-left-color:#ffc107}
.slider{flex:1;position:relative;overflow:hidden;border-radius:0 18px 18px 0;min-height:430px;background:#222}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 54px;opacity:0;transition:opacity .5s;pointer-events:none;color:#fff}
.slide.on{opacity:1;pointer-events:auto}
.slide .txt h2{font-family:"Trebuchet MS",sans-serif;font-size:50px;line-height:1.05;font-weight:700}
.slide .txt p{font-size:20px;margin:12px 0 6px;opacity:.95}
.slide .txt .big{font-size:36px;font-weight:300;margin-top:10px}
.slide .txt .big b{font-size:88px;color:#ffd21f;line-height:1;font-weight:800}
.slide .pc{width:250px;background:#d8201a;border:5px solid #fff;border-radius:18px;padding:14px;text-align:center;box-shadow:0 6px 18px #0005}
.slide .pc h4{font-size:20px;line-height:1.15;font-family:"Trebuchet MS",sans-serif}
.slide .pc em{display:inline-block;background:#ffd98a;color:#7a1e00;font-style:normal;font-size:13px;font-weight:700;padding:3px 12px;border-radius:14px;margin:8px 0}
.slide .pc .pic{height:150px;background:#fff;border-radius:12px;font-size:84px;display:flex;align-items:center;justify-content:center}
.s1{background:linear-gradient(100deg,#3a2314,#6d3d1c 60%,#8a4b1d)}
.s2{background:linear-gradient(100deg,#0f3d2a,#1f6a46 60%,#2c8a5d)}
.s3{background:linear-gradient(100deg,#1c2a3a,#27465f 60%,#336682)}
.sarrow{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:34px;cursor:pointer;padding:6px 10px;z-index:3;text-shadow:0 1px 6px #000a}
.sarrow.l{left:6px}.sarrow.r{right:6px}
.dots{position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:3}
.dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#fff6;margin:0 4px;cursor:pointer}
.dots i.on{background:#fff}
.notice{max-width:1140px;margin:25px auto 0;background:#0a84e0;color:#fff;display:flex;align-items:center;padding:12px 20px;gap:14px;font-size:16px}
.notice .tx{flex:1;display:flex;gap:10px;align-items:center}
.notice u{cursor:pointer}
.notice button{background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
.sec-h{font-size:28px;font-weight:700;color:#f7941d;margin:28px 0 14px;font-family:"Trebuchet MS",sans-serif}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat div{min-width:0;border:1px solid #e3e3e3;border-radius:10px;padding:18px;display:flex;gap:16px;align-items:center;box-shadow:0 1px 4px #0001}
.feat .fi{font-size:44px;flex-shrink:0}
.feat h4{font-size:18px;margin-bottom:2px}
.feat p{font-size:14px;color:#666;line-height:1.35}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px;min-height:4px}
.chip{border:1px solid #f5330a;color:#f5330a;background:#fff4f1;padding:4px 12px;border-radius:16px;cursor:pointer;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;padding:12px 0 44px}
.pcard{background:#fff;border:1px solid #e3e3e3;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;transition:.15s}
.pcard:hover{box-shadow:0 4px 14px #0002;transform:translateY(-2px)}
.pimg{height:150px;display:flex;align-items:center;justify-content:center;font-size:58px;position:relative}
.pimg .tag{position:absolute;top:8px;left:8px;border-radius:4px;border-width:1px}
.pimg .disc{position:absolute;top:8px;right:8px;background:#f5330a;color:#fff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px}
.pbody{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.pbody h3{font-size:15px;line-height:1.3;font-family:"Segoe UI",sans-serif;font-weight:600}
.price{font-weight:700;font-size:18px;color:#f5330a}
.price s{font-size:12px;color:#999;font-weight:400;margin-left:6px}
.pbody .meta{font-size:12px;color:#888}
.pbody .btn{margin-top:auto;text-align:center;border:0;border-radius:4px;box-shadow:none;background:#f5330a;color:#fff;font-size:14px}
.pbody .btn:hover{transform:none;background:#d92a06}
.empty{padding:40px;text-align:center;color:#888;grid-column:1/-1;border:2px dashed #ddd;border-radius:8px}
.ft-nav{background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin-top:10px}
.ft-nav .wrap{display:flex;justify-content:center;flex-wrap:wrap}
.ft-nav a{padding:16px 38px;font-weight:700;font-size:17px;color:#222;text-decoration:none;cursor:pointer;border-left:1px solid #e3e3e3;line-height:1.1}
.ft-nav a:first-child{border-left:0}
.ft-nav a:hover{color:#f5330a}
.ft-body{background:#f1f1f1;padding:30px 0 34px;border-bottom:1px solid #ccc}
.ft-body .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;max-width:1000px}
.ft-promo{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ft-mascot{width:112px;height:110px;position:relative;flex-shrink:0}
.ft-mascot .face{position:absolute;left:18px;top:0;width:78px;height:78px;background:#ffcf1f;border-radius:50% 50% 44% 44%;border:3px solid #7a4a00;display:flex;align-items:center;justify-content:center;font-size:42px}
.ft-mascot .hair{position:absolute;left:8px;top:-8px;font-size:44px}
.ft-mascot .sale{position:absolute;left:12px;bottom:0;background:#2c8a4b;color:#ffe45c;font-weight:800;font-size:15px;padding:2px 12px;border:3px solid #1a5c30;border-radius:4px;letter-spacing:.06em}
.ft-mascot .mega{position:absolute;left:-4px;top:40px;font-size:30px}
.ft-promo .tx{flex:1 1 230px;min-width:0}
.ft-promo h3{font-size:23px;color:#2b2b2b;font-family:"Segoe UI",sans-serif;font-weight:600;margin-top:12px}
.ft-promo p{font-size:15px;color:#555;line-height:1.55;margin-top:4px}
.ft-form{display:flex;width:100%;margin-top:6px}
.ft-form input{flex:1;border:1px solid #d5d5d5;background:#fff;padding:0 16px;height:46px;font-size:16px;outline:0;min-width:0}
.ft-form input:focus{border-color:#f5330a}
.ft-form button{background:#f5330a;color:#fff;border:0;font-weight:700;font-size:17px;padding:0 26px;cursor:pointer}
.ft-form button:hover{background:#d92a06}
.ft-help h3{font-size:24px;color:#2b2b2b;font-family:"Segoe UI",sans-serif;font-weight:600}
.ft-help .jam{font-size:15px;color:#555;margin:10px 0 14px}
.ft-help .row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.ft-mail{display:flex;align-items:center;gap:12px;color:#f5330a;font-size:19px;font-weight:600;text-decoration:none}
.ft-soc{display:flex;gap:20px;margin-top:20px;align-items:center}
.ft-soc a{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:13px;border-radius:5px;color:#fff;text-decoration:none}
.ft-store{display:flex;flex-direction:column;gap:6px}
.ft-store a{display:flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #aaa;border-radius:7px;padding:5px 14px 5px 10px;text-decoration:none;cursor:pointer;min-width:170px}
.ft-store a .ico{font-size:26px}
.ft-store a small{display:block;font-size:10px;line-height:1.1}
.ft-store a b{font-size:19px;line-height:1.1;font-weight:600}
.ft-copy{background:#2b2b2b;color:#ccc;padding:14px 0;font-size:13px;text-align:center}
@media(max-width:900px){.ft-body .wrap{grid-template-columns:1fr;gap:30px}.ft-nav a{padding:12px 16px;font-size:15px}}
@media(max-width:900px){
 .cats{display:none}.slider{border-radius:0;min-height:320px}.slide{padding:0 22px}.slide .pc{display:none}.slide .txt h2{font-size:30px}.slide .txt .big b{font-size:52px}
 .fe-head .wrap{flex-wrap:wrap;gap:10px}.fe-logo{width:140px;height:48px}.fe-logo .brand{font-size:20px}.fe-searchcol{order:3;flex-basis:100%}.fe-right{margin-left:auto;margin-top:0}.fe-right a{font-size:14px}
 .feat{grid-template-columns:1fr 1fr}.fe-main{padding:0}.notice{margin:16px 12px 0;font-size:13px}
}

/* ===== LAUNCH ===== */
.ln{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:var(--paper)}
.ln-box{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 18px #0002;max-width:440px;width:100%;overflow:hidden}
.ln-head{background:var(--red);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;border-top:6px solid var(--red)}
.ln-head .brand{background:#fff;color:var(--ink);padding:2px 12px;font-size:20px}
.ln-head .brand b{color:var(--red)}
.ln-head .mono{opacity:.9}
.ln-body{padding:22px;text-align:center}
.ln-emoji{font-size:64px;border-radius:12px;width:120px;height:120px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:#ffe9e4}
.ln-body h2{font-size:21px;margin:8px 0 2px}
.ln-body .price{font-size:20px}
.count{font-family:"Trebuchet MS",sans-serif;font-size:60px;font-weight:700;color:var(--red);line-height:1;margin:14px 0 4px}
.bar{height:10px;border-radius:6px;background:#eee;margin:12px 0 16px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);width:0}
.ln-note{font-size:12px;color:#fff;background:var(--blue);margin:18px -22px -22px;padding:10px 18px;text-align:left}
.urlbox{font-size:12px;background:var(--soft);padding:6px 8px;border-radius:4px;word-break:break-all;margin:12px 0 0;color:var(--mute)}


/* ===== tambahan versi PHP ===== */
.toast{position:fixed;bottom:18px;right:18px;background:var(--gray2);color:#fff;padding:11px 18px;border-radius:4px;border-left:5px solid var(--yellow);z-index:99;display:none}
.toast.show{display:block}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg{overflow:hidden}
.pimg a{display:contents}
.fav{position:absolute;bottom:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:#fffc;cursor:pointer;font-size:19px;line-height:1;color:#999;display:flex;align-items:center;justify-content:center;z-index:2}
.fav.on{color:var(--red)}
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 0 40px}
.pager a,.pager span{min-width:38px;text-align:center;padding:8px 12px;border:1px solid #d5d5d5;border-radius:4px;text-decoration:none;color:#222;background:#fff}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager .cur{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.alert{max-width:1140px;margin:14px auto 0;padding:11px 16px;border-radius:4px;font-size:14px}
.alert.ok{background:#e3f4e4;color:#1d5c22;border:1px solid #b9dfbc}
.alert.err{background:#fde8e4;color:#9a1d06;border:1px solid #f4bdb1}
.slide{text-decoration:none}
.slide .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.slide .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000a,#0003)}
.slide .txt,.slide .pc{position:relative;z-index:1}
.hl{margin:8px 0 0;display:inline-block;background:#ffd21f;color:#3a2200;font-weight:800;font-size:30px;padding:2px 14px;border-radius:4px;font-family:"Trebuchet MS",sans-serif}
.fe-top100 a{text-decoration:none}
.fe-search form{display:flex;width:100%;height:100%}
.chips a{text-decoration:none}
.ln-head a{color:inherit;text-decoration:none}
.page404{max-width:440px;margin:0 auto;text-align:center;padding:30px}

/* ===== RESPONSIVE MOBILE ===== */
html{-webkit-text-size-adjust:100%}
body.fe{overflow-x:hidden}
img,svg{max-width:100%}
@media(max-width:900px){
 .fe-head{border-top-width:5px;padding:10px 0 8px}
 .fe-head .wrap{padding:0 12px}
 .fe-top100{text-align:left;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px}
 .fe-top100 span{margin-right:0}
 .fe-search{height:44px}
 .fe-fav svg{width:28px;height:28px}
 .fe-right{gap:16px}
 .fe-right svg{width:26px;height:26px}
 .slider{min-height:260px}
 .slide{padding:0 40px}
 .slide .txt p{font-size:15px;margin:8px 0 4px}
 .slide .txt h2{font-size:26px}
 .hl{font-size:20px}
 .sarrow{font-size:26px;padding:4px}
 .sarrow.l{left:0}.sarrow.r{right:0}
 .fe-main .wrap,body.fe .wrap{padding:0 12px}
 .sec-h{font-size:22px;margin:22px 0 10px}
 .ft-nav .wrap{padding:0}
 .ft-nav a{padding:12px 14px;font-size:14px;flex:1 1 33%;text-align:center}
 .ft-body{padding:22px 0}
}
@media(max-width:600px){
 .feat{grid-template-columns:1fr;gap:10px}
 .feat div{padding:12px;gap:12px}
 .feat .fi{font-size:34px}
 .feat h4{font-size:16px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .pimg{height:120px;font-size:46px}
 .pbody{padding:10px;gap:5px}
 .pbody h3{font-size:13px}
 .price{font-size:15px}
 .price s{display:block;margin-left:0}
 .pbody .btn{font-size:12px;padding:8px 6px}
 .pager{padding-bottom:28px}
 .notice{margin:12px 12px 0;padding:10px 12px;font-size:12.5px}
 .ft-promo{gap:10px}
 .ft-mascot{margin:0 auto}
 .ft-promo h3{font-size:19px}
 .ft-form button{padding:0 16px;font-size:15px}
 .ft-form input{font-size:14px;padding:0 12px}
 .ft-help h3{font-size:20px}
 .ft-mail{font-size:16px;word-break:break-all}
 .ft-store a{min-width:0;width:100%}
 .toast{left:12px;right:12px;bottom:12px;text-align:center}
 .ln-body{padding:18px}
 .ln-note{margin:16px -18px -18px}
 .count{font-size:48px}
}
@media(max-width:360px){
 .fe-logo{width:112px}
 .fe-logo .brand{font-size:17px}
 .fe-right a span{display:none}
}
.ft-body .wrap>*{min-width:0}
@media(max-width:600px){
 .ft-promo .tx{flex:1 1 100%}
 .fe-logo{flex-shrink:1;min-width:0}
}
@media(max-width:360px){
 .fe-head .wrap{gap:8px}
 .fe-right{gap:12px}
 .fe-logo{width:104px;height:42px}
}

.pbody .btn:hover{filter:brightness(.9)}

.tag.mpico{background:transparent;border:0;padding:0;box-shadow:none;display:inline-flex;align-items:center;line-height:0}
.tag.mpico img{width:auto;max-width:120px;display:block}

.pbody .pdesc{font-size:12px;color:#777;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ln-body .ldesc{font-size:14px;color:#555;margin:10px 0 2px;line-height:1.5;text-align:left;background:#f7f7f7;border-radius:6px;padding:10px 12px;max-height:150px;overflow:auto;white-space:pre-line}

/* ===== HALAMAN REDIRECT (lp-*) ===== */
body.lp-page{background:var(--paper);margin:0}
.lp{min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;padding:16px 12px 24px}
.lp-box{width:100%;max-width:480px;background:#fff;border-radius:14px;box-shadow:0 6px 24px #0002;overflow:hidden}
.lp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--red);padding:12px 14px;border-top:5px solid var(--red)}
.lp-brand{background:#fff;color:var(--ink);text-decoration:none;font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:19px;font-weight:700;padding:3px 12px;border-radius:3px;white-space:nowrap}
.lp-slug{color:#fff;opacity:.85;font:12px "Courier New",monospace;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-img{width:100%;aspect-ratio:1/1;max-height:460px;background:#f3f3f3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lp-img img{width:100%;height:100%;object-fit:contain;display:block}
.lp-emoji{font-size:clamp(90px,34vw,170px);line-height:1}
.lp-info{padding:16px 16px 6px}
.lp-mp{margin-bottom:8px;min-height:4px}
.lp-title{font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:20px;line-height:1.3;font-weight:700;color:#222;margin:0;overflow-wrap:anywhere}
.lp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:10px}
.lp-price b{font-size:26px;color:var(--red);line-height:1.1}
.lp-price s{font-size:14px;color:#999}
.lp-price em{font-style:normal;background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px}
.lp-desc{margin:12px 0 4px;background:#f7f7f7;border-radius:8px;padding:12px;font-size:14px;line-height:1.55;color:#555;white-space:pre-line;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.lp-timer{display:flex;align-items:center;gap:16px;margin:14px 16px 16px;padding:14px;border:1px solid #eee;border-radius:12px;background:#fffaf8}
.lp-ring{position:relative;width:84px;height:84px;flex-shrink:0}
.lp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.lp-ring circle{fill:none;stroke-width:9}
.lp-ring .bg{stroke:#eee}
.lp-ring .fg{stroke:var(--red);stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:276.46}
.lp-ring>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Trebuchet MS",sans-serif;font-size:30px;font-weight:700;color:var(--red)}
@keyframes lpring{from{stroke-dashoffset:276.46}to{stroke-dashoffset:0}}
.lp-ttx{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-ttx b{font-size:16px;color:#222;line-height:1.3}
.lp-ttx span{font-size:14px;color:#666}
.lp-ttx small{font-size:12px;color:#999;overflow-wrap:anywhere}
.lp-note{background:var(--blue);color:#fff;font-size:12px;line-height:1.5;padding:12px 16px}
@media(min-width:520px){.lp{padding-top:32px}.lp-title{font-size:22px}}
@media(max-width:360px){.lp{padding:8px 6px}.lp-title{font-size:18px}.lp-price b{font-size:22px}.lp-ring{width:70px;height:70px}.lp-ring>span{font-size:24px}.lp-timer{gap:12px;margin:12px;padding:12px}}
@media(prefers-reduced-motion:reduce){.lp-ring .fg{animation:none!important;stroke-dashoffset:0}}

.pbody h3 a{color:inherit;text-decoration:none}
.pbody h3 a:hover{color:var(--red);text-decoration:underline}
.pimg a{cursor:pointer}

/* blog */
.bl-more{font-size:13px;font-weight:400;margin-left:10px;color:var(--red,#f5330a);text-decoration:none}
.bcard .pimg{display:flex;align-items:center;justify-content:center;font-size:48px;text-decoration:none}
.bcard .pimg img{width:100%;height:100%;object-fit:cover}
.bcard .pdesc{-webkit-line-clamp:3}
.blogwrap{padding-top:18px;padding-bottom:30px}
.bl-h{font-size:28px;margin:6px 0 2px}.bl-sub{color:#666;margin:0 0 6px}
.bl-h2{font-size:20px;margin:34px 0 4px}
.crumb{font-size:13px;color:#777;margin-bottom:10px}.crumb a{color:#555}
.post{background:#fff;border:1px solid #e3e3e3;border-radius:8px;padding:24px 28px;max-width:820px;margin:0 auto}
.post h1{font-size:30px;line-height:1.25;margin:0 0 8px}
.pmeta{color:#777;font-size:13px;margin-bottom:16px}
.pcover{width:100%;height:auto;border-radius:8px;margin-bottom:18px;display:block}
.pbodytxt{font-size:17px;line-height:1.8;color:#222;overflow-wrap:anywhere}
.pbodytxt h2{font-size:24px;margin:26px 0 8px}.pbodytxt h3{font-size:20px;margin:20px 0 6px}.pbodytxt h4{font-size:17px;margin:16px 0 4px}
.pbodytxt p{margin:0 0 16px}.pbodytxt ul,.pbodytxt ol{margin:0 0 16px 24px}
.pbodytxt img{max-width:100%;height:auto;border-radius:6px}
.pbodytxt a{color:#0a64c8;text-decoration:underline}
.pbodytxt blockquote{border-left:4px solid #f5330a;margin:16px 0;padding:8px 16px;background:#fff4f1;color:#555}
.pbodytxt table{max-width:100%;display:block;overflow-x:auto}
.ptags{margin-top:18px;display:flex;gap:6px;flex-wrap:wrap}.ptags span{background:#f0f0f0;border-radius:14px;padding:3px 12px;font-size:12px;color:#555}
.pshare{margin-top:18px;padding-top:14px;border-top:1px solid #eee;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px}
.pshare a{padding:5px 12px;border:1px solid #ddd;border-radius:16px;text-decoration:none;color:#333}
@media(max-width:640px){.post{padding:16px 14px;border-radius:0;border-left:0;border-right:0}.post h1{font-size:23px}.pbodytxt{font-size:16px}.bl-h{font-size:23px}}

/* blog: kartu produk & tabel compare */
.pbodytxt .bprod{display:flex;gap:14px;border:1px solid #e3e3e3;border-radius:8px;padding:12px;margin:0 0 16px;background:#fafafa;align-items:center}
.bprod .bp-img{flex:0 0 120px;height:120px;border-radius:8px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none}
.bprod .bp-img img{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0}
.emo{font-size:44px}
.bp-b{min-width:0;flex:1}.bp-mp{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:.4px}
.bprod h4{margin:2px 0 6px;font-size:17px}
.bp-pr{margin-bottom:8px}.pbodytxt .pr{color:#f5330a;font-size:18px}.pbodytxt s{color:#999;font-size:13px}.dc{font-style:normal;background:#f5330a;color:#fff;font-size:11px;padding:1px 6px;border-radius:4px}
.pbodytxt .btn.pri{display:inline-block;color:#fff;text-decoration:none;padding:9px 16px;border-radius:6px;font-weight:700;font-size:14px;text-align:center}
.cmpwrap{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:480px;font-size:14px;display:table}
table.cmp th,table.cmp td{border:1px solid #e3e3e3;padding:10px;vertical-align:top;text-align:center;line-height:1.45}
table.cmp thead th{background:#fafafa}
table.cmp tbody th{background:#f5f5f5;text-align:left;width:96px;font-size:13px;position:sticky;left:0}
.cm-img{display:flex;width:90px;height:90px;margin:0 auto 6px;align-items:center;justify-content:center;background:#f1f1f1;border-radius:8px;overflow:hidden;text-decoration:none}
.cm-img img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}.cm-t{font-size:14px;font-weight:700}
.best{display:block;margin-top:4px;color:#1d7a2a;font-size:12px;font-weight:700}
@media(max-width:640px){.pbodytxt .bprod{flex-direction:column;align-items:stretch}.bprod .bp-img{flex:none;width:100%;height:180px}table.cmp td,table.cmp th{padding:8px 6px}}

/* ---- blog: rapikan (override) ---- */
body.fe .blogwrap{padding:22px 20px 34px;max-width:1180px;margin:0 auto}
body.fe .blogwrap.single{max-width:900px}
.crumb{margin:0 0 12px}
.post{max-width:none;margin:0}
.pbodytxt .bprod{gap:18px;padding:14px;background:#fff;box-shadow:0 1px 3px #0001}
.bprod .bp-img{flex:0 0 140px;height:140px}
.bp-b .btn{min-width:170px}
.cmpwrap{border:1px solid #e3e3e3;border-radius:8px;background:#fff}
table.cmp{min-width:calc(110px + var(--n,2) * 150px);border-collapse:separate;border-spacing:0;table-layout:fixed}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid #eee;border-right:1px solid #eee;padding:12px 10px}
table.cmp tr>*:last-child{border-right:0}table.cmp tbody tr:last-child>*{border-bottom:0}
table.cmp thead th{background:#fafafa;vertical-align:bottom}
table.cmp tbody th{width:110px;white-space:nowrap;background:#f7f7f7;z-index:1}
table.cmp thead th:first-child{width:110px;background:#f7f7f7;position:sticky;left:0;z-index:1}
.cm-img{width:104px;height:104px}.cm-t{line-height:1.3}
table.cmp .pr{display:block;font-size:17px}table.cmp s{display:inline-block}
table.cmp .btn.pri{display:block;width:100%;padding:9px 6px;font-size:13px;box-sizing:border-box}
.best{display:inline-block;margin-top:6px;background:#e3f4e4;color:#1d5c22;padding:2px 8px;border-radius:10px}
@media(max-width:640px){
 body.fe .blogwrap{padding:14px 0 26px}
 .crumb,.bl-h,.bl-sub,.bl-h2{padding-left:12px;padding-right:12px}
 body.fe .blogwrap .grid{padding-left:12px;padding-right:12px}
 .pbodytxt .bprod{padding:12px;gap:10px}.bprod .bp-img{height:170px}.bp-b .btn{display:block;min-width:0}
 table.cmp{min-width:calc(84px + var(--n,2) * 138px)}
 table.cmp tbody th,table.cmp thead th:first-child{width:84px;font-size:12px;padding:8px 6px}
 .cm-img{width:80px;height:80px}.cm-t{font-size:13px}table.cmp .pr{font-size:15px}
 .pbodytxt{font-size:16px}
}
table.cmp tbody th{vertical-align:middle}
@media(max-width:640px){
 table.cmp{min-width:calc(72px + var(--n,2) * 126px)}
 table.cmp tbody th,table.cmp thead th:first-child{width:72px}
 table.cmp th,table.cmp td{padding:8px 5px}
 table.cmp .btn.pri{font-size:12px;white-space:nowrap;padding:9px 2px}
 table.cmp .dc{font-size:10px}
}

/* logo situs */
.sitelogo{display:block;max-width:100%;object-fit:contain}
.fe-logo .sitelogo{max-height:58px;max-width:200px}
.lp-brand .sitelogo{max-height:30px;max-width:150px}
.ln-head .brand .sitelogo{max-height:30px;max-width:160px}
.lp-brand,.ln-head .brand{display:inline-flex;align-items:center}
.side .brand .sitelogo{background:#fff;padding:6px 10px;border-radius:4px;box-sizing:border-box;max-height:48px;max-width:100%}
@media(max-width:640px){.fe-logo .sitelogo{max-height:38px;max-width:124px;height:auto!important}.lp-brand .sitelogo{max-height:26px}}

/* logo tanpa kotak putih */
.fe-logo.has-logo{background:none;width:auto;height:auto;min-height:48px;max-width:240px;align-self:center}
.fe-logo.has-logo .sitelogo{max-width:240px}
.lp-brand.has-logo,.ln-head .brand.has-logo{background:none;padding:0}
.side .brand .sitelogo{background:none;padding:0;border-radius:0}
@media(max-width:640px){.fe-logo.has-logo{width:auto;height:auto;max-width:150px}.fe-logo.has-logo .sitelogo{max-width:150px}}

/* halaman redirect: produk lainnya (internal link untuk SEO) */
.lp-rel{padding:4px 16px 14px;display:flex;flex-direction:column;gap:6px}
.lp-rel b{font-size:13px;color:#555}
.lp-rel a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;border:1px solid #eee;border-radius:8px;padding:8px 10px;font-size:13px;color:#222;text-decoration:none}
.lp-rel a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-rel a em{font-style:normal;font-weight:700;color:var(--red,#f5330a);white-space:nowrap}
.lp-rel a:hover{border-color:var(--red,#f5330a)}
.lp-rel .lp-all{justify-content:center;border:0;color:var(--red,#f5330a);font-weight:700}

/* ulasan di halaman link */
.lp-rev{padding:6px 16px 12px;display:flex;flex-direction:column;gap:8px}
.lp-rev-h{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline;font-size:14px}
.lp-rev small{color:#777}
.lp-stars{color:#f5a623;letter-spacing:1px}
.lp-rv{border:1px solid #eee;border-radius:8px;padding:8px 10px;font-size:13px}
.lp-rv p{margin-top:4px;color:#444;overflow-wrap:anywhere;white-space:pre-line}
.lp-rvf summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--red,#f5330a);padding:4px 0}
.lp-rvf form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lp-rvf input[name=name],.lp-rvf textarea{border:1px solid #cfcfcf;border-radius:6px;padding:9px 10px;font:inherit;font-size:14px;width:100%}
.lp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.lp-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.lp-pick input{position:absolute;opacity:0;pointer-events:none}
.lp-pick label{font-size:30px;line-height:1;color:#ccc;cursor:pointer}
.lp-pick input:checked~label,.lp-pick label:hover,.lp-pick label:hover~label{color:#f5a623}
.lp-rvm{font-size:13px;min-height:1em}.lp-rvm.ok{color:#1a7f37}.lp-rvm.err{color:#c0392b}

/* ===== Header baru (semua halaman) ===== */
body.fe{background:#f4f4f4;font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;color:#222;line-height:1.45}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mh{background:#e0300a;position:relative;z-index:5}
.mh-in{max-width:1140px;margin:0 auto;padding:14px 20px 12px;display:flex;align-items:center;gap:28px;box-sizing:border-box}
.mh-logo{display:flex;align-items:center;gap:10px;color:#fff;font:800 28px 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:-.5px;text-decoration:none;flex:0 0 auto}
.mh-logo.has-logo{background:none}
.mh-ico{width:38px;height:38px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center}
.mh-sc{flex:1;min-width:0}
.mh-search{display:flex;background:#fff;border-radius:999px;overflow:hidden;height:46px;box-shadow:0 2px 8px #0003;align-items:stretch}
.mh-search input{flex:1;min-width:0;border:0;outline:0;padding:0 20px;font:inherit;font-size:15px;background:transparent;color:#222}
.mh-search button{width:56px;border:0;background:#2b2b2b;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mh-pop{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.mh-pop span{color:#fff;font-size:12px;font-weight:600}
.chip2{display:inline-flex;align-items:center;background:#fff;color:#222;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.mh-nav{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.mh-nav a{color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;text-decoration:none;position:relative}
.mh-nav a:hover{background:#ffffff26}
.mh-nav .fe-fav i{position:absolute;top:0;right:0;background:#ffc107;color:#222;font-style:normal;font-size:11px;font-weight:800;border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box}
.mh-chips-m{display:none}

/* ===== Footer gelap ===== */
footer .ft-nav{background:#2b2b2b;border:0;border-top:1px solid #ffffff22;margin-top:40px}
footer .ft-nav a{color:#d6d6d6;border-left-color:#ffffff22;font-size:14px;padding:14px 28px}
footer .ft-nav a:hover{color:#ffc107}
footer .ft-body{background:#2b2b2b;border:0;color:#d6d6d6}
.ft-promo h3,.ft-help h3{color:#fff;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:20px}
.ft-promo p,.ft-help .jam{color:#d6d6d6;font-size:14px}
.ft-mascot{display:none}
.ft-form{gap:8px}
.ft-form input{border:0;border-radius:8px}
.ft-form button{background:#ffc107;color:#2b1a00;border-radius:8px;font-weight:800;font-size:15px}
.ft-form button:hover{background:#ffb300}
.ft-mail{color:#ffc107}
.ft-copy{background:#222;color:#bdbdbd;font-size:12px;padding:14px 16px}
.ft-store a{border-color:#ffffff55}

/* ===== Beranda ===== */
.hp .catgrid,.hp .spot,.hp .mptabs{display:none}
.hp .hp-main{max-width:1140px;margin:0 auto;padding:20px 20px 40px;box-sizing:border-box}
.hp .fe-main{display:block;max-width:none;padding:0}
.hp .fe-main .inner{display:flex;gap:16px;align-items:stretch}
.hp .cats{width:250px;flex:0 0 250px;border-radius:14px;padding:8px 0;background:#4b4b4b}
.hp .cats a{font-size:14px;padding:9px 18px;border-left:0;gap:12px}
.hp .cats a:hover,.hp .cats a.on{background:#d92a06}
.hp .slider{border-radius:14px;min-height:420px;background:linear-gradient(120deg,#3a2214,#6b3f1d 60%,#8a5524)}
.hp .slider .dots i{width:8px;height:8px;margin:0 4px}
.hp .slider .dots i.on{width:22px;border-radius:4px}
.hp .mpfilter{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.hp .mpfilter .lbl{font-weight:700;color:#4b4b4b;font-size:14px;margin-right:4px}
.hp .mpc{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e3e3e3;border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;white-space:nowrap;color:#222;text-decoration:none}
.hp .mpc:hover{border-color:#d92a06}
.hp .mpc.on{background:#2b2b2b;border-color:#2b2b2b;color:#fff}
.hp .mpc i,.hp .mptabs-in i{width:10px;height:10px;border-radius:50%;display:inline-block}
.hp .notice{max-width:none;margin:16px 0 0;border-radius:10px;padding:12px 18px;font-size:14px;font-weight:500}
.hp .nclose{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;width:44px;height:44px;margin:-10px -12px -10px 0;cursor:pointer}
.hp .sec{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.hp .sec-t{display:flex;align-items:center;gap:12px}
.hp .sec h2{margin:0;font:800 24px/1.2 'Plus Jakarta Sans','Inter',sans-serif;color:#222}
.hp .bar{width:6px;height:26px;border-radius:3px;background:linear-gradient(#f7941d,#d92a06)}
.hp .more{font-weight:700;color:#d92a06;text-decoration:none}
.hp .psec{margin-top:32px}
.hp .sortseg{display:flex;gap:4px;background:#fff;border:1px solid #e3e3e3;border-radius:999px;padding:4px}
.hp .sortseg a{padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;color:#4b4b4b;text-decoration:none}
.hp .sortseg a.on{background:#d92a06;color:#fff}
.hp .chips{margin:-4px 0 12px}
.hp .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding:0}
.hp .cd{background:#fff;border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.hp .cd:hover{box-shadow:0 8px 22px #0002;transform:translateY(-2px)}
.hp .ph{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hp .ph a{display:contents}
.hp .ph img{width:100%;height:100%;object-fit:cover;display:block}
.hp .ph .em{font-size:64px}
.hp .bd{position:absolute;top:8px;left:8px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:6px;text-transform:uppercase}
.hp .dc{position:absolute;top:8px;right:8px;background:#d92a06;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.hp .pp,.hp .mpl{display:none}
.hp .fav{position:absolute;right:8px;bottom:8px;width:44px;height:44px;border-radius:50%;border:0;background:#ffffffee;font-size:20px;color:#4b4b4b;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.hp .fav.on{color:#d92a06}
.hp .cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.hp .cb h3{margin:0;font:600 14px/1.35 'Inter',sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.hp .cb h3 a{color:#222;text-decoration:none}
.hp .cb h3 a:hover{text-decoration:underline}
.hp .pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hp .pr b{color:#d92a06;font-size:18px;font-weight:800}
.hp .pr s{color:#6b6b6b;font-size:12px}
.hp .rt{font-size:12px;color:#6b6b6b;display:flex;gap:4px;align-items:center}
.hp .rt span{color:#b36b00;letter-spacing:1px}
.hp .cta{margin-top:auto;display:block;text-align:center;background:#d92a06;color:#fff;font-weight:700;font-size:14px;padding:10px 12px;border-radius:8px;text-decoration:none}
.hp .cd:hover .cta{background:#b82205}
.hp .pg{display:flex;justify-content:center;gap:8px;margin-top:28px;flex-wrap:wrap}
.hp .pg a{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cfcfcf;border-radius:8px;background:#fff;font-weight:600;color:#222;text-decoration:none;padding:0 10px;box-sizing:border-box}
.hp .pg a.on{background:#d92a06;border-color:#d92a06;color:#fff}
.hp .pg a.pn{padding:0 14px}
.hp .bsec{margin-top:44px}
.hp .bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hp .hpost{background:#fff;border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.hp .hpost:hover{box-shadow:0 8px 22px #0002}
.hp .post-img{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden}
.hp .post-img img{width:100%;height:100%;object-fit:cover}
.hp .post-tx{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.hp .post-t{font:800 17px/1.3 'Plus Jakarta Sans','Inter',sans-serif}
.hp .post-s{font-size:14px;color:#4b4b4b}
.hp .post-m{font-size:12px;color:#6b6b6b;margin-top:4px}
.hp .ksec{margin-top:44px}
.hp .kgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hp .kc{display:flex;align-items:center;gap:12px;padding:10px;background:#fff;border:1px solid #e3e3e3;border-radius:12px;text-decoration:none;color:inherit}
.hp .kc:nth-child(n+5){display:none}
.hp .kc:hover{box-shadow:0 8px 22px #0002}
.hp .kc-img{flex:0 0 76px;height:76px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden}
.hp .kc-img img{width:100%;height:100%;object-fit:cover}
.hp .kc-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.hp .kc-tx b{font-weight:600;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp .kc-tx em{font-style:normal;color:#d92a06;font-weight:800}

/* ===== Mobile (desain C) ===== */
@media(max-width:900px){
 .mh-in{flex-wrap:wrap;padding:10px 4px 0 16px;gap:0;justify-content:space-between}
 .mh-logo{font-size:24px;gap:8px}
 .mh-ico{width:34px;height:34px;border-radius:9px}
 .mh-logo.has-logo img{max-width:170px}
 .mh-nav{order:2;gap:0;margin-right:0}
 .mh-nav a{width:44px;height:44px;padding:0;justify-content:center}
 .hide-m{display:none!important}
 .mh-sc{order:3;flex:0 0 100%;margin:8px 12px -26px -4px;position:relative;z-index:2;max-width:calc(100% - 8px)}
 .mh-pop{display:none}
 .mh-search{height:52px;border-radius:14px;box-shadow:0 6px 18px #0003;padding:0 6px 0 16px;align-items:center}
 .mh-search input{padding:0;font-size:15px}
 .mh-search button{width:44px;height:40px;border-radius:10px;background:#d92a06}
 .mh-chips-m{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:0 16px;margin-top:36px}
 .mh-chips-m::-webkit-scrollbar{display:none}
 .mh-chips-m span{flex:0 0 auto;font-size:12px;font-weight:600;color:#6b6b6b}
 .mh-chips-m .chip2{flex:0 0 auto;height:36px;padding:0 12px;border:1px solid #e3e3e3}
 .mh-chips-m .chip2.dk{background:#2b2b2b;color:#fff;border-color:#2b2b2b;font-weight:700}
 footer .ft-nav{margin-top:28px}
 footer .ft-nav a{padding:12px 14px;flex:1 1 33%;text-align:center}

 .hp .fe-main{display:none}
 .hp .mpfilter{display:none}
 .hp .catgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 4px;margin:14px 12px 0;background:#fff;border:1px solid #e3e3e3;border-radius:14px;padding:14px 4px}
 .hp .catgrid a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#333;min-width:0;min-height:44px}
 .hp .catgrid i{width:52px;height:52px;border-radius:50%;background:#4b4b4b;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:24px;border:2px solid transparent;box-sizing:border-box}
 .hp .catgrid span{font-size:11px;font-weight:600;text-align:center;line-height:1.2;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .hp .catgrid a.on i{background:#d92a06;border-color:#ffc107}
 .hp .spot{display:block;margin:18px 16px 0}
 .hp .spot-box{background:linear-gradient(120deg,#3a2214,#6b3f1d 62%,#8a5524);border-radius:16px;overflow:hidden;color:#fff;padding-bottom:12px}
 .hp .spot-top{padding:16px 16px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:14px}
 .hp .spot-tag{display:inline-block;background:#ffffff26;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600}
 .hp .spot h1{margin:8px 0 0;font:800 24px/1.15 'Plus Jakarta Sans','Inter',sans-serif}
 .hp .spot-top p{margin:6px 0 0;font-size:13px;opacity:.9}
 .hp .spot-hl{background:#ffc107;color:#2b1a00;font:800 13px 'Plus Jakarta Sans',sans-serif;padding:5px 10px;border-radius:7px;flex:0 0 auto}
 .hp .spot-card{margin:0 12px;background:#fff;color:#222;border-radius:14px;display:flex;gap:12px;padding:10px;align-items:center;text-decoration:none}
 .hp .sp-img{position:relative;flex:0 0 96px;height:96px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden}
 .hp .sp-img img{width:100%;height:100%;object-fit:cover}
 .hp .sp-img em{position:absolute;left:6px;top:6px;background:#d92a06;color:#fff;font:800 11px 'Inter',sans-serif;padding:3px 7px;border-radius:6px;font-style:normal}
 .hp .sp-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
 .hp .sp-tx small{font-size:11px;font-weight:700;text-transform:uppercase}
 .hp .sp-t{font-weight:600;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .hp .sp-p{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
 .hp .sp-p b{color:#d92a06;font-size:18px;font-weight:800}
 .hp .sp-p s{font-size:11px;color:#6b6b6b}
 .hp .sp-cta{margin-top:4px;align-self:flex-start;background:#d92a06;color:#fff;font-weight:700;font-size:13px;height:40px;padding:0 16px;border-radius:8px;display:inline-flex;align-items:center}
 .hp .hp-main{padding:0 0 28px}
 .hp .notice{margin:12px 16px 0;padding:8px 4px 8px 12px;font-size:12.5px}
 .hp .nclose{height:36px;margin:0}
 .hp .psec{margin-top:22px}
 .hp .sec{margin:0 16px 10px}
 .hp .sec h2{font-size:19px}
 .hp .bar{display:none}
 .hp .sortseg{padding:3px}
 .hp .sortseg a{padding:8px 11px;font-size:12px}
 .hp .mptabs{display:block}
 .hp .mptabs-in{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid #e3e3e3;background:#fff;padding:0 8px;position:sticky;top:0;z-index:4}
 .hp .mptabs-in::-webkit-scrollbar{display:none}
 .hp .mptabs-in a{flex:0 0 auto;padding:0 14px;height:48px;display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:#4b4b4b;border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none}
 .hp .mptabs-in a.on{color:#d92a06;border-bottom-color:#d92a06}
 .hp .mptabs-in i{width:9px;height:9px}
 .hp .chips{margin:10px 16px 0}
 .hp .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 16px 0}
 .hp .cd{border-radius:14px}
 .hp .cd:hover{transform:none;box-shadow:none}
 .hp .bd,.hp .pr{display:none}
 .hp .pp{display:block;position:absolute;left:8px;bottom:8px;background:#d92a06;color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;max-width:calc(100% - 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
 .hp .dc{background:#2b2b2b;color:#ffc107;font-weight:800}
 .hp .fav{width:36px;height:36px;right:6px;bottom:6px;font-size:18px}
 .hp .ph .em{font-size:52px}
 .hp .cb{padding:10px 12px 52px;gap:4px;position:relative}
 .hp .cb h3{font-size:13px;min-height:35px}
 .hp .mpl{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#4b4b4b;flex-wrap:wrap}
 .hp .mpl i{width:8px;height:8px;border-radius:50%;display:inline-block}
 .hp .mpl s{color:#6b6b6b;font-weight:400}
 .hp .rt{font-size:11px}
 .hp .cta{position:absolute;right:8px;bottom:8px;margin:0;height:40px;min-width:56px;padding:0 14px;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:999px;box-shadow:0 2px 6px #0003}
 .hp .pg{margin:20px 16px 0}
 .hp .bsec,.hp .ksec{margin-top:30px}
 .hp .bgrid{display:flex;flex-direction:column;gap:10px;padding:0 16px}
 .hp .hpost{flex-direction:row;gap:12px;padding:10px;align-items:center}
 .hp .post-img{flex:0 0 80px;height:80px;aspect-ratio:auto;border-radius:10px;font-size:32px}
 .hp .post-tx{padding:0;gap:2px;min-width:0}
 .hp .post-t{font-size:15px}
 .hp .post-s{display:none}
 .hp .post-m{margin:0}
 .hp .kgrid{display:flex;gap:10px;overflow-x:auto;padding:0 16px;scrollbar-width:none;scroll-snap-type:x proximity}
 .hp .kgrid::-webkit-scrollbar{display:none}
 .hp .kc{flex:0 0 140px;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;scroll-snap-align:start}
 .hp .kc:nth-child(n+5){display:flex}
 .hp .kc-img{flex:none;width:100%;height:auto;aspect-ratio:4/3;border-radius:0}
 .hp .kc-tx{padding:8px 10px 10px}
 .hp .kc-tx b{font-size:12px;min-height:32px}
}
@media(max-width:360px){.hp .catgrid i{width:46px;height:46px;font-size:21px}.mh-logo{font-size:21px}}

.hp .cats a{color:#fff;text-decoration:none}
.hp .hpost{padding:0;border-radius:12px;box-shadow:none}
@media(max-width:900px){
 .hp .x{display:none}
 .hp .fav{left:6px;right:auto;top:6px;bottom:auto}
 .hp .dc{top:6px;right:6px}
 .hp .pp{max-width:calc(100% - 16px)}
 .hp .hpost{padding:10px}
}
.hp .notice svg{flex:0 0 20px}
@media(min-width:901px){
 .mh-in{padding:16px 20px 24px;align-items:flex-start}
 .mh-logo{margin-top:0;min-height:46px}
 .mh-nav{min-height:46px}
 .mh-pop{margin-top:12px}
 .hp .hp-main{padding-top:28px}
}
body.fe .hp .hp-main{padding-top:32px;padding-bottom:40px}
@media(max-width:900px){body.fe .hp .hp-main{padding:0 0 28px}}

/* ===== Halaman 404 ===== */
.nf-box{text-align:center;background:#fff;border:1px solid #e3e3e3;border-radius:16px;padding:36px 20px 32px;margin:0 0 8px}
.nf-code{font:800 84px/1 'Plus Jakarta Sans','Inter',sans-serif;background:linear-gradient(#f7941d,#d92a06);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-box h1{font:800 26px/1.2 'Plus Jakarta Sans','Inter',sans-serif;margin:10px 0 6px}
.nf-box p{max-width:520px;margin:0 auto 18px;color:#4b4b4b;font-size:15px}
.nf-search{display:flex;max-width:460px;margin:0 auto 16px;background:#fff;border:1px solid #cfcfcf;border-radius:999px;overflow:hidden;height:46px}
.nf-search input{flex:1;min-width:0;border:0;outline:0;padding:0 18px;font:inherit;font-size:15px}
.nf-search button{border:0;background:#2b2b2b;color:#fff;font-weight:700;padding:0 22px;cursor:pointer}
.nf-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.nf-btns a{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;font-weight:700;text-decoration:none}
.nf-b1{background:#d92a06;color:#fff}.nf-b2{background:#fff;color:#222;border:1px solid #cfcfcf}
@media(min-width:901px){.nf .grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:900px){.nf .nf-box{margin:16px 16px 0;padding:28px 16px 24px}.nf-code{font-size:64px}.nf-box h1{font-size:22px}}

/* ===== Video YouTube di kartu ===== */
.hp .ph.vid{background:#000!important}
.hp .ph.vid::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#0008 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7l9 5-9 5z'/%3E%3C/svg%3E") center/26px no-repeat;pointer-events:none;z-index:1;transition:opacity .2s}
.hp .ph.vid.playing::after{opacity:0}
.hp .ph .ytf{position:absolute;top:0;left:50%;height:100%;width:177.78%;transform:translateX(-50%);border:0;pointer-events:none;z-index:0}
.hp .ph.vid>a{position:absolute;inset:0;display:block;z-index:2}
.hp .ph.vid>a img{width:100%;height:100%;object-fit:cover}
.hp .ph.vid .bd,.hp .ph.vid .dc,.hp .ph.vid .pp,.hp .ph.vid .fav{z-index:3}
.hp .ph.vid.playing>a img{opacity:0}

/* ===== Lazy load (HP) ===== */
.lazy{text-align:center;padding:18px 16px 4px;min-height:8px}
.lazy-st{font-size:13px;color:#6b6b6b;min-height:18px}
.lazy-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:999px;border:0;background:#d92a06;font:700 15px 'Inter',sans-serif;color:#fff;cursor:pointer;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;box-shadow:0 6px 18px #0005;white-space:nowrap}
.lazy-btn[hidden]{display:none}
.lazy-btn:active{background:#b82205}
@media(min-width:901px){.lazy{display:none}}
@media(max-width:900px){html.lazy-on .hp .pg{display:none}}

/* ===== Header menempel (sticky) di web & HP ===== */
.mh{position:sticky;top:0;z-index:70}
@media(max-width:900px){
 .mh.stuck{padding-bottom:10px}
 .mh.stuck .mh-sc{margin-bottom:0}
 .mh.stuck + .mh-chips-m{margin-top:0}
 .hp .mptabs-in{top:var(--mh-h,0px)}
}
@media(max-width:900px){
 .hp .mptabs{position:sticky;top:var(--mh-h,0px);z-index:40;background:#fff}
 .hp .mptabs-in{position:static}
}

/* breadcrumb & intro kategori */
.hp .hp-crumb{font-size:13px;color:#777;margin:0 0 10px}
.hp .hp-crumb a{color:#d92a06;text-decoration:none}
.hp .catintro{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 16px;margin:0 0 14px}
.hp .catintro h1{font:800 20px/1.3 'Plus Jakarta Sans',sans-serif;margin:0 0 6px;color:#2b2b2b}
.hp .catintro p{margin:0;font-size:14px;line-height:1.6;color:#555}

/* tombol "Cek Sekarang" diseragamkan (blog, tabel compare, kartu produk): warna penuh, tidak pernah samar */
a.btn.pri[rel~="sponsored"],a.btn.pri[rel~="nofollow"],.pbodytxt a.btn.pri,table.cmp a.btn.pri,.bp-b a.btn.pri{
  opacity:1!important;filter:none!important;mix-blend-mode:normal!important;
  border:0!important;border-radius:6px;font-weight:700;font-size:14px;line-height:1.2;
  padding:11px 16px;text-align:center;text-decoration:none;box-shadow:none;
  background-color:var(--mpbg,#f5330a);transition:filter .12s}
a.btn.pri[rel~="sponsored"]:hover,a.btn.pri[rel~="nofollow"]:hover,.pbodytxt a.btn.pri:hover,table.cmp a.btn.pri:hover,.bp-b a.btn.pri:hover{filter:brightness(.92)!important}
table.cmp a.btn.pri{display:block;width:100%;box-sizing:border-box;padding:11px 6px;font-size:13px}

/* seragam: semua tombol aksi di blog memakai merah situs yang sama (inline warna marketplace diabaikan) */
body.fe .blogwrap a.btn.pri,body.fe .pbodytxt a.btn.pri,body.fe table.cmp a.btn.pri{
  background:#f5330a!important;background-color:#f5330a!important;border:0!important;color:#fff!important;
  opacity:1!important;filter:none!important;border-radius:6px;font-weight:700;font-size:14px;padding:11px 16px;box-shadow:none;text-align:center;text-decoration:none}
body.fe .blogwrap a.btn.pri:hover,body.fe .pbodytxt a.btn.pri:hover,body.fe table.cmp a.btn.pri:hover{background:#d92a06!important;filter:none!important}
body.fe .pcard .pbody a.btn.pri{display:block;width:100%;box-sizing:border-box;margin-top:auto}
body.fe table.cmp a.btn.pri{display:block;width:100%;box-sizing:border-box;font-size:13px;padding:11px 6px}


/* ===== Katalog Promo ===== */
body.fe .pmwrap a.btn.pri,body.fe .pmhome a.btn.pri{background:#f5330a!important;color:#fff!important;border-color:#f5330a!important}
body.fe .pmwrap a.btn.pri:hover,body.fe .pmhome a.btn.pri:hover{background:#d92a06!important;filter:none!important}
.pm-search{display:flex;gap:8px;margin:0 0 12px;max-width:560px}
.pm-search input{flex:1;min-width:0;border:1px solid #d5d5d5;border-radius:8px;padding:10px 12px;font:inherit}
.pm-search .btn{width:auto;padding:10px 18px}
.pm-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.pm-chip{display:inline-block;padding:6px 14px;border:1px solid #d5d5d5;border-radius:999px;background:#fff;color:#333;font-size:13.5px;font-weight:600;text-decoration:none}
.pm-chip small{font-weight:500;color:#888}
.pm-chip.on{background:#2b2b2b;border-color:#2b2b2b;color:#fff}.pm-chip.on small{color:#ccc}
.pm-chip:hover{border-color:#e0300a}
.pm-sep{width:1px;height:22px;background:#ddd;margin:0 4px}
.pm-cats .pm-chip{font-size:12.5px;padding:4px 11px}
.pmcard .pimg{height:170px}
.pmcard .pimg img{object-fit:cover}
.pm-kind{position:absolute;left:8px;top:8px;background:#000b;color:#fff;font-size:11px;font-weight:700;border-radius:4px;padding:2px 8px}
.pm-brand{font-size:11.5px;font-weight:700;color:#e0300a;text-transform:uppercase;letter-spacing:.4px}
.pmcard.is-end{opacity:.72}
.pm-st{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:3px 11px;margin:2px 0 8px}
.pm-st.ok{background:#e8f7ee;color:#15803d}.pm-st.soon{background:#fee2e2;color:#b91c1c}.pm-st.soon2{background:#fff4e0;color:#b45309}.pm-st.end{background:#eee;color:#666}
.pm-head{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:18px;margin:0 0 14px}
.pm-head h1{font:800 26px/1.25 'Plus Jakarta Sans',Inter,sans-serif;margin:6px 0 12px}
.pm-tags{display:flex;gap:6px;flex-wrap:wrap}
.pm-kind2{background:#e0300a;color:#fff;border-radius:4px;font-size:12px;font-weight:700;padding:2px 9px}
.pm-cat{background:#f1f1f1;color:#555;border-radius:4px;font-size:12px;font-weight:600;padding:2px 9px}
.pm-period{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#fafafa;border-radius:10px;padding:10px 14px}
.pm-period small{display:block;color:#777;font-size:12px}.pm-period b{font-size:16px}
.pm-period .pm-st{margin:0}
.pm-endbox{margin-top:10px;background:#f3f3f3;border-radius:8px;padding:10px 14px;font-size:14px;color:#555}.pm-endbox a{color:#e0300a;font-weight:600}
.pm-price{margin-top:12px;font:800 22px 'Plus Jakarta Sans',Inter,sans-serif;color:#e0300a}
.pm-code{display:flex;align-items:center;gap:10px;margin-top:12px;border:2px dashed #e0300a;border-radius:10px;padding:8px 12px;background:#fff5f2;max-width:360px}
.pm-code span{font-size:13px;color:#777}.pm-code b{flex:1;font-size:18px;letter-spacing:2px;color:#e0300a}
.pm-code button{border:0;background:#e0300a;color:#fff;border-radius:6px;padding:7px 14px;font-weight:700;cursor:pointer}
.pm-cta{display:block;text-align:center;margin-top:14px;padding:13px}
.pm-gal{background:#111;border-radius:12px;padding:10px;margin:0 0 14px}
.pm-main{display:flex;justify-content:center;background:#000;border-radius:8px;overflow:hidden}
.pm-main img{max-width:100%;max-height:680px;width:auto;height:auto;object-fit:contain;display:block}
.pm-th{display:flex;gap:8px;overflow:auto;padding:10px 0 4px}
.pm-th button{flex:none;width:58px;height:76px;border:2px solid transparent;border-radius:6px;overflow:hidden;padding:0;background:#333;cursor:pointer;opacity:.65}
.pm-th button.on{border-color:#ffc107;opacity:1}
.pm-th img{width:100%;height:100%;object-fit:cover;display:block}
.pm-gal .muted{color:#aaa;font-size:12px}
details.pm-acc{border:1px solid #e3e3e3;border-radius:10px;margin:8px 0;background:#fff;overflow:hidden}
details.pm-acc summary{cursor:pointer;padding:12px 14px;font-weight:600;background:#fafafa;list-style:none}
details.pm-acc summary::-webkit-details-marker{display:none}
details.pm-acc summary:after{content:"▾";float:right;color:#888}
details.pm-acc[open] summary:after{content:"▴"}
details.pm-acc>*:not(summary){margin:10px 14px 12px}
.pm-src{font-size:13px;color:#666;background:#fff;border:1px solid #e3e3e3;border-radius:10px;padding:12px 14px;margin:16px 0}
.pm-disc{text-align:center;margin:0 0 20px;font-size:12.5px;color:#888}
.pm-prods .bprod{margin-bottom:12px}
@media(max-width:700px){.pm-head h1{font-size:21px}.pmcard .pimg{height:150px}.pm-search{max-width:none}.pm-main img{max-height:520px}}
details.pm-acc ol,details.pm-acc ul{padding-left:22px;margin-left:14px;margin-right:14px}
.pm-gnote{background:#fffbe6;border:1px solid #ffe58f;border-radius:8px;padding:10px 12px;font-size:14px;margin:0 0 14px}

/* ===== Saran pencarian & hasil ===== */
.mh-sc{position:relative}
.mh-sg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;color:#222;border-radius:14px;box-shadow:0 12px 32px #0004;z-index:80;overflow:hidden;max-height:min(70vh,520px);overflow-y:auto;text-align:left}
.mh-sg[hidden]{display:none}
.sg-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#999;padding:10px 14px 4px}
.sg-row{display:flex;gap:10px;align-items:center;padding:8px 14px;color:#222;text-decoration:none}
.sg-row:hover,.sg-row.on{background:#fff3ef}
.sg-img,.sr-img{flex:none;width:44px;height:44px;border-radius:8px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.sg-img img,.sr-img img{width:100%;height:100%;object-fit:cover;display:block}
.sg-tx,.sr-tx{min-width:0;display:flex;flex-direction:column}
.sg-tx b,.sr-tx b{font-size:14px;line-height:1.3;font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sg-tx small,.sr-tx small{font-size:12px;color:#777;margin-top:1px}
.sg-empty{padding:14px;color:#777;font-size:14px}
.sg-all{display:block;padding:11px 14px;border-top:1px solid #eee;color:#e0300a;font-weight:700;font-size:13.5px;text-decoration:none;background:#fafafa;position:sticky;bottom:0}
.sr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 8px}
.sr-row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #e3e3e3;border-radius:10px;padding:10px;color:#222;text-decoration:none}
.sr-row:hover{border-color:#e0300a}
.sr-img{width:64px;height:64px;font-size:28px}
.sr-more{color:#e0300a;font-weight:700;font-size:14px}
@media(max-width:700px){.sr-list{grid-template-columns:1fr}.mh-sg{left:-4px;right:-4px}}

/* ===== Detail promo: layout 2 kolom ===== */
body.fe .blogwrap.pmdetail{max-width:1180px}
.pm-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.pm-col{min-width:0}
.pm-col .post{max-width:none}
.pm-side{position:sticky;top:12px;display:grid;gap:14px}
.pm-sbox{background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:14px}
.pm-sbox h2{font:800 16px 'Plus Jakarta Sans',Inter,sans-serif;margin:0 0 10px}
.pm-sc{display:flex;gap:10px;padding:9px 0;border-top:1px solid #f0f0f0;color:#222;text-decoration:none}
.pm-sbox h2+.pm-sc{border-top:0;padding-top:0}
.pm-sc:hover b{color:#e0300a}
.pm-sc-img{flex:none;width:76px;height:76px;border-radius:8px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden}
.pm-sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.pm-sc-tx{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pm-sc-tx em{font-style:normal;font-size:11px;font-weight:700;color:#e0300a;text-transform:uppercase;letter-spacing:.3px}
.pm-sc-tx b{font-size:13.5px;line-height:1.3;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pm-sc-tx .pm-st{font-size:11px;padding:2px 9px;margin:2px 0 0}
.pm-sall{display:block;text-align:center;margin-top:8px;padding:9px;border-radius:8px;background:#f6f6f6;color:#e0300a;font-weight:700;font-size:13.5px;text-decoration:none}
@media(max-width:980px){.pm-layout{grid-template-columns:minmax(0,1fr)}.pm-side{position:static}}

/* ===== Lightbox gambar promo ===== */
.lb{position:fixed;inset:0;z-index:300;background:#000f;display:flex;flex-direction:column;touch-action:none}
.lb[hidden]{display:none}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;color:#fff;position:relative;z-index:2}
.lb-cnt{font-weight:700;font-size:14px;background:#0008;border-radius:20px;padding:4px 12px}
.lb-tools{display:flex;gap:6px}
.lb-tools button{min-width:40px;height:40px;border:0;border-radius:10px;background:#fff2;color:#fff;font-size:20px;font-weight:700;cursor:pointer;padding:0 10px}
.lb-tools button:hover{background:#fff4}
#lbReset{font-size:13px;min-width:56px}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;position:relative}
.lb-stage.zoomed{cursor:grab}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-drag:none;will-change:transform}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border:0;border-radius:12px;background:#0008;color:#fff;font-size:34px;line-height:1;cursor:pointer;z-index:2}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-nav:hover{background:#000b}
.lb-hint{text-align:center;color:#bbb;font-size:12px;padding:8px 10px 12px}
.pm-main{cursor:zoom-in}
@media(max-width:700px){.lb-nav{width:38px;height:54px;font-size:28px}.lb-hint{font-size:11px}}

/* ===== Rekomendasi produk (detail promo) ===== */
.pm-rgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:6px 0 18px}
.pm-rc{overflow:hidden}
.pm-ri{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#f4f4f4;font-size:46px;text-decoration:none}
.pm-ri img{width:100%;height:100%;object-fit:cover;display:block}
.pm-rd{position:absolute;top:6px;right:6px;background:#f5330a;color:#fff;font-size:11px;font-weight:700;font-style:normal;padding:2px 6px;border-radius:4px}
.pm-rb{padding:9px 10px 11px;display:flex;flex-direction:column;gap:4px;flex:1}
.pm-rm{font-size:11px;font-weight:700;color:#777;text-transform:uppercase}
.pm-rb h3{font-size:13px;line-height:1.3;font-weight:600;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pm-rb h3 a{color:#222;text-decoration:none}
.pm-rp{font:800 15px 'Plus Jakarta Sans',Inter,sans-serif;color:#e0300a}
.pm-rb .btn{margin-top:auto;padding:8px;font-size:12.5px}
body.fe .pmwrap .pm-rb a.btn.pri{background:#f5330a!important;border-color:#f5330a!important}
@media(max-width:700px){.pm-rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.pm-rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.pm-rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-rc:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 6px)}}

/* sidebar: tidak tertutup header sticky; bila lebih tinggi dari layar, bisa digulir sendiri */
.pm-side{top:100px;max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
@media(max-width:980px){.pm-side{top:auto;max-height:none;overflow:visible}}
.pm-tsub{display:block;color:#888;font-size:12px;margin:-6px 0 8px}
.pm-tp{display:flex;gap:9px;align-items:center;padding:8px 0;border-top:1px solid #f0f0f0;color:#222;text-decoration:none}
.pm-tsub+.pm-tp{border-top:0}
.pm-tp:hover b{color:#e0300a}
.pm-tp.cur{background:#fff7f4;border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px}
.pm-rk{flex:none;width:24px;height:24px;border-radius:50%;background:#eee;color:#555;font:800 12px 'Plus Jakarta Sans',Inter,sans-serif;display:flex;align-items:center;justify-content:center}
.pm-rk.r1{background:#ffc107;color:#3b2a00}.pm-rk.r2{background:#cfd4da;color:#333}.pm-rk.r3{background:#e7a56a;color:#3d2100}
.pm-tp-img{flex:none;width:48px;height:48px;border-radius:7px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.pm-tp-img img{width:100%;height:100%;object-fit:cover;display:block}
.pm-tp-tx{min-width:0;display:flex;flex-direction:column}
.pm-tp-tx b{font-size:13px;line-height:1.3;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pm-tp-tx small{font-size:11.5px;color:#777;margin-top:1px}
.pm-tp-tx small .ok{color:#15803d}.pm-tp-tx small .soon{color:#b91c1c;font-weight:700}.pm-tp-tx small .soon2{color:#b45309}

/* ===== Promo terbaru di beranda ===== */
.hp .prsec{margin-top:44px}
.pmhome{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pmhome .pmcard .pimg{height:150px}
@media(max-width:900px){.pmhome{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .hp .prsec{margin-top:30px}
  .pmhome{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 8px;scrollbar-width:none}
  .pmhome::-webkit-scrollbar{display:none}
  .pmhome .pmcard{flex:0 0 74%;scroll-snap-align:start}
  .pmhome .pmcard .pimg{height:160px}
}

/* ===== Halaman statis (/tentang-kami, /karir, ...) ===== */
.spage h2{font-size:21px;margin:26px 0 8px;line-height:1.3}
.spage h2:first-child{margin-top:4px}
.spage ul,.spage ol{margin:0 0 14px 22px}
.spage li{margin:0 0 6px}
.spage a{color:#0a64c8;text-decoration:underline}

/* ===== /promo: ringkasan, slider kategori, blok terbaru & per kategori ===== */
.pm-sum{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:#555;margin:0 0 12px}
.pm-sum b{color:#222}
.pm-sum-u{margin-left:auto;color:#888}
.pm-cs{position:relative;margin:0 0 22px}
.pm-cs-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 6px}
.pm-cs-track::-webkit-scrollbar{display:none}
.pm-cs-chip{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3e3e3;border-radius:999px;padding:7px 18px 7px 8px;text-decoration:none;color:#222;scroll-snap-align:start;transition:.15s}
.pm-cs-chip .ic{width:36px;height:36px;border-radius:50%;background:#fff1ec;display:grid;place-items:center;font-size:19px}
.pm-cs-chip .tx{display:flex;flex-direction:column;line-height:1.2}
.pm-cs-chip b{font-size:14px;font-weight:700;white-space:nowrap}
.pm-cs-chip small{font-size:11.5px;color:#888}
.pm-cs-chip:hover{border-color:#f5330a;box-shadow:0 2px 8px #0001}
.pm-cs-chip.on{background:#f5330a;border-color:#f5330a;color:#fff}
.pm-cs-chip.on .ic{background:#fff3}
.pm-cs-chip.on small{color:#ffe0d8}
.pm-cs-arr,.pm-car-arr{position:absolute;top:50%;transform:translateY(-60%);z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid #ddd;background:#fff;box-shadow:0 2px 8px #0002;font-size:20px;line-height:1;cursor:pointer;color:#333;display:grid;place-items:center;padding:0}
.pm-cs-arr.l{left:-12px}.pm-cs-arr.r{right:-12px}
.pm-cs-arr:hover,.pm-car-arr:hover{background:#f5330a;color:#fff;border-color:#f5330a}
.pm-blk{margin:0 0 34px}
.pm-blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.pm-blk-h h2{font-size:22px;margin:0;color:#222;min-width:0}
.pm-blk-h h2 small{font-size:13px;font-weight:600;color:#888;background:#eee;border-radius:99px;padding:2px 9px;vertical-align:middle;margin-left:4px}
.pm-blk-h a{font-size:14px;font-weight:600;color:#e0300a;text-decoration:none;white-space:nowrap}
.pm-blk-h a:hover{text-decoration:underline}
/* grid terbaru memakai .grid bawaan (sama dengan /blog: 5 kolom desktop, 2 kolom HP) */
.pm-latest{padding-bottom:6px}
.pm-more{text-align:center;margin-top:18px}
.pm-more .btn,.pm-morecard .btn{background:#fff;border:1.5px solid #f5330a;color:#e0300a;font-weight:700;padding:10px 22px;border-radius:99px;cursor:pointer}
.pm-more .btn:hover,.pm-morecard .btn:hover{background:#f5330a;color:#fff}
.pm-more .btn small,.pm-morecard .btn small{display:block;font-weight:500;opacity:.8}
.pm-more .btn:disabled,.pm-morecard .btn:disabled{opacity:.5;cursor:wait}
.pm-car{position:relative}
.pm-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 8px}
.pm-track::-webkit-scrollbar{display:none}
.pm-track .pmcard{flex:0 0 calc((100% - 64px)/5);min-width:0;scroll-snap-align:start}
.pm-morecard{flex:0 0 calc((100% - 64px)/5);display:grid;place-items:center;border:2px dashed #f5a48f;border-radius:10px;background:#fff8f6;min-height:200px;scroll-snap-align:start}
.pm-car-arr.l{left:-12px}.pm-car-arr.r{right:-12px}
@media(max-width:1000px){.pm-track .pmcard,.pm-morecard{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:700px){
  .pm-track{gap:10px}.pm-track .pmcard,.pm-morecard{flex-basis:62%}
  .pm-cs-arr,.pm-car-arr{display:none}
  .pm-blk-h h2{font-size:18px}.pm-blk-h a{font-size:13px}.pm-blk-h a .nm{display:none}
  .pm-sum-u{margin-left:0;flex-basis:100%}
}
.pm-pl{margin:22px 0;border:0;background:transparent;border-radius:0;overflow:visible}
.pm-pl-h{padding:0 0 6px;font-weight:700;font-size:18px;border:0;background:transparent}
.pm-pc{display:flex;gap:14px;align-items:center;padding:10px 0;border:0;color:inherit;text-decoration:none}
.pm-pc:hover .pm-pt{color:#e0300a}
.pm-pi{flex:0 0 76px;height:76px;border-radius:10px;overflow:hidden;background:#f3f3f4;display:flex;align-items:center;justify-content:center;font-size:32px}
.pm-pi img{width:100%;height:100%;object-fit:cover;margin:0}
.pm-px{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-pt{font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-pp b{color:#e0300a;font-size:15px}.pm-pp s{color:#999;font-size:12px}.pm-pp i{font-style:normal;background:#fde4dd;color:#c0300a;font-size:11px;font-weight:700;border-radius:5px;padding:1px 5px}
.pm-pm{font-size:12px;color:#888}
.pm-pg{flex:none;background:#e0300a;color:#fff;font-weight:700;font-size:13px;border-radius:9px;padding:8px 14px}
.pm-pf{padding:6px 0 0;font-size:11px;color:#999;background:transparent}
@media(max-width:560px){.pm-pi{flex-basis:64px;height:64px}.pm-pg{display:none}}
.pbodytxt .pm-pc,.pbodytxt .pm-pc:hover{text-decoration:none;color:inherit;border:0}
.pbodytxt .pm-pc .pm-pt{color:inherit;text-decoration:none}.pbodytxt .pm-pc:hover .pm-pt{color:#e0300a}
.pbodytxt .pm-pc .pm-pp,.pbodytxt .pm-pc .pm-pp *{text-decoration:none}.pbodytxt .pm-pc .pm-pp s{text-decoration:line-through}
.pbodytxt .pm-pc .pm-pm{color:#888;text-decoration:none}.pbodytxt .pm-pc .pm-pg{color:#fff;text-decoration:none}
.pbodytxt .pm-pl p{margin:0}