*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Segoe UI',system-ui,sans-serif;background:#0b1020;color:#e7ecf7;
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow-x:hidden}

/* latar aurora beranimasi */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora::before,.aurora::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(110px);opacity:.35;animation:apung 18s ease-in-out infinite alternate}
.aurora::before{background:#2b5cff;top:-160px;left:-140px}
.aurora::after{background:#d99a68;bottom:-180px;right:-140px;animation-delay:-9s}
@keyframes apung{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}

.card{max-width:560px;width:100%;text-align:center;position:relative;z-index:1}
.badge{display:inline-block;background:#1b2745;color:#8fb4ff;border:1px solid #2c3e6b;
  border-radius:99px;padding:6px 14px;font-size:12px;letter-spacing:2px;margin-bottom:18px}
h1{font-size:clamp(27px,6vw,40px);font-weight:800;margin-bottom:12px;line-height:1.25}
.gradien{background:linear-gradient(90deg,#ffd166,#ff8fab,#7ae2ff);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:200% center}}
p.sub{color:#9fb0d0;font-size:15px;margin-bottom:30px;line-height:1.6}

.grid{display:grid;gap:14px;text-align:left}
a.tile{display:flex;align-items:center;gap:16px;border-radius:18px;padding:18px 20px;transition:transform .16s,box-shadow .16s;position:relative}
.tile .em{font-size:32px}
.tile .tt{font-weight:700;font-size:15.5px}
.tile .dd{font-size:12.5px;color:rgba(231,236,247,.65);margin-top:3px;line-height:1.45}
.tile .panah{margin-left:auto;font-size:20px;opacity:.35;transition:.16s}
a.tile:hover{transform:translateY(-4px)}
a.tile:hover .panah{opacity:1;transform:translateX(4px)}

.t-baju{background:linear-gradient(135deg,#141d38,#101a30);border:1px solid #2c3e6b}
.t-baju:hover{box-shadow:0 10px 28px rgba(43,92,255,.25)}
.t-wellness{background:linear-gradient(135deg,#12291d,#0e1f16);border:1px solid #2f5a3c}
.t-wellness:hover{box-shadow:0 10px 28px rgba(63,155,96,.22)}
.t-kedai{background:linear-gradient(135deg,#2b1520,#201018);border:1px solid #5a2a3c}
.t-kedai:hover{box-shadow:0 10px 28px rgba(255,143,171,.22)}

.foot{margin-top:28px;font-size:12px;color:#5f7096;line-height:1.7}
.tm{color:#ffd166;font-style:italic}

.tile .tt.g-jiwa{background:linear-gradient(90deg,#4ade80,#7ae2ff,#ffd166,#ff8fab);
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:jiwa 3.5s linear infinite}
@keyframes jiwa{to{background-position:300% center}}

.ikon-bajs{display:none}
.tile .em svg{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.tile:hover .em svg{animation:ikonLompat .5s ease}
@keyframes ikonLompat{30%{transform:translateY(-6px) rotate(-3deg)}60%{transform:translateY(2px)}}