/* MANDIRI888 · 深色仪表台（Papan Keputusan）· .md- 专属前缀 · v20260914 */

:root{
  --md-bg:#14213D;
  --md-bg2:#0D1730;
  --md-panel:#1B2B4F;
  --md-panel2:#16234511;
  --md-line:#2C3F6B;
  --md-ac:#4CC9F0;
  --md-ac-soft:rgba(76,201,240,.16);
  --md-gold:#FFD166;
  --md-ink:#EAF2FF;
  --md-mut:#9FB3D9;
  --md-w:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:"Source Sans 3",system-ui,sans-serif;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px),
    linear-gradient(175deg,var(--md-bg) 0%,var(--md-bg2) 100%);
  color:var(--md-ink);
  line-height:1.65;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--md-ac)}

h1,h2,h3,.md-logo-word,.md-kicker{font-family:"Archivo Black","Source Sans 3",sans-serif;font-weight:400;letter-spacing:.01em}

.md-main{max-width:var(--md-w);margin:0 auto;padding:0 20px 40px}

.md-main>section{margin-top:34px}

/* ---------- 按钮 ---------- */

.md-btn{
  display:inline-block;font-weight:700;font-size:15px;line-height:1.2;
  padding:12px 22px;border-radius:10px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
}

.md-btn-neon{
  color:#08131F;background:linear-gradient(180deg,#7FDCFF,var(--md-ac) 60%,#2FA8D6);
  border:1px solid #9AE7FF;
  box-shadow:0 0 0 1px rgba(76,201,240,.25),0 4px 14px rgba(76,201,240,.35);
}

.md-btn-neon:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(76,201,240,.55)}

.md-btn-line{
  color:var(--md-gold);border:1px solid rgba(255,209,102,.65);background:rgba(255,209,102,.07);
}

.md-btn-line:hover{background:rgba(255,209,102,.15);transform:translateY(-2px)}

/* ---------- 顶栏 ---------- */

.md-head{
  position:sticky;top:0;z-index:50;
  background:rgba(13,23,48,.92);
  border-bottom:1px solid var(--md-line);
  box-shadow:0 6px 24px rgba(5,10,24,.55);
}

.md-headin{
  max-width:var(--md-w);margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:22px;
}

.md-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}

.md-logo-dial{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#2C4B7A,#101D3C 70%);
  border:2px solid var(--md-gold);
  font-family:"Archivo Black",sans-serif;font-size:17px;color:var(--md-gold);
  box-shadow:0 0 10px rgba(255,209,102,.5);
}

.md-logo-word{
  font-size:19px;color:#fff;letter-spacing:.03em;text-shadow:0 0 12px rgba(76,201,240,.55);
}

.md-nav{display:flex;gap:20px;margin-left:auto}

.md-nav a{
  color:var(--md-mut);text-decoration:none;font-weight:600;font-size:15px;
  padding:6px 2px;border-bottom:2px solid transparent;
}

.md-nav a:hover{color:var(--md-ink)}

.md-nav a.md-on{color:var(--md-ac);border-bottom-color:var(--md-ac)}

.md-hact{display:flex;gap:10px}

.md-hact .md-btn{padding:9px 16px;font-size:14px}

/* 汉堡：checkbox 为 header 直接子元素 */
.md-burger{
  display:none;margin-left:auto;cursor:pointer;width:42px;height:40px;
  border:1px solid var(--md-line);border-radius:9px;background:var(--md-panel);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}

.md-burger span{display:block;width:20px;height:2px;background:var(--md-ac);border-radius:2px}

.md-navtog{display:none}

.md-mnav{
  display:none;overflow:hidden;max-height:0;
  transition:max-height .3s ease;
  background:var(--md-bg2);border-top:1px solid var(--md-line);
}

.md-navtog:checked~.md-mnav{max-height:640px}

.md-mgrp{padding:12px 22px;border-bottom:1px dashed var(--md-line)}

.md-mgrp h3{font-size:12px;color:var(--md-gold);text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px}

.md-mgrp a{display:block;color:var(--md-ink);text-decoration:none;padding:7px 0;font-size:16px}

/* ---------- 中奖线分隔 ---------- */

.md-pay{display:flex;align-items:center;max-width:var(--md-w);margin:30px auto 0;padding:0 6px}

.md-pay i{
  width:9px;height:9px;border-radius:50%;background:var(--md-gold);
  box-shadow:0 0 8px rgba(255,209,102,.8);flex-shrink:0;
}

.md-pay b{flex:1;border-top:2px dashed rgba(255,209,102,.4)}

/* ---------- Hero 决策台 ---------- */

.md-hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:28px;align-items:stretch;padding-top:38px;
}

.md-kicker{
  display:inline-block;font-size:12px;color:var(--md-gold);
  letter-spacing:.22em;text-transform:uppercase;
  border:1px solid rgba(255,209,102,.4);border-radius:999px;
  padding:5px 14px;margin-bottom:16px;background:rgba(255,209,102,.06);
}

.md-hero h1{
  font-size:clamp(26px,3.4vw,40px);line-height:1.18;color:#fff;
  text-shadow:0 0 22px rgba(76,201,240,.28);
}

.md-herop{margin-top:16px;font-size:17px;color:var(--md-mut)}

.md-heroact{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* 仪表盘面板 */
.md-heropanel{
  position:relative;border-radius:16px;padding:20px 22px 18px;
  background:
    linear-gradient(180deg,rgba(76,201,240,.08),transparent 30%),
    linear-gradient(180deg,#20335E,#182647);
  border:1px solid var(--md-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(4,9,22,.5);
}

.md-panelhead{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--md-line);margin-bottom:16px;
}

.md-panelhead h2{font-size:19px;color:#fff;letter-spacing:.04em}

.md-badge{
  font-size:11px;font-weight:700;color:var(--md-ac);
  border:1px solid rgba(76,201,240,.5);border-radius:6px;padding:2px 8px;
  background:var(--md-ac-soft);
}

.md-gset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

.md-gauge{
  background:linear-gradient(180deg,#16264A,#111E3E);
  border:1px solid var(--md-line);border-radius:13px;
  padding:12px 10px 14px;text-align:center;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.45);
}

.md-gtop{display:flex;align-items:center;gap:8px;margin-bottom:4px}

.md-gtop span{flex:1;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--md-line))}

.md-gtop span:last-child{background:linear-gradient(90deg,var(--md-line),transparent)}

.md-glowdot{
  width:8px;height:8px;border-radius:50%;background:var(--md-ac);
  box-shadow:0 0 9px rgba(76,201,240,.95);flex-shrink:0;
}

/* 半圆表盘 */
.md-gface{position:relative;width:172px;height:86px;margin:2px auto 0;overflow:hidden}

.md-garc{
  position:absolute;left:50%;bottom:0;width:172px;height:172px;margin-left:-86px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%,#28406F 0%,#182A52 55%,#101D3C 100%);
  border:3px solid #3D5793;
  border-bottom-color:transparent;
  box-shadow:inset 0 0 22px rgba(0,0,0,.6),0 0 14px rgba(76,201,240,.12);
}

.md-gsym{
  position:absolute;left:50%;bottom:0;width:26px;height:26px;margin-left:-13px;
  font-size:13px;line-height:26px;color:var(--md-gold);opacity:.92;
  transform-origin:50% 100%;
  transform:rotate(var(--a)) translateY(-76px);
  text-shadow:0 0 6px rgba(255,209,102,.5);
}

.md-gneedle{
  position:absolute;left:50%;bottom:0;width:4px;height:64px;margin-left:-2px;
  border-radius:3px;transform-origin:50% 100%;
  background:linear-gradient(180deg,#BDEFFF,var(--md-ac) 70%,#1E7FA8);
  box-shadow:0 0 10px rgba(76,201,240,.85);
  transform:rotate(var(--d));
}

.md-gpin{
  position:absolute;left:50%;bottom:-7px;width:16px;height:16px;margin-left:-8px;
  border-radius:50%;background:radial-gradient(circle at 50% 35%,#9AE7FF,#2FA8D6 60%,#14536E);
  border:2px solid #BDEFFF;box-shadow:0 0 8px rgba(76,201,240,.7);
}

.md-gscale{
  display:flex;justify-content:space-between;gap:6px;
  font-size:10.5px;color:var(--md-mut);margin-top:8px;
  text-transform:uppercase;letter-spacing:.05em;
}

.md-gauge h3{font-size:15px;color:#fff;margin-top:6px;letter-spacing:.02em}

.md-gnote{font-size:12.5px;color:var(--md-mut);margin-top:6px;line-height:1.5}

.md-gnote-all{
  margin-top:14px;font-size:11.5px;color:var(--md-gold);text-align:center;
  border-top:1px dashed rgba(255,209,102,.35);padding-top:10px;
  letter-spacing:.04em;
}

/* ---------- 通用区块头 ---------- */

.md-main h2{
  font-size:clamp(21px,2.4vw,28px);color:#fff;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(76,201,240,.22);
}

.md-secp{color:var(--md-mut);max-width:760px;margin:10px 0 22px}

/* ---------- 快捷入口（卷轴窗） ---------- */

.md-qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.md-qcard{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  background:linear-gradient(180deg,#1D2E56,#16254A);
  border:1px solid var(--md-line);border-radius:13px;
  padding:16px;text-decoration:none;color:var(--md-ink);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.md-qcard:hover{
  transform:translateY(-4px);border-color:rgba(76,201,240,.6);
  box-shadow:0 10px 26px rgba(4,10,26,.55);
}

.md-qreel{
  display:block;overflow:hidden;height:34px;max-width:100%;border-radius:8px;
  background:#0B1428;border:1px solid #2C3F6B;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.6);
}

.md-qstrip{
  display:inline-block;white-space:nowrap;line-height:34px;
  font-size:17px;letter-spacing:6px;color:var(--md-gold);
  animation:md-roll 8s linear infinite;
}

@keyframes md-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.md-qcard h3{font-size:16.5px;color:#fff}

.md-qcard p{font-size:14px;color:var(--md-mut);flex:1}

.md-qmore{font-size:13px;font-weight:700;color:var(--md-ac)}

/* ---------- 情景卡 ---------- */

.md-sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.md-scard{
  position:relative;background:var(--md-panel);
  border:1px solid var(--md-line);border-left:3px solid var(--md-gold);
  border-radius:0 13px 13px 0;padding:18px 18px 16px;
  transition:transform .16s ease,box-shadow .16s ease;
}

.md-scard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(4,10,26,.5)}

.md-stag{
  display:inline-block;font-size:10.5px;font-weight:700;color:var(--md-gold);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;
}

.md-scard h3{font-size:17px;color:#fff;line-height:1.3}

.md-scard p{font-size:14px;color:var(--md-mut);margin-top:8px}

.md-smore{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--md-ac);text-decoration:none}

/* ---------- 叙述 / 配图 ---------- */

.md-about p{color:var(--md-mut);margin-top:14px;max-width:860px}

.md-about>p:first-of-type{color:var(--md-ink)}

.md-fig{margin:22px 0 6px;border-radius:14px;overflow:hidden;border:1px solid var(--md-line);background:#0B1428}

.md-fig img{width:100%}

.md-fig figcaption{
  font-size:12.5px;color:var(--md-mut);padding:10px 14px;
  border-top:1px dashed var(--md-line);
}

/* ---------- 优势 ---------- */

.md-advlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none}

.md-advlist li{
  background:linear-gradient(180deg,#1D2E56,#16254A);
  border:1px solid var(--md-line);border-radius:13px;padding:16px 18px;
}

.md-advlist h3{font-size:16px;color:var(--md-ac);margin-bottom:6px}

.md-advlist p{font-size:14px;color:var(--md-mut)}

/* ---------- 精选 ---------- */

.md-pickgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.md-pick{
  background:var(--md-panel);border:1px solid var(--md-line);border-radius:13px;
  border-top:3px solid var(--md-ac);padding:18px;
}

.md-pick h3 a{color:#fff;text-decoration:none;font-size:16px;line-height:1.35}

.md-pick h3 a:hover{color:var(--md-ac)}

.md-pick p{font-size:14px;color:var(--md-mut);margin:8px 0 10px}

/* ---------- FAQ ---------- */

.md-faqsec{max-width:860px}

.md-q{
  border:1px solid var(--md-line);border-radius:12px;
  background:linear-gradient(180deg,#1B2B4F,#152241);
  margin-top:12px;overflow:hidden;
}

.md-q summary{
  cursor:pointer;padding:14px 18px;font-weight:700;font-size:15.5px;color:#fff;
  list-style:none;position:relative;
}

.md-q summary::-webkit-details-marker{display:none}

.md-q summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--md-gold);font-size:19px;font-weight:700;
}

.md-q[open] summary::after{content:"–"}

.md-q p{padding:0 18px 15px;font-size:14.5px;color:var(--md-mut)}

/* ---------- 信任 ---------- */

.md-trust{
  border:1px solid rgba(255,209,102,.4);border-radius:14px;padding:22px 24px;
  background:
    linear-gradient(120deg,rgba(255,209,102,.08),rgba(76,201,240,.05)),
    linear-gradient(180deg,#1D2E56,#16254A);
}

.md-trust h2{color:var(--md-gold)}

.md-trust p{color:var(--md-ink);margin-top:12px;max-width:860px}

.md-trustlnk{display:inline-block;margin-top:14px;font-weight:700;color:var(--md-gold);text-decoration:none}

/* ---------- 内页纸面 ---------- */

.md-paper{max-width:920px;margin:0 auto;padding:26px 20px 46px}

.md-crumbs{font-size:13px;color:var(--md-mut);margin-bottom:14px}

.md-crumbs a{color:var(--md-ac);text-decoration:none}

.md-paper h1{
  font-size:clamp(23px,2.8vw,32px);color:#fff;line-height:1.22;
  text-shadow:0 0 18px rgba(76,201,240,.25);
}

.md-navintro,.md-edulead{font-size:16.5px;color:var(--md-ink);margin:14px 0 8px}

.md-paper h2{
  font-size:20px;color:var(--md-ac);margin:26px 0 10px;
  padding-left:12px;border-left:3px solid var(--md-gold);
}

.md-paper p{color:var(--md-mut);margin-top:12px}

.md-steps{list-style:none;counter-reset:mdstep;margin-top:8px}

.md-steps li{
  counter-increment:mdstep;position:relative;
  background:var(--md-panel);border:1px solid var(--md-line);border-radius:12px;
  padding:14px 16px 14px 58px;margin-top:10px;
}

.md-steps li::before{
  content:counter(mdstep);position:absolute;left:14px;top:14px;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Archivo Black",sans-serif;font-size:14px;color:#08131F;
  background:radial-gradient(circle at 50% 30%,#8FE1FF,var(--md-ac));
  box-shadow:0 0 9px rgba(76,201,240,.55);
}

.md-steps h3{font-size:15.5px;color:#fff}

.md-steps p{font-size:14px;color:var(--md-mut);margin-top:4px}

.md-navlist{list-style:none;margin-top:8px}

.md-navlist li{
  position:relative;padding:9px 10px 9px 28px;font-size:14.5px;color:var(--md-mut);
  border-bottom:1px dashed var(--md-line);
}

.md-navlist li::before{content:"🍒";position:absolute;left:2px;top:9px;font-size:13px}

.md-note{
  margin-top:22px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,209,102,.45);background:rgba(255,209,102,.07);
  color:var(--md-ink);font-size:14.5px;
}

.md-aside{
  margin-top:26px;padding:16px 18px;border-radius:12px;
  background:#101C3A;border:1px solid var(--md-line);
}

.md-aside h3{font-size:13px;color:var(--md-gold);text-transform:uppercase;letter-spacing:.12em;margin:10px 0 6px}

.md-aside h3:first-child{margin-top:0}

.md-aside a{display:block;color:var(--md-ink);text-decoration:none;font-size:14.5px;padding:5px 0}

.md-aside a:hover{color:var(--md-ac)}

.md-resp{
  margin-top:22px;font-size:13px;color:var(--md-mut);
  border-top:1px dashed var(--md-line);padding-top:14px;
}

.md-fig-lead{margin-top:20px}

/* ---------- 页脚 ---------- */

.md-foot{border-top:1px solid var(--md-line);background:#0A1122;margin-top:30px}

.md-fgrid{
  max-width:var(--md-w);margin:0 auto;padding:34px 20px 20px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;
}

.md-fbrand p{font-size:13.5px;color:var(--md-mut);margin:12px 0}

.md-18{
  display:inline-block;font-weight:700;font-size:13px;color:var(--md-gold);
  border:2px solid var(--md-gold);border-radius:8px;padding:2px 10px;
}

.md-fcol h3{font-size:13px;color:var(--md-ac);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}

.md-fcol a{display:block;color:var(--md-mut);text-decoration:none;font-size:14px;padding:4px 0}

.md-fcol a:hover{color:var(--md-ink)}

.md-fbot{border-top:1px solid var(--md-line);padding:14px 20px 18px;text-align:center}

.md-fbot p{font-size:12.5px;color:var(--md-mut);padding-top:4px}

/* ---------- 底部悬浮条 ---------- */

.md-float{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:center;padding:10px 12px;
  background:linear-gradient(180deg,rgba(10,17,34,0),rgba(10,17,34,.94) 40%);
  pointer-events:none;
}

.md-floatin{
  display:flex;align-items:center;gap:14px;pointer-events:auto;
  background:rgba(13,23,48,.96);border:1px solid var(--md-line);
  border-radius:999px;padding:7px 8px 7px 18px;
  box-shadow:0 8px 26px rgba(3,7,18,.6);
}

.md-fnote{font-size:12.5px;color:var(--md-mut);white-space:nowrap}

.md-enter{padding:10px 20px;font-size:15px;animation:md-pulse 1.7s ease-in-out infinite}

@keyframes md-pulse{
  0%,100%{box-shadow:0 0 5px rgba(255,209,102,.45),0 4px 14px rgba(76,201,240,.3)}
  50%{box-shadow:0 0 18px rgba(255,209,102,.9),0 4px 20px rgba(76,201,240,.5)}
}

/* ---------- 404 ---------- */

.md-404body{display:flex;flex-direction:column;min-height:100vh}

.md-404{
  max-width:640px;margin:auto;text-align:center;padding:50px 22px;
}

.md-404reels{
  display:flex;justify-content:center;gap:14px;font-size:30px;margin-bottom:20px;
}

.md-404reels span{
  width:64px;height:64px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#0B1428;border:1px solid var(--md-line);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55);color:var(--md-gold);
}

.md-404 h1{font-size:28px;color:#fff;margin-bottom:12px}

.md-404 p{color:var(--md-mut)}

.md-404act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}

/* ---------- 响应式 ---------- */

@media (max-width:1020px){
  .md-hero{grid-template-columns:1fr}
  .md-qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-pickgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .md-nav,.md-hact{display:none}
  .md-burger{display:flex}
  .md-mnav{display:block}
}

@media (max-width:640px){
  .md-gset{grid-template-columns:minmax(0,1fr)}
  .md-qgrid{grid-template-columns:minmax(0,1fr)}
  .md-sgrid{grid-template-columns:minmax(0,1fr)}
  .md-pickgrid{grid-template-columns:minmax(0,1fr)}
  .md-advlist{grid-template-columns:minmax(0,1fr)}
  .md-fgrid{grid-template-columns:minmax(0,1fr)}
  .md-hero{grid-template-columns:minmax(0,1fr)}
  .md-floatin{gap:10px;padding-left:14px}
  .md-fnote{display:none}
  .md-gface{width:150px;height:75px}
  .md-garc{width:150px;height:150px;margin-left:-75px}
  .md-gsym{transform:rotate(var(--a)) translateY(-66px)}
  .md-gneedle{height:56px}
}

@media (prefers-reduced-motion:reduce){
  .md-qstrip,.md-enter,.md-btn{animation:none;transition:none}
}