/* =====================================================================
   PixelTrader — gaya situs publik (dark + gold)
   Dipakai index.php dan halaman komunitas (events, community, brokers).
   Bagian 1: gaya homepage asli. Bagian 2: komponen baru (event, komunitas, broker).
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;}
img{max-width:100%;}
h1,h2,h3,h4{color:var(--ink);}
:root{
    --bg:#0C1120; --bg2:#0F1628; --card:#141D31; --card2:#18233B; --well:#0F1628;
    --line:rgba(150,166,200,.13); --line2:rgba(150,166,200,.24);
    --ink:#E8EDF6; --muted:#8E99AF; --dim:#5D6982;
    --gold:#EBBE52; --gold2:#C88A1F; --gold-soft:rgba(235,190,82,.12);
    --up:#36D69B; --down:#FF6B7D; --up-soft:rgba(54,214,155,.13); --down-soft:rgba(255,107,125,.13);
}
html{scroll-behavior:smooth;}
body{
    background:var(--bg); color:var(--ink);
    font-family:'Sora', system-ui, sans-serif; font-size:15px; line-height:1.6;
    font-variant-numeric:tabular-nums; overflow-x:hidden;
}
a{color:var(--gold);} a:hover{color:#F6D57E;}
::selection{background:rgba(235,190,82,.35);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 22px;}
.muted{color:var(--muted);}
section{scroll-margin-top:80px;}

/* nav */
.topnav{position:sticky; top:0; z-index:1000; background:rgba(12,17,32,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topnav .wrap{display:flex; align-items:center; gap:18px; height:68px;}
.logo{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:17px; margin-right:auto;}
.logo:hover{color:var(--ink);}
.logo .mk{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(145deg,#F6D57E,var(--gold2)); color:#2A1C02; font-size:16px;}
.navlinks{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.navlinks a{color:var(--muted); text-decoration:none; font-size:14px; padding:8px 12px; border-radius:8px; display:inline-flex; align-items:center; gap:6px;}
.navlinks a:hover{color:var(--ink); background:rgba(150,166,200,.08);}
.live-pill{font-size:10px; font-weight:700; color:#2A1C02; background:var(--gold); border-radius:999px; padding:1px 7px; letter-spacing:.3px;}
.btn-gold{background:var(--gold); color:#2A1C02 !important; font-weight:600; border:0; border-radius:10px; padding:11px 20px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:background .15s;}
.btn-gold:hover{background:#F6D57E;}
.btn-ghost{background:transparent; color:var(--ink) !important; border:1px solid var(--line2); border-radius:10px; padding:10px 19px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-weight:500;}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold) !important;}
.navlinks .btn-gold{padding:8px 16px; margin-left:6px; font-size:14px;}
.burger{display:none; background:transparent; border:1px solid var(--line2); color:var(--ink); border-radius:8px; width:40px; height:40px; font-size:20px;}

/* hero */
.hero{position:relative; padding:84px 0 72px; overflow:hidden;}
.hero::before{content:''; position:absolute; inset:-200px -100px auto auto; width:760px; height:760px;
    background:radial-gradient(closest-side, rgba(235,190,82,.16), transparent 70%); pointer-events:none;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; position:relative;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--gold); background:var(--gold-soft); border:1px solid rgba(235,190,82,.25); border-radius:999px; padding:5px 12px;}
.hero h1{font-size:54px; line-height:1.07; font-weight:700; letter-spacing:-1.6px; margin:20px 0 18px;}
.hero h1 .au{color:var(--gold);}
.hero .lead{font-size:18px; color:var(--muted); max-width:34em; margin-bottom:30px;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap;}
.ticks{display:flex; gap:22px; flex-wrap:wrap; margin-top:28px; font-size:14px; color:var(--muted);}
.ticks i{color:var(--up); margin-right:6px;}

/* live panel (hero) */
.term{background:var(--card); border:1px solid rgba(235,190,82,.25); border-radius:18px; padding:20px 22px; box-shadow:0 30px 80px rgba(0,0,0,.45);}
.term-h{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin-bottom:12px;}
.term-h b{color:var(--ink); font-weight:600;}
.term-h .st{margin-left:auto; display:inline-flex; align-items:center; gap:6px;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--dim); position:relative;}
.dot.ok{background:var(--up);}
.dot.ok::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--up); opacity:0; animation:ring 2s ease-out infinite;}
@keyframes ring{0%{transform:scale(.6);opacity:.7;}100%{transform:scale(1.6);opacity:0;}}
.t-px{font-size:44px; font-weight:600; letter-spacing:-1.4px; line-height:1.05;}
.t-px.up{color:var(--up);} .t-px.down{color:var(--down);}
.t-chg{display:inline-block; font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--well); margin-top:6px;}
.t-chg.up{background:var(--up-soft); color:var(--up);} .t-chg.down{background:var(--down-soft); color:var(--down);}
.t-spark{height:70px; margin:14px -4px 10px;}
.t-spark svg{width:100%; height:100%; display:block;}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.t-cell{background:var(--well); border-radius:10px; padding:9px 11px; min-width:0;}
.t-cell span{display:block; font-size:11px; color:var(--muted);}
.t-cell b{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.t-verdict{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:11px 13px; border-radius:10px; background:var(--well);}
.t-verdict span{font-size:12px; color:var(--muted);}
.t-verdict b{font-size:15px;}
.t-bar{position:relative; flex:1; height:8px; border-radius:999px; background:linear-gradient(90deg, rgba(255,107,125,.4), rgba(150,166,200,.15), rgba(54,214,155,.4)); max-width:180px;}
.t-bar i{position:absolute; top:50%; width:12px; height:12px; border-radius:50%; background:var(--ink); border:2px solid var(--card); transform:translate(-50%,-50%); transition:left .6s;}
.term-f{font-size:11.5px; color:var(--dim); margin-top:12px;}
.up{color:var(--up);} .down{color:var(--down);}

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat{padding:26px 22px; text-align:center;}
.stat + .stat{border-left:1px solid var(--line);}
.stat b{display:block; font-size:34px; font-weight:700; letter-spacing:-1px;}
.stat span{color:var(--muted); font-size:14px;}

/* sections */
.sec{padding:96px 0;}
.sec-alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-h{max-width:640px; margin-bottom:44px;}
.sec-h h2{font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.15; margin:0 0 12px;}
.sec-h p{color:var(--muted); font-size:17px; margin:0;}
.sec-h.center{margin-left:auto; margin-right:auto; text-align:center;}

/* gold panels spotlight */
.gp-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start;}
.gp-points{display:grid; gap:20px; margin:0; padding:0; list-style:none;}
.gp-points li{display:grid; grid-template-columns:40px 1fr; gap:14px;}
.gp-points .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold); font-size:18px;}
.gp-points h3{font-size:16px; font-weight:600; margin:2px 0 4px;}
.gp-points p{color:var(--muted); font-size:14px; margin:0;}
.vers{display:grid; gap:12px;}
.ver{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.ver:hover{border-color:rgba(235,190,82,.5); color:var(--ink); transform:translateX(3px);}
.ver .tag{font-size:12px; font-weight:700; color:#2A1C02; background:var(--gold); border-radius:8px; padding:6px 9px;}
.ver.v1 .tag{background:#74AEFF; color:#06142B;}
.ver.v3 .tag{background:linear-gradient(145deg,#F6D57E,var(--gold2));}
.ver h3{font-size:16px; font-weight:600; margin:0 0 3px;}
.ver p{font-size:13.5px; color:var(--muted); margin:0;}
.ver .go{color:var(--muted); font-size:18px;}
.gp-note{font-size:12.5px; color:var(--dim); margin-top:14px;}

/* features */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.feat > div{background:var(--card); padding:30px 28px;}
.feat i{font-size:24px; color:var(--gold);}
.feat h3{font-size:18px; font-weight:600; margin:14px 0 8px;}
.feat p{color:var(--muted); font-size:14.5px; margin:0;}
.feat a{font-size:14px; text-decoration:none; display:inline-block; margin-top:12px;}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:st;}
.step{position:relative; padding-top:18px; border-top:2px solid var(--line2);}
.step::before{counter-increment:st; content:counter(st); position:absolute; top:-15px; left:0; width:28px; height:28px; border-radius:50%; background:var(--bg); border:2px solid var(--gold); color:var(--gold); font-size:13px; font-weight:700; display:grid; place-items:center;}
.step h3{font-size:17px; font-weight:600; margin:10px 0 6px;}
.step p{color:var(--muted); font-size:14.5px; margin:0;}

/* products */
.prod-h{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:28px;}
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.prod{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s;}
.prod:hover{border-color:rgba(235,190,82,.45);}
.prod img{width:100%; height:190px; object-fit:cover; background:var(--well);}
.prod .ph{height:190px; display:grid; place-items:center; background:var(--well); color:var(--dim); font-size:42px;}
.prod .b{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
.prod h3{font-size:17px; font-weight:600; margin:0 0 8px;}
.prod p{font-size:14px; color:var(--muted); margin:0 0 16px; flex:1;}
.prod a.more{font-size:14px; text-decoration:none; font-weight:600;}

/* faq */
.faq{max-width:820px; margin:0 auto;}
.faq details{border-bottom:1px solid var(--line); padding:6px 0;}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-size:16.5px; font-weight:500;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--gold); font-size:22px; line-height:1; transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .ans{color:var(--muted); padding:0 0 18px; font-size:15px;}
.faq .cat{font-size:12px; color:var(--dim);}

/* closing */
.closing{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px;}
.close-card{border-radius:18px; padding:36px 34px; border:1px solid var(--line);}
.close-card.main{background:linear-gradient(160deg, rgba(235,190,82,.16), rgba(235,190,82,.02) 60%), var(--card); border-color:rgba(235,190,82,.3);}
.close-card.side{background:var(--card);}
.close-card h2{font-size:28px; font-weight:700; letter-spacing:-.6px; margin:0 0 10px;}
.close-card p{color:var(--muted); margin:0 0 22px;}

/* footer */
footer{border-top:1px solid var(--line); padding:56px 0 32px; margin-top:96px; font-size:14px;}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:28px;}
footer h4{font-size:13px; font-weight:600; color:var(--ink); margin:0 0 12px;}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
footer ul a, .soc a{color:var(--muted); text-decoration:none;}
footer ul a:hover, .soc a:hover{color:var(--gold);}
.soc{display:flex; gap:14px; font-size:18px; margin-top:14px;}
.foot-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:40px; padding-top:22px; color:var(--dim); font-size:13px;}
.risk{color:var(--dim); font-size:12.5px; max-width:60em; margin-top:18px;}

@media (max-width:992px){
    .hero-grid, .gp-grid, .closing{grid-template-columns:1fr; gap:40px;}
    .hero{padding:56px 0 56px;}
    .hero h1{font-size:42px;}
    .feat, .steps, .prod-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .burger{display:inline-grid; place-items:center;}
    .navlinks{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 16px 16px;}
    .navlinks.open{display:flex;}
    .navlinks .btn-gold{margin:8px 0 0; justify-content:center;}
}
@media (max-width:600px){
    .wrap{padding:0 16px;}
    .hero h1{font-size:34px; letter-spacing:-1px;}
    .hero .lead{font-size:16px;}
    .sec{padding:68px 0;}
    .sec-h h2{font-size:28px;}
    .stats{grid-template-columns:1fr;}
    .stat + .stat{border-left:0; border-top:1px solid var(--line);}
    .t-px{font-size:36px;}
    .foot-grid{grid-template-columns:1fr;}
    .prod-h{flex-direction:column; align-items:flex-start;}
    .close-card{padding:28px 22px;}
}
@media (prefers-reduced-motion:reduce){ *, *::after{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} }

/* =====================================================================
   Bagian 2 — komponen baru (2026-10-17)
   ===================================================================== */
.navlinks a.active{color:var(--ink); background:rgba(150,166,200,.1);}
.stats{grid-template-columns:repeat(4,1fr);}
.sec-tight{padding:72px 0;}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:28px; flex-wrap:wrap;}
.sec-head .sec-h{margin-bottom:0;}
.link-more{font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;}

/* pills */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid var(--line2); color:var(--muted); background:rgba(150,166,200,.06); white-space:nowrap;}
.pill-gold{color:var(--gold); border-color:rgba(235,190,82,.35); background:var(--gold-soft);}
.pill-online{color:#74AEFF; border-color:rgba(116,174,255,.35); background:rgba(116,174,255,.1);}
.pill-offline{color:var(--up); border-color:rgba(54,214,155,.35); background:var(--up-soft);}
.pill-hybrid{color:#C9A3FF; border-color:rgba(201,163,255,.35); background:rgba(201,163,255,.1);}
.pill-live{color:#fff; border-color:var(--down); background:var(--down);}
.pill-live::before{content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1.2s infinite;}
.pill-muted{color:var(--dim);}
@keyframes blink{50%{opacity:.25;}}

/* hero: next-event chip */
.hero-event{display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:8px 14px 8px 8px; border-radius:999px; background:var(--card); border:1px solid var(--line2); color:var(--ink); text-decoration:none; font-size:13.5px; max-width:100%;}
.hero-event:hover{border-color:var(--gold); color:var(--ink);}
.hero-event .d{background:var(--gold); color:#2A1C02; font-weight:700; border-radius:999px; padding:3px 10px; font-size:12px; white-space:nowrap;}
.hero-event .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* event spotlight */
.ev-spot{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px;}
.ev-main{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr); background:var(--card); border:1px solid rgba(235,190,82,.28); border-radius:18px; overflow:hidden;}
.ev-poster{position:relative; background:linear-gradient(150deg, #2A1F08, #121A2D 70%); min-height:300px;}
.ev-poster img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ev-poster .ph{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px;}
.ev-poster .ph .big{font-size:64px; font-weight:700; color:var(--gold); line-height:1;}
.ev-poster .ph .mon{font-size:15px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:6px;}
.ev-body{padding:26px 26px 24px; display:flex; flex-direction:column; gap:12px;}
.ev-body h3{font-size:24px; line-height:1.2; letter-spacing:-.5px; margin:0;}
.ev-body h3 a{color:var(--ink); text-decoration:none;}
.ev-body h3 a:hover{color:var(--gold);}
.ev-meta{display:grid; gap:6px; font-size:14px; color:var(--muted);}
.ev-meta i{color:var(--gold); width:18px; display:inline-block;}
.ev-tags{display:flex; gap:6px; flex-wrap:wrap;}
.cd{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:4px 0 2px;}
.cd div{background:var(--well); border:1px solid var(--line); border-radius:10px; text-align:center; padding:9px 4px 7px;}
.cd b{display:block; font-size:24px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums;}
.cd span{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
.cd-done{font-size:14px; color:var(--up); font-weight:600;}
.seats{font-size:13px; color:var(--muted);}
.seats .bar{height:6px; border-radius:999px; background:var(--well); overflow:hidden; margin-top:5px;}
.seats .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold2),var(--gold));}
.ev-side{display:flex; flex-direction:column; gap:10px;}
.ev-row{display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.ev-row:hover{border-color:rgba(235,190,82,.5); color:var(--ink); transform:translateX(3px);}
.datebox{border-radius:10px; background:var(--well); border:1px solid var(--line2); text-align:center; padding:6px 0 5px; line-height:1.1;}
.datebox b{display:block; font-size:22px; font-weight:700; color:var(--gold);}
.datebox span{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
.ev-row h4{font-size:15px; font-weight:600; margin:0 0 3px; line-height:1.3;}
.ev-row p{font-size:12.5px; color:var(--muted); margin:0;}
.empty-card{background:var(--card); border:1px dashed var(--line2); border-radius:16px; padding:34px 26px; text-align:center; color:var(--muted);}
.empty-card i{font-size:30px; color:var(--gold); display:block; margin-bottom:8px;}

/* community */
.com-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; align-items:start;}
.post-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.post-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.post{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.post:hover{border-color:rgba(235,190,82,.45); color:var(--ink); transform:translateY(-2px);}
.post .cv{position:relative; aspect-ratio:16/9; background:var(--well);}
.post .cv img{width:100%; height:100%; object-fit:cover; display:block;}
.post .cv .ph{position:absolute; inset:0; display:grid; place-items:center; font-size:36px; color:var(--dim);}
.post .cv .pill{position:absolute; left:12px; top:12px; backdrop-filter:blur(6px); background:rgba(12,17,32,.7);}
.post .cv .cnt{position:absolute; right:12px; bottom:12px; font-size:12px; background:rgba(12,17,32,.75); border-radius:999px; padding:2px 9px; color:var(--ink);}
.post .b{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.post h3{font-size:16.5px; font-weight:600; line-height:1.3; margin:0;}
.post p{font-size:13.5px; color:var(--muted); margin:0; flex:1;}
.post .dt{font-size:12px; color:var(--dim);}
.post.pinned{border-color:rgba(235,190,82,.35);}
.ann{display:flex; gap:12px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink);}
.ann:hover{border-color:rgba(235,190,82,.45); color:var(--ink);}
.ann i{color:var(--gold); font-size:18px; margin-top:1px;}
.ann h4{font-size:14.5px; font-weight:600; margin:0 0 2px;}
.ann p{font-size:12.5px; color:var(--muted); margin:0;}
.side-h{font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin:0 0 10px;}
.links-col{display:flex; flex-direction:column; gap:10px;}
.clink{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-decoration:none; color:var(--ink); transition:border-color .15s;}
.clink:hover{border-color:var(--c, var(--gold)); color:var(--ink);}
.clink .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:21px; color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent);}
.clink h4{font-size:14.5px; font-weight:600; margin:0;}
.clink p{font-size:12.5px; color:var(--muted); margin:0;}
.clink .go{color:var(--muted);}

/* brokers */
.broker-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;}
.broker{display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;}
.broker.feat-b{border-color:rgba(235,190,82,.35); background:linear-gradient(165deg, rgba(235,190,82,.09), transparent 45%), var(--card);}
.broker .top{display:flex; align-items:center; gap:12px;}
.broker .logo-b{width:56px; height:56px; border-radius:12px; background:#fff; display:grid; place-items:center; overflow:hidden; flex:none;}
.broker .logo-b img{width:100%; height:100%; object-fit:contain;}
.broker .logo-b span{font-weight:700; color:#0C1120; font-size:20px;}
.broker h3{font-size:17px; font-weight:600; margin:0;}
.broker p{font-size:13.5px; color:var(--muted); margin:0; flex:1;}
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{font-size:11.5px; color:var(--muted); border:1px solid var(--line2); border-radius:6px; padding:2px 8px;}
.broker .btn-gold, .broker .btn-ghost{justify-content:center; padding:9px 14px; font-size:14px;}
.ib-note{display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:14px 16px; border-radius:12px; background:var(--gold-soft); border:1px solid rgba(235,190,82,.25); color:var(--ink); font-size:13.5px;}
.ib-note i{color:var(--gold); font-size:18px;}

/* sub pages */
.page-hero{padding:56px 0 36px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.page-hero::before{content:''; position:absolute; right:-160px; top:-260px; width:620px; height:620px; background:radial-gradient(closest-side, rgba(235,190,82,.13), transparent 70%); pointer-events:none;}
.page-hero h1{font-size:42px; font-weight:700; letter-spacing:-1.2px; margin:14px 0 8px; line-height:1.1;}
.page-hero p{color:var(--muted); font-size:16.5px; max-width:42em; margin:0;}
.crumb{font-size:13px; color:var(--muted);}
.crumb a{color:var(--muted); text-decoration:none;} .crumb a:hover{color:var(--gold);}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:28px 0 22px;}
.tabs a{font-size:14px; padding:7px 14px; border-radius:999px; border:1px solid var(--line2); color:var(--muted); text-decoration:none;}
.tabs a.on, .tabs a:hover{color:var(--ink); border-color:var(--gold);}
.ev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.ev-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.ev-card:hover{border-color:rgba(235,190,82,.45); color:var(--ink); transform:translateY(-2px);}
.ev-card .cv{position:relative; aspect-ratio:16/9; background:linear-gradient(150deg,#2A1F08,#121A2D 70%);}
.ev-card .cv img{width:100%; height:100%; object-fit:cover; display:block;}
.ev-card .cv .datebox{position:absolute; left:14px; top:14px; width:58px; background:rgba(12,17,32,.85); backdrop-filter:blur(6px);}
.ev-card .b{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.ev-card h3{font-size:17px; font-weight:600; margin:0; line-height:1.3;}
.ev-card p{font-size:13.5px; color:var(--muted); margin:0; flex:1;}
.ev-card .ft{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin-top:4px;}
.ev-card.past{opacity:.85;}
.detail{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:28px; align-items:start; padding:36px 0 0;}
.panel-d{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;}
.panel-d + .panel-d{margin-top:16px;}
.panel-d h2{font-size:19px; font-weight:600; margin:0 0 14px;}
.prose{color:#C9D1E0; font-size:15.5px; line-height:1.75;}
.prose p{margin:0 0 14px;}
.poster-full{width:100%; border-radius:16px; border:1px solid var(--line); display:block; margin-bottom:20px;}
.sticky{position:sticky; top:88px;}
.f-row{display:grid; gap:6px; margin-bottom:14px;}
.f-row label{font-size:13px; color:var(--muted);}
.f-in{width:100%; background:var(--well); border:1px solid var(--line2); color:var(--ink); border-radius:10px; padding:11px 13px; font:inherit; font-size:14.5px;}
.f-in:focus{border-color:var(--gold); outline:none;}
textarea.f-in{min-height:80px; resize:vertical;}
.f-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.btn-block{width:100%; justify-content:center;}
.notice{border-radius:12px; padding:13px 15px; font-size:14px; margin-bottom:16px; border:1px solid;}
.notice.ok{background:var(--up-soft); border-color:rgba(54,214,155,.35); color:#9CF0CF;}
.notice.err{background:var(--down-soft); border-color:rgba(255,107,125,.35); color:#FFB3BD;}
.notice.info{background:var(--gold-soft); border-color:rgba(235,190,82,.3); color:#F3D78E;}
.ticket{border:1px dashed rgba(235,190,82,.5); border-radius:14px; padding:16px; text-align:center; margin:6px 0 14px;}
.ticket b{display:block; font-size:24px; letter-spacing:4px; color:var(--gold); font-family:ui-monospace,monospace;}
.ticket span{font-size:12px; color:var(--muted);}
.kv{display:grid; gap:10px; font-size:14px;}
.kv div{display:grid; grid-template-columns:24px 1fr; gap:8px; color:var(--muted);}
.kv i{color:var(--gold);}
.kv b{color:var(--ink); font-weight:500;}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;}
.gallery a{display:block; border-radius:12px; overflow:hidden; aspect-ratio:4/3; background:var(--well); border:1px solid var(--line);}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s;}
.gallery a:hover img{transform:scale(1.04);}
.lb{position:fixed; inset:0; background:rgba(4,7,14,.94); display:none; align-items:center; justify-content:center; z-index:3000; padding:20px;}
.lb.open{display:flex;}
.lb img{max-width:100%; max-height:84vh; border-radius:10px;}
.lb .cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:var(--muted); font-size:14px;}
.lb button{position:absolute; background:rgba(150,166,200,.15); color:#fff; border:0; width:44px; height:44px; border-radius:50%; font-size:22px; cursor:pointer;}
.lb .x{top:16px; right:16px;} .lb .pv{left:16px; top:50%;} .lb .nx{right:16px; top:50%;}
.pager{display:flex; justify-content:center; gap:8px; margin-top:28px;}

@media (max-width:992px){
    .ev-spot, .com-grid, .detail{grid-template-columns:1fr;}
    .post-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));}
    .sticky{position:static;}
}
@media (max-width:700px){
    .ev-main{grid-template-columns:1fr;}
    .ev-poster{min-height:200px; aspect-ratio:16/9;}
    .post-grid, .post-grid.three{grid-template-columns:1fr;}
    .stats{grid-template-columns:1fr 1fr;}
    .stat + .stat{border-left:0;}
    .stat:nth-child(even){border-left:1px solid var(--line);}
    .stat:nth-child(n+3){border-top:1px solid var(--line);}
    .page-hero h1{font-size:32px;}
    .f-2{grid-template-columns:1fr;}
    .cd b{font-size:20px;}
}
.steps.four{grid-template-columns:repeat(4,1fr); row-gap:40px;}
@media (max-width:992px){ .steps.four{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .steps.four{grid-template-columns:1fr;} }
/* poster: tampil utuh (contain) di atas latar blur dari gambar yang sama */
.ev-poster img{object-fit:contain; z-index:1;}
.ev-poster img.bg{object-fit:cover; filter:blur(22px) brightness(.45); transform:scale(1.15); z-index:0;}
.ev-poster{overflow:hidden;}
/* cegah chip "Next event" (nowrap) melebarkan kolom grid di layar kecil */
.hero-grid > *{min-width:0;}
.hero-event{width:fit-content;}
@media (max-width:600px){ .hero-event{width:100%;} .hero-event .d{flex:none;} }

/* ===== Analisis XAUUSD (2026-10-24): homepage, analysis.php ===== */
.an-bias{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; padding:4px 11px; border-radius:999px; border:1px solid var(--line2); white-space:nowrap;}
.an-bias em{font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; opacity:.85;}
.an-bias.an-up{color:var(--up); border-color:rgba(54,214,155,.4); background:var(--up-soft);}
.an-bias.an-down{color:var(--down); border-color:rgba(255,107,125,.4); background:var(--down-soft);}
.an-bias.an-flat{color:var(--gold); border-color:rgba(235,190,82,.35); background:var(--gold-soft);}
.an-price{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}
.an-bias-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;}
.an-tags{display:flex; flex-wrap:wrap; gap:6px;}

/* tangga level kunci */
.an-ladder{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.an-lv{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px; border-radius:0 10px 10px 0; border-left:3px solid var(--line2); background:rgba(150,166,200,.05);}
.an-lv .an-lb{font-size:13px; font-weight:600; color:var(--ink); min-width:0;}
.an-lv .an-lb small{display:block; font-size:11.5px; font-weight:400; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.an-lv b{font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.an-k-res{border-left-color:var(--down); background:rgba(255,107,125,.07);} .an-k-res .an-lb{color:#FF9AA6;}
.an-k-sup{border-left-color:var(--up); background:rgba(54,214,155,.07);} .an-k-sup .an-lb{color:#7FE6BF;}
.an-k-pivot{border-left-color:var(--gold); background:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(235,190,82,.25);} .an-k-pivot .an-lb, .an-k-pivot b{color:var(--gold);}
.an-now{border-left:0; border-radius:10px; border:1px dashed var(--line2); background:transparent; padding:5px 12px;}
.an-now .an-lb{font-weight:500; font-style:italic; color:var(--muted); font-size:12.5px;} .an-now .an-lb i{color:var(--gold); font-style:normal;}
.an-now b{color:var(--gold); font-size:13px;}

/* homepage */
.an-spot{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); background:var(--card); border:1px solid rgba(235,190,82,.28); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; position:relative;}
.an-spot:hover{border-color:rgba(235,190,82,.6); color:var(--ink); transform:translateY(-2px);}
.an-spot::before{content:''; position:absolute; left:-120px; top:-160px; width:420px; height:420px; background:radial-gradient(closest-side, rgba(235,190,82,.10), transparent 70%); pointer-events:none;}
.an-spot-main{padding:28px 30px; display:flex; flex-direction:column; gap:14px; position:relative;}
.an-spot-main h3{font-size:24px; font-weight:700; letter-spacing:-.4px; line-height:1.25; margin:0;}
.an-spot-main p{color:var(--muted); font-size:15px; line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
.an-spot-main .btn-gold{align-self:flex-start; margin-top:auto;}
.an-spot-side{padding:24px 26px; background:var(--bg2); border-left:1px solid var(--line);}
.an-spot-side h4, .an-levels-box h3{font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin:0 0 12px;}
.an-older{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px; font-size:13.5px; color:var(--muted);}
.an-older a{color:var(--muted); text-decoration:none;} .an-older a:hover{color:var(--gold);}
.an-older a b{color:var(--ink); font-weight:600;}

/* arsip & detail */
.an-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
.an-card{display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.an-card:hover{border-color:rgba(235,190,82,.45); color:var(--ink); transform:translateY(-2px);}
.an-card-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.an-card-top .d{font-size:12.5px; color:var(--muted);}
.an-card h4{font-size:17px; font-weight:600; margin:0; line-height:1.3;}
.an-card .pl{font-size:12.5px; color:var(--gold);}
.an-card p{font-size:13.5px; color:var(--muted); margin:0; flex:1;}
.an-card .more{font-size:13px; font-weight:600; color:var(--gold);}
.an-hero h1{max-width:24em;}
.an-sum-row{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:28px; align-items:start; margin-top:18px;}
.an-sum-row > div:first-child{display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
.an-summary p{color:var(--ink); opacity:.9; font-size:16px; line-height:1.65; margin:0 0 10px;}
.an-levels-box{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px;}
.an-full{margin-top:28px;}
.an-full-h{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:14px; color:var(--muted);}
.an-full-h span{font-weight:600; color:var(--ink);} .an-full-h span i{color:var(--gold);}
.an-full-h a{font-size:13.5px; text-decoration:none;}
.an-frame{width:100%; height:1400px; border:1px solid var(--line); border-radius:16px; background:#0b0f17; display:block;}
.an-lock{margin-top:28px;}
.an-disc{font-size:12.5px; color:var(--dim); margin:16px 0 0;}
@media (max-width:992px){
    .an-spot{grid-template-columns:1fr;}
    .an-spot-side{border-left:0; border-top:1px solid var(--line);}
    .an-sum-row{grid-template-columns:1fr;}
}
@media (max-width:600px){
    .an-spot-main{padding:22px 20px;} .an-spot-side{padding:20px;}
    .an-spot-main h3{font-size:20px;}
    .an-frame{border-radius:12px; height:1800px;}
}