/* Reset pengganti Tailwind preflight yang dipakai desain MagicPath. */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { background: #101412; overscroll-behavior-x: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }

/* Desain MagicPath "AksiKeadilan — Maintenance" — salinan persis docs/design-reference/magicpath-ak.css. */
.ak-root{--ink:#e9e8e3;--sub:#9e9d96;--gold:#c4a471;background:#101412;color:var(--ink);min-height:100vh;position:relative;overflow:hidden;font-family:DM Sans,sans-serif;display:flex;flex-direction:column}
.ak-root *{box-sizing:border-box}
.ak-root a{text-decoration:none;color:inherit}
.ak-noise{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")}
.ak-header,.ak-footer{z-index:2;display:flex;justify-content:space-between;align-items:center}
.ak-header{padding:38px clamp(26px,5vw,84px)}
.ak-brand{font-family:Manrope,sans-serif;font-weight:800;font-size:17px;letter-spacing:.075em;display:flex;gap:13px;align-items:center}
.ak-brand-dim{font-weight:400}
.ak-brand-dot{color:var(--gold)}
.ak-mark{width:27px;height:27px;border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;transform:rotate(45deg)}
.ak-mark-beam{display:block;width:11px;height:11px;border:2px solid var(--gold);border-left:0;border-bottom:0}
.ak-status{font-size:10px;font-weight:700;letter-spacing:.22em;color:#b4b8ae;display:flex;align-items:center;gap:12px}
.ak-status-dot{display:inline-block;width:7px;height:7px;background:#bb9861;border-radius:50%;box-shadow:0 0 0 5px #bb986118;animation:ak-pulse 2.4s ease infinite}
@keyframes ak-pulse{
  50%{box-shadow:0 0 0 9px #bb98610a;opacity:.5}
}
.ak-hero{z-index:1;flex:1;display:grid;grid-template-columns:51% 49%;align-items:center;max-width:1550px;width:100%;margin:auto;min-height:650px;padding:10px clamp(26px,5vw,84px) 45px}
.ak-graphic{height:560px;position:relative;display:flex;align-items:center;justify-content:center}
.ak-graphic:before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,#bd9b6340 0%,#9674470d 39%,transparent 70%);filter:blur(30px)}
.ak-graphic-halo{position:absolute;border-radius:50%;border:1px solid #9f927944;width:425px;height:425px;transform:rotateX(63deg) rotate(-22deg)}
.ak-halo-two{width:530px;height:530px;border-color:#a3987a19;transform:rotateX(67deg) rotate(45deg)}
.ak-graphic-center{position:relative;width:310px;height:335px;filter:drop-shadow(0 25px 50px #0007);transform:perspective(900px) rotateY(-13deg) rotateX(4deg)}
.ak-graphic-top{position:absolute;width:300px;height:44px;top:55px;left:3px;background:linear-gradient(145deg,#e3d3a9,#97794f 60%,#4c432e);clip-path:polygon(50% 0,100% 80%,96% 100%,4% 100%,0 80%);box-shadow:0 15px 20px #000}
.ak-graphic-column{position:absolute;top:110px;height:158px;width:35px;background:linear-gradient(90deg,#493b2a,#c4a477 30%,#776146 75%,#362f24);transform:skewY(-3deg);border-radius:3px}
.ak-column-a{left:46px}
.ak-column-b{left:135px}
.ak-column-c{left:224px}
.ak-graphic-base{position:absolute;top:263px;left:8px;width:289px;height:42px;background:linear-gradient(#cdb58b,#66543c 36%,#372f24);clip-path:polygon(0 15%,100% 15%,100% 100%,0 100%);border-bottom:3px solid #a88d65}
.ak-graphic-orbit{position:absolute;top:0;left:120px;width:70px;height:70px;border:1px solid #d9bb8670;border-radius:50%;box-shadow:0 0 45px #d0aa7738}
.ak-graphic-label{position:absolute;font-size:9px;color:#a59c86;letter-spacing:.26em}
.ak-label-one{left:3%;bottom:14%}
.ak-label-two{right:8%;top:16%}
.ak-content{padding-left:4%;padding-bottom:24px}
.ak-eyebrow{font-size:11px;letter-spacing:.22em;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:15px;white-space:nowrap}
.ak-line{width:34px;height:1px;background:var(--gold)}
.ak-content h1{font-family:Manrope,sans-serif;font-weight:600;font-size:clamp(55px,5.2vw,90px);line-height:1.09;letter-spacing:-.075em;margin:32px 0 28px}
.ak-content h1 em{font-style:normal;color:#bfa16f}
.ak-period{color:#c8a574}
.ak-content p{font-size:16px;color:#a9ada5;margin:0 0 39px}
.ak-contact{display:inline-flex;min-width:213px;align-items:center;justify-content:space-between;background:#c7a879;color:#141714!important;padding:19px 21px;font-weight:800;font-size:13px;transition:background .2s,transform .2s}
.ak-contact:hover{background:#e0c396;transform:translateY(-3px)}
.ak-contact:focus-visible,.ak-footer button:focus-visible{outline:2px solid white;outline-offset:4px}
.ak-arrow{font-size:20px;font-weight:400}
.ak-caption{font-size:11px;color:#777f78;display:block;margin-top:15px}
.ak-footer{border-top:1px solid #ffffff17;margin:0 clamp(26px,5vw,84px);height:90px;font-size:10px;font-weight:700;letter-spacing:.13em;color:#767e74}
.ak-footer button{background:none;border:0;color:#a9a89d;font:inherit;letter-spacing:inherit;cursor:pointer}
.ak-footer button span{margin-left:8px;color:#c7a879}
@media (max-width:900px){
  .ak-hero{grid-template-columns:1fr;min-height:unset;padding-top:20px}
  .ak-graphic{height:310px;order:1}
  .ak-content{order:2;padding:0 0 75px}
  .ak-graphic-center{transform:scale(.68) perspective(900px) rotateY(-13deg)}
  .ak-graphic-halo{width:300px;height:300px}
  .ak-halo-two{width:390px;height:390px}
  .ak-content h1{font-size:clamp(48px,9vw,78px)}
  .ak-footer-end{display:none}
}
@media (max-width:510px){
  .ak-header{padding:29px 23px}
  .ak-brand{font-size:13px}
  .ak-mark{width:23px;height:23px}
  .ak-status{font-size:8px;letter-spacing:.08em;max-width:135px;line-height:1.6}
  .ak-hero{padding-left:24px;padding-right:24px}
  .ak-graphic{height:260px}
  .ak-graphic-label{display:none}
  .ak-content h1{margin:24px 0;font-size:clamp(43px,11vw,62px)}
  .ak-eyebrow{font-size:9px;letter-spacing:.14em}
  .ak-content p{font-size:14px}
  .ak-footer{margin:0 23px;height:74px;font-size:8px}
  .ak-footer button{font-size:8px}
}

@media (prefers-reduced-motion: reduce) {
  .ak-status-dot { animation: none; }
  .ak-contact { transition: none; }
  .ak-contact:hover { transform: none; }
}