/* ==========================================================================
   AntiBLOK — Stylesheet Biopage publik (MOBILE FIRST)
   Susunan: logo -> nama -> deskripsi rata tengah -> tombol tautan
   Variabel --bio-theme / --bio-bg / --bio-text diisi dari pengaturan member.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.bio-body {
    margin: 0;
    min-height: 100vh;
    padding: 0;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bio-text, #1b2430);
    background: var(--bio-bg, #ffffff);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Aksen lembut di bagian atas layar */
.bio-body::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: 210px;
    background: radial-gradient(560px 210px at 50% -50px, color-mix(in srgb, var(--bio-theme) 16%, transparent), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.bio-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;      /* lebar ponsel; tetap di tengah pada layar besar */
    margin: 0 auto;
    padding: 34px 18px 44px;
    text-align: center;
}

/* ------------------------------------------------------------------ Logo */
.bio-logo { margin-bottom: 14px; }
.bio-logo img {
    width: 96px; height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 6px 22px rgba(16, 20, 24, .13);
    display: inline-block;
}
.bio-logo-fallback {
    width: 96px; height: 96px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 2.1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--bio-theme), color-mix(in srgb, var(--bio-theme) 55%, #ffffff));
    box-shadow: 0 6px 22px rgba(16, 20, 24, .13);
}

/* ------------------------------------------------------ Nama & deskripsi */
.bio-name {
    font-size: 1.16rem;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    text-align: center;
}
.bio-desc {
    font-size: 12.8px;
    line-height: 1.65;
    margin: 0 auto 22px;
    max-width: 330px;
    opacity: .78;
    text-align: center;       /* deskripsi singkat rata tengah */
}

/* --------------------------------------------------------------- Tombol */
.bio-links { display: flex; flex-direction: column; gap: 11px; }

.bio-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--bio-radius, 12px);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
    border: 1.5px solid transparent;
}
.bio-btn:active { transform: scale(.985); }

.bio-btn-icon {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    font-size: 14px;
    background: rgba(255, 255, 255, .18);
}
.bio-btn-text { flex: 1; min-width: 0; }
.bio-btn-label {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bio-btn-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: .72;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bio-btn-arrow { opacity: .55; font-size: 11px; flex: 0 0 auto; }

/* --- Gaya tombol: SOLID --- */
.style-solid .bio-btn { background: var(--bio-theme); color: #fff; }
.style-solid .bio-btn:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--bio-theme) 32%, transparent); }

/* --- Gaya tombol: OUTLINE --- */
.style-outline .bio-btn {
    background: transparent;
    color: var(--bio-text);
    border-color: color-mix(in srgb, var(--bio-theme) 45%, transparent);
}
.style-outline .bio-btn .bio-btn-icon { background: color-mix(in srgb, var(--bio-theme) 12%, transparent); color: var(--bio-theme); }
.style-outline .bio-btn:hover { background: color-mix(in srgb, var(--bio-theme) 8%, transparent); }

/* --- Gaya tombol: SOFT --- */
.style-soft .bio-btn {
    background: color-mix(in srgb, var(--bio-theme) 12%, #ffffff);
    color: color-mix(in srgb, var(--bio-theme) 82%, #000000);
}
.style-soft .bio-btn .bio-btn-icon { background: color-mix(in srgb, var(--bio-theme) 18%, #ffffff); }
.style-soft .bio-btn:hover { background: color-mix(in srgb, var(--bio-theme) 18%, #ffffff); }

/* --- Gaya tombol: SHADOW --- */
.style-shadow .bio-btn {
    background: #fff;
    color: var(--bio-text);
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--bio-theme) 55%, #000000);
    border: 1.5px solid color-mix(in srgb, var(--bio-theme) 55%, #000000);
}
.style-shadow .bio-btn .bio-btn-icon { background: color-mix(in srgb, var(--bio-theme) 12%, #ffffff); color: var(--bio-theme); }
.style-shadow .bio-btn:hover { transform: translateY(-1px); }
.style-shadow .bio-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--bio-theme) 55%, #000000); }

/* --- Tombol utama (highlight) --- */
.bio-btn.is-highlight {
    font-weight: 600;
    position: relative;
    animation: bioPulse 2.4s ease-in-out infinite;
}
@keyframes bioPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bio-theme) 40%, transparent); }
    55%      { box-shadow: 0 0 0 7px transparent; }
}

/* --------------------------------------------------------------- Lainnya */
.bio-empty {
    padding: 30px 14px;
    border: 1px dashed color-mix(in srgb, var(--bio-text) 22%, transparent);
    border-radius: 12px;
    font-size: 12.5px;
    opacity: .6;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.bio-empty i { font-size: 1.5rem; }

.bio-footer { margin-top: 26px; font-size: 11px; opacity: .55; }
.bio-footer p { margin: 0 0 3px; }
.bio-credit { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 9.5px; }

/* Layar lebih besar: tetap tampilan ponsel di tengah */
@media (min-width: 560px) {
    .bio-wrap { padding-top: 48px; }
    .bio-logo img, .bio-logo-fallback { width: 104px; height: 104px; }
    .bio-name { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bio-btn, .bio-btn.is-highlight { animation: none; transition: none; }
}