@font-face{font-family:'GMPI Anton';src:url('assets/fonts/anton-latin-400-normal.woff2') format('woff2');font-display:swap}
/* Bagian contoh Kartu Tanda Anggota */
.kta-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 78% 45%,rgba(229,28,36,.2),transparent 50%),#0f0f0e;color:#fff;padding:90px 7.3%;display:grid;grid-template-columns:1fr minmax(260px,380px);gap:7%;align-items:center}
.kta-section:before{content:'KTA';position:absolute;left:-18px;bottom:-60px;font:260px/1 'GMPI Anton',var(--display);letter-spacing:10px;color:rgba(255,255,255,.025);pointer-events:none}
.kta-copy{position:relative;z-index:1;max-width:560px}
.kta-section h2{font:clamp(50px,5.4vw,74px)/.92 'GMPI Anton',var(--display);font-weight:400;text-transform:uppercase;margin:20px 0 18px}
.kta-section h2 em{font-style:normal;color:var(--gold-hi)}
.kta-copy>p{color:#b8b5ad;font-size:12px;line-height:1.85;max-width:470px;margin:0}
.kta-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.kta-points li{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.kta-points b{font:20px/1 var(--display);color:var(--red);min-width:28px}
.kta-points span{font-size:11px;line-height:1.7;color:#a9a69f}
.kta-points strong{color:#fff}
.kta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.kta-link{font-size:11px;font-weight:800;color:#e7cd8f;border-bottom:1px solid rgba(231,205,143,.4);padding-bottom:3px}
.kta-link:hover{color:#fff;border-color:#fff}
.kta-figure{margin:0;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;perspective:1100px}
.kta-card-wrap{position:relative;width:min(100%,340px);aspect-ratio:638/1012;border-radius:19px;transform:rotateY(-11deg) rotateX(4deg) rotateZ(2deg);transform-style:preserve-3d;box-shadow:-22px 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform .6s cubic-bezier(.2,.7,.2,1);animation:kta-float 6s ease-in-out infinite;opacity:0}
.kta-card-wrap.is-ready{opacity:1;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s}
.kta-flipper{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;height:100%;border-radius:19px;cursor:pointer;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.75,.2,1);-webkit-tap-highlight-color:transparent}
.kta-flipper.is-flipped{transform:rotateY(180deg)}
.kta-flipper:focus-visible{outline:2px solid var(--gold-hi);outline-offset:6px}
.kta-face{position:absolute;inset:0;display:block;border-radius:19px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(.1px);background:#151513}
.kta-back{transform:rotateY(180deg) translateZ(.1px)}
.kta-face canvas{display:block;width:100%;height:100%}
.kta-face:after{content:'';position:absolute;inset:0;border-radius:19px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(100,244,255,.16) 42%,rgba(243,214,133,.2) 50%,rgba(255,86,93,.14) 58%,transparent 70%);background-size:250% 100%;mix-blend-mode:screen;animation:kta-sheen 5.5s ease-in-out infinite}
.kta-figure:hover .kta-card-wrap{transform:rotateY(0) rotateX(0) rotateZ(0);animation-play-state:paused}
.kta-figure figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:8px;font-weight:800;letter-spacing:1.6px;color:#8b877e;text-transform:uppercase;text-align:center}
.kta-hint{border:1px solid rgba(231,205,143,.45);background:rgba(231,205,143,.08);color:#e7cd8f;border-radius:999px;padding:8px 14px;font:800 10px/1 var(--body);letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.kta-hint span{display:inline-block;font-size:13px;margin-right:4px;transition:transform .6s}
.kta-hint:hover{background:rgba(231,205,143,.18);color:#fff}
.kta-hint.is-flipped span{transform:rotate(180deg)}
@keyframes kta-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes kta-sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
@media(max-width:760px){
  .kta-section{grid-template-columns:1fr;padding:70px 6%;gap:40px}
  .kta-section h2{font-size:52px}
  .kta-figure{order:-1}
  .kta-card-wrap{width:min(78vw,300px);transform:rotateZ(-2deg)}
  .kta-copy>p{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.kta-card-wrap,.kta-face:after{animation:none}.kta-card-wrap{transition:none}.kta-flipper{transition-duration:.01s}}