:root {
        --text: #f4f3ff;
        --muted: rgba(235, 233, 255, 0.66);
        /* Variabel tema (diganti otomatis per siswa lewat JavaScript) */
        --accent: #a99bff;
        --tint1: rgba(129, 140, 248, 0.30);
        --tint2: rgba(99, 102, 241, 0.06);
        --edge: rgba(165, 180, 252, 0.45);
        --glow: rgba(99, 102, 241, 0.35);
        --b1: #6d4aff;
        --b2: #2563eb;
        --b3: #8b5cf6;
        --avatar: linear-gradient(135deg, #6366f1, #8b5cf6);
        --btn: linear-gradient(135deg, rgba(139,112,255,0.55), rgba(59,130,246,0.4));
        --glass: rgba(255, 255, 255, 0.07);
        --glass-border: rgba(255, 255, 255, 0.2);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
        min-height: 100vh;
        font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
        color: var(--text);
        line-height: 1.6;
        background: linear-gradient(135deg, #07071a 0%, #14093a 50%, #08163a 100%);
        background-attachment: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 16px 28px;
        position: relative;
        overflow-x: hidden;
    }

    /* Bola cahaya di belakang (membuat efek kaca terlihat) */
    .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(70px);
        transition: background-color 0.9s ease;
        opacity: 0.55;
        animation: float 18s ease-in-out infinite;
    }
    .b1 { width: 380px; height: 380px; background: var(--b1); top: -80px; left: -60px; }
    .b2 { width: 340px; height: 340px; background: var(--b2); bottom: -90px; right: -40px; animation-delay: -6s; }
    .b3 { width: 260px; height: 260px; background: var(--b3); top: 45%; left: 55%; opacity: 0.35; animation-delay: -11s; }
    @keyframes float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33%      { transform: translate(50px, 40px) scale(1.1); }
        66%      { transform: translate(-40px, 60px) scale(0.95); }
    }

    header, main, footer { position: relative; z-index: 1; }

    /* Header */
    header { text-align: center; margin-bottom: 28px; }
    header .badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 999px;
        background: var(--glass);
        border: 1px solid var(--glass-border);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        margin-bottom: 12px;
    }
    header h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; }

    main { width: min(860px, 100%); flex: 1; }

    /* Kartu liquid glass */
    .card {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--tint1), var(--tint2));
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid var(--edge);
        border-radius: 28px;
        box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 70px var(--glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 40px rgba(255, 255, 255, 0.04);
        padding: 36px;
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 36px;
        animation: fadeIn 0.5s ease;
    }
    /* Kilau pantulan cahaya */
    .card::before {
        content: "";
        position: absolute;
        top: -60%;
        left: -30%;
        width: 80%;
        height: 120%;
        background: linear-gradient(115deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
        transform: rotate(8deg);
        pointer-events: none;
    }
    .card > * { position: relative; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(14px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .profile { text-align: center; padding: 8px 0; }
    .avatar {
        width: 128px;
        height: 128px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2.6rem;
        font-weight: 700;
        color: #fff;
        margin: 0 auto 18px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        background: var(--avatar);
        border: 2px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.35);
    }
    .profile h2 { font-size: 1.35rem; }
    .role { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
    .class { color: var(--muted); font-size: 0.88rem; }

    .details .bio { color: rgba(244, 243, 255, 0.85); margin-bottom: 22px; }
    .section-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin-bottom: 10px;
    }
    .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
    .tags span {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
        padding: 4px 13px;
        border-radius: 999px;
        font-size: 0.85rem;
    }
    .projects { list-style: none; }
    .projects li {
        padding: 9px 0 9px 22px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
        position: relative;
        font-size: 0.95rem;
    }
    .projects li:last-child { border-bottom: none; }
    .projects li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 18px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent);
    }

    /* Foto avatar */
    .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .avatar input { display: none; }
    .avatar::after {
        content: "Ganti foto";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 0.8rem;
        font-weight: 600;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .avatar:hover::after { opacity: 1; }

    /* Navigasi */
    .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 24px;
    }
    .nav button {
        border: 1px solid var(--glass-border);
        cursor: pointer;
        font: inherit;
        font-weight: 600;
        color: var(--text);
        padding: 12px 26px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    }
    .nav button:hover:not(:disabled) {
        background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.1));
        transform: translateY(-2px);
    }
    .btn-next { background: var(--btn) !important; }
    .nav button:disabled { opacity: 0.35; cursor: not-allowed; }

    .indicator { text-align: center; }
    .dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
    .dots i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
        transition: all 0.3s ease;
    }
    .dots i.active {
        width: 26px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    }
    .counter { font-size: 0.82rem; color: var(--muted); }

    footer { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin-top: 28px; text-align: center; }

    /* Responsif */
    @media (max-width: 720px) {
        .card { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
        .avatar { width: 108px; height: 108px; font-size: 2.2rem; }
    }
    @media (max-width: 480px) {
        body { padding-top: 28px; }
        .nav button { padding: 11px 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .blob, .card { animation: none; }
    }