.kelasX-container{width:100%;min-height:100vh;padding:110px 25px 60px;display:flex;flex-direction:column;align-items:center}.kelasX-title{font-size:2.3rem;font-weight:800;color:#fff;text-align:center;margin-bottom:45px;text-shadow:0 0 12px hsla(0,0%,100%,.35)}.kelasX-grid{width:100%;max-width:1050px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:25px}.kelasX-card{background:hsla(0,0%,100%,.12);padding:35px 25px;border-radius:18px;text-align:center;color:#fff;cursor:pointer;backdrop-filter:blur(14px);border:1px solid hsla(0,0%,100%,.18);transition:.35s ease;position:relative;overflow:hidden}.kelasX-card:hover{transform:translateY(-5px)}.kelasX-card.selected{border:2px solid transparent;background:hsla(0,0%,100%,.18);box-shadow:0 0 15px rgba(0,225,255,.7)}.kelasX-card.selected:before{content:"";position:absolute;inset:0;border-radius:18px;padding:2px;background:linear-gradient(135deg,#00d0ff,#7a5bff,#00d0ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:glowMove 3s linear infinite}@keyframes glowMove{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}.kelasX-card h2{font-size:1.4rem;font-weight:700;margin-bottom:8px}.kelasX-card p{font-size:.92rem;opacity:.9}