*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#f0f2f5;min-height:100vh;color:#1a1a2e}

/* HEADER */
.header{background:#fff;text-align:center;padding:30px 20px 24px;border-bottom:1px solid #e5e7eb;position:relative;overflow:hidden}
.back-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#6b7280;font-size:.8rem;font-weight:500;margin-bottom:16px;transition:all .25s ease;padding:6px 14px;border-radius:8px;background:#f3f4f6}
.back-link:hover{color:#2563eb;background:#dbeafe;transform:translateX(-3px)}
.header img{width:80px;height:auto;margin-bottom:12px}
.header h1{font-size:1.3rem;font-weight:800;color:#1a1a2e;margin-bottom:6px}
.hl-green{background:linear-gradient(135deg,#22c55e,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hl-purple{background:linear-gradient(135deg,#7c3aed,#6d28d9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header .subtitle{font-size:.78rem;color:#6b7280;line-height:1.5}

/* MAIN */
.main{max-width:520px;margin:0 auto;padding:24px 16px 50px;display:flex;flex-direction:column;gap:10px}

/* LINK ITEMS — sama persis dengan beranda */
.link-item{display:flex;align-items:center;gap:14px;padding:15px 18px;background:#fff;border-radius:14px;text-decoration:none;color:#1a1a2e;border:1px solid #e5e7eb;transition:all .25s ease;cursor:pointer;opacity:0;transform:translateY(14px);animation:fadeIn .4s ease forwards}
.link-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.07);border-color:#c7d2fe}
.link-item:active{transform:scale(.98)}
.link-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.ic-1{background:#dbeafe;color:#2563eb}
.ic-2{background:#d1fae5;color:#059669}
.ic-3{background:#ede9fe;color:#7c3aed}
.ic-4{background:#ffedd5;color:#ea580c}
.ic-5{background:#fce7f3;color:#db2777}
.ic-6{background:#cffafe;color:#0891b2}
.link-info{flex:1;min-width:0}
.link-info h3{font-size:.85rem;font-weight:600;margin-bottom:2px}
.link-info p{font-size:.72rem;color:#6b7280;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-arrow{color:#c4c9d4;font-size:.75rem;transition:all .25s}
.link-item:hover .link-arrow{color:#2563eb;transform:translateX(3px)}

/* FOOTER */
.footer{text-align:center;padding:20px;font-size:.7rem;color:#9ca3af;border-top:1px solid #e5e7eb;background:#fff}
.footer span{color:#2563eb;font-weight:600}

/* ANIMATION */
@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}