/* =========================================================
   ALFA GMR — Link-in-bio 4.0 · "Clean Premium"
   Fokus: rapi, terstruktur, mewah lewat presisi (bukan efek bertumpuk).
   Kelas .ag- agar tak bentrok Bootstrap.
   ========================================================= */

:root {
    --bg: #0b0d13;
    --glow-1: #1b3a63;
    --glow-2: #2a2350;
    --surface: #141926;
    --surface-2: #1a2130;
    --surface-3: #212a3c;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --text: #f3f5fa;
    --muted: #97a2ba;
    --a1: #3daaf5;   /* cyan brand */
    --a2: #8b7bff;   /* violet     */
    --mint: #7ac941;
    --pink: #ff77c6;
    --radius: 22px;
    --radius-sm: 14px;
    --ring: 0 0 0 1px var(--line);
    --sp: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    padding: 28px 16px;
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    display: flex;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Latar: cahaya warna menghanyut pelan (tenang) */
.ag-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.ag-blob { position: absolute; border-radius: 50%; filter: blur(85px); opacity: .42; will-change: transform; }
.ag-blob.b1 { width: 52vmax; height: 52vmax; top: -22%; left: -16%; background: radial-gradient(circle, var(--a1), transparent 66%); animation: ag-float1 30s ease-in-out infinite; }
.ag-blob.b2 { width: 50vmax; height: 50vmax; bottom: -24%; right: -16%; background: radial-gradient(circle, var(--a2), transparent 66%); animation: ag-float2 36s ease-in-out infinite; }
.ag-blob.b3 { width: 40vmax; height: 40vmax; top: 38%; left: 46%; opacity: .26; background: radial-gradient(circle, var(--mint), transparent 64%); animation: ag-float3 32s ease-in-out infinite; }
@keyframes ag-float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw,5vh) scale(1.08); } }
@keyframes ag-float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,-4vh) scale(1.1); } }
@keyframes ag-float3 { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-46%,6vh); } }

/* ---------- Kartu ---------- */
.ag-wrap { width: 100%; max-width: 440px; margin: auto; position: relative; perspective: 1200px; }

/* halo bercahaya berputar lembut di belakang kartu */
.ag-aura {
    position: absolute; inset: -26px; z-index: 0; border-radius: 34px; pointer-events: none;
    background: conic-gradient(from 0deg, var(--a1), var(--a2), var(--mint), var(--a1));
    filter: blur(40px); opacity: .3;
    animation: ag-spin 20s linear infinite;
}
.ag-card {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    overflow: hidden;
}
.ag-card::before { /* sheen tipis di atas */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

/* ---------- Header ---------- */
.ag-cover { height: 96px; background-size: cover; background-position: center; position: relative; }
.ag-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,19,.15), var(--surface) 98%); }

.ag-head { padding: 0 24px 20px; text-align: center; }
.ag-avatar-wrap { width: 116px; height: 116px; margin: -58px auto 0; position: relative; }
.ag-ring {
    position: absolute; inset: -4px; border-radius: 50%;
    background: conic-gradient(from 200deg, var(--a1), var(--a2), var(--mint), var(--a1));
    animation: ag-spin 14s linear infinite;
}
.ag-avatar {
    position: absolute; inset: 0; width: 116px; height: 116px; border-radius: 50%;
    object-fit: cover; border: 4px solid var(--surface); background: var(--surface-2);
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

.ag-name { margin: 14px 0 4px; font-size: 25px; font-weight: 700; letter-spacing: -.2px; }
.ag-role { margin: 0; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.ag-role i { color: var(--mint); }

/* ---------- Sosial (baris ikon ringkas) ---------- */
.ag-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
.ag-s {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px;
    color: var(--muted); font-size: 16px; text-decoration: none; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line);
    transition: color .18s, background .18s, transform .18s, border-color .18s;
}
.ag-s:hover, .ag-s:focus-visible {
    color: #fff; transform: translateY(-3px); outline: none;
    background: var(--brand, var(--a1)); border-color: transparent;
}

/* ---------- Isi ---------- */
.ag-body { padding: 4px 20px 22px; }

.ag-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--muted); margin: 20px 4px 10px;
}
.ag-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* baris link seragam = rapi */
.ag-links { display: flex; flex-direction: column; gap: 10px; }
.ag-link {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text); text-decoration: none; cursor: pointer; font: inherit; text-align: left;
    transition: background .18s, border-color .18s, transform .18s;
}
.ag-link:hover, .ag-link:focus-visible { background: var(--surface-3); border-color: var(--line-strong); transform: translateY(-2px); outline: none; }
.ag-link .ag-ic {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px;
    font-size: 16px; color: #fff; background: var(--tint, var(--a1));
}
.ag-link .ag-txt { flex: 1; min-width: 0; }
.ag-link .ag-t1 { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.ag-link .ag-t2 { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ag-link .ag-arrow { color: var(--muted); font-size: 13px; transition: transform .18s, color .18s; }
.ag-link:hover .ag-arrow { transform: translateX(4px); color: var(--text); }

/* baris utama (dukungan) = terisi gradien */
.ag-link.is-primary {
    background: linear-gradient(120deg, var(--a1), var(--a2));
    border-color: transparent; color: #fff;
    box-shadow: 0 12px 26px rgba(61,170,245,.28);
}
.ag-link.is-primary .ag-ic { background: rgba(255,255,255,.18); }
.ag-link.is-primary .ag-t2, .ag-link.is-primary .ag-arrow { color: rgba(255,255,255,.85); }
.ag-link.is-primary:hover { filter: brightness(1.05); }

/* aksi mini (bagikan / kontak) */
.ag-mini-row { display: flex; gap: 10px; margin-top: 14px; }
.ag-mini {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
    transition: background .18s, border-color .18s, transform .18s;
}
.ag-mini:hover, .ag-mini:focus-visible { background: var(--surface-3); border-color: var(--line-strong); transform: translateY(-2px); outline: none; }
.ag-mini i { color: var(--a1); }

/* ---------- Footer ---------- */
.ag-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.ag-clock { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.ag-copy { margin: 0; font-size: 12px; color: #6b7590; }
.ag-copy i { color: var(--pink); }

/* ---------- Masuk beranimasi (staggered, halus) ---------- */
.ag-card > *, .ag-head > *, .ag-body > * { animation: ag-in .6s both cubic-bezier(.2,.8,.2,1); }
.ag-cover { animation-delay: .02s; }
.ag-avatar-wrap { animation-delay: .06s; }
.ag-name { animation-delay: .10s; }
.ag-role { animation-delay: .14s; }
.ag-socials { animation-delay: .18s; }
.ag-body > * { animation-delay: .22s; }
@keyframes ag-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Tooltip Bootstrap sesuai tema */
.tooltip .tooltip-inner { background: #1a2130; color: var(--text); border: 1px solid var(--line); font-family: inherit; font-size: 12px; border-radius: 8px; }
.tooltip .tooltip-arrow::before { border-top-color: #1a2130 !important; }

/* ---------- Responsif ---------- */
@media (max-width: 360px) {
    .ag-head, .ag-body { padding-left: 16px; padding-right: 16px; }
    .ag-mini-row { flex-direction: column; }
}

/* ---------- Kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Halaman pembuka / sambutan ---------- */
.ag-loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(700px 420px at 50% 42%, #12182a, var(--bg));
    transition: opacity .5s ease, visibility .5s ease;
    /* cadangan: sembunyi otomatis walau JS gagal */
    animation: ag-loader-auto 0s linear 5s forwards;
}
.ag-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes ag-loader-auto { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.ag-loader-ring {
    width: 52px; height: 52px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--a1), var(--a2), var(--mint), var(--a1));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
    animation: ag-spin 1s linear infinite;
}
.ag-loader-title {
    margin: 0; font-weight: 700; font-size: clamp(20px, 5.5vw, 27px); letter-spacing: .3px; min-height: 1.3em;
    background: linear-gradient(90deg, var(--a1), var(--a2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ag-loader-title::after { content: '|'; margin-left: 2px; -webkit-text-fill-color: var(--a1); animation: ag-blink .9s steps(2) infinite; }
.ag-loader-title.typed::after { display: none; }
@keyframes ag-blink { 50% { opacity: 0; } }
.ag-loader-sub { font-size: 12px; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; }