/* LOGIN GEMILANG CBT — siswa & operator (biru #354ECD) */
    /* ================= LOGIN GEMILANG (layar penuh) ================= */
    body.g2-aktif .main-header, body.g2-aktif .main-footer { display: none !important; }
    body.g2-aktif .content-wrapper { min-height: 100vh !important; margin: 0 !important; padding: 0 !important; background: #f5f6f8 !important; }
    body.g2-aktif { background: #f5f6f8; }

    .g2 { --biru: #354ecd; --biru-tua: #2a3fb0; --kuning: #f97316; --teks: #141a2e; --abu: #6b7280; --garis: #e5e7ee;
        display: grid; grid-template-columns: 52.5% 47.5%; min-height: 100vh; font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; color: var(--teks); }
    .g2 * { box-sizing: border-box; }

    /* ---------- Panel kiri ---------- */
    .g2-kiri { position: relative; overflow: hidden; background: var(--biru); color: #fff; padding: 52px 56px 44px; display: flex; flex-direction: column;
        background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 22px 22px; }
    .g2-kiri::after { content: ""; position: absolute; width: 520px; height: 520px; right: -200px; bottom: -220px; border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%); pointer-events: none; }
    .g2-merek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: .2px; line-height: 1.15; }
    .g2-ikon { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--biru); font-weight: 800; font-size: 18px; overflow: hidden; flex: none; }
    .g2-ikon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
    .g2-merek small { display: block; font-size: 11px; font-weight: 600; opacity: .75; letter-spacing: .8px; text-transform: uppercase; margin-top: 2px; }

    .g2-isi { margin: auto 0; padding: 40px 0; max-width: 560px; position: relative; z-index: 1; }
    .g2-tangan { font-family: 'Caveat', 'Segoe Script', cursive; font-size: 30px; color: var(--kuning); transform: rotate(-3deg); display: inline-block; margin-bottom: 2px; }
    .g2-tangan .g2-bintang { display: inline-block; animation: g2Kilau 2.4s ease-in-out infinite; }
    .g2-judul { font-size: 68px; line-height: 1.02; font-weight: 800; letter-spacing: -1.5px; margin: 0; color: #fff; animation: g2Masuk .7s cubic-bezier(.2,.8,.2,1) both; }
    .g2-judul .g2-stabilo { color: #fff; font-size: .62em; letter-spacing: 1px; margin-top: 14px; padding: 6px 16px; background: var(--kuning); border-radius: 10px; transform: rotate(-2deg); }
    .g2-judul .g2-stabilo::before { display: none; }
    .g2-stabilo { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
    .g2-stabilo::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: 3px; height: 40%; background: var(--kuning); z-index: -1; transform: skew(-6deg); border-radius: 2px; }
    .g2-deskripsi { font-size: 15.5px; line-height: 1.7; opacity: .86; margin: 0; }

    /* kartu ilustrasi */
    .g2-kartu { position: relative; margin-top: 38px; width: 320px; background: #fff; color: var(--teks); border-radius: 16px; padding: 22px 22px 20px;
        transform: rotate(-2.5deg); box-shadow: 14px 16px 0 rgba(20,30,90,.28); animation: g2Ayun 6s ease-in-out infinite; }
    .g2-selotip { position: absolute; top: -12px; left: 100px; width: 92px; height: 24px; background: rgba(249,115,22,.92); transform: rotate(-3deg); border-radius: 2px; }
    .g2-kartu-label { font-family: 'Caveat', cursive; color: #ef5b4c; font-size: 19px; }
    .g2-kartu-angka { font-size: 34px; font-weight: 800; color: var(--biru); line-height: 1.1; }
    .g2-kartu-angka small { font-size: 16px; color: #9aa1b5; font-weight: 600; }
    .g2-bar { height: 8px; border-radius: 99px; background: #eceffa; margin: 10px 0 14px; overflow: hidden; }
    .g2-bar i { display: block; height: 100%; width: 70%; background: var(--biru); border-radius: 99px; animation: g2Isi 2.2s ease-out both; }
    .g2-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .g2-mini div { border: 1px solid var(--garis); border-radius: 10px; padding: 8px 4px; text-align: center; box-shadow: 0 2px 0 #eef0f6; }
    .g2-mini span { display: block; font-size: 10px; color: #9aa1b5; font-weight: 600; text-transform: uppercase; }
    .g2-mini b { font-size: 15px; }
    .g2-stiker { position: absolute; right: -16px; bottom: -14px; background: #22a55a; color: #fff; font-family: 'Caveat', cursive; font-size: 19px; padding: 3px 14px; border-radius: 999px; transform: rotate(-10deg); box-shadow: 0 6px 14px rgba(0,0,0,.18); }

    .g2-bawah { padding-top: 20px; display: flex; align-items: center; gap: 14px; font-size: 14px; position: relative; z-index: 1; }
    .g2-avatar { display: flex; }
    .g2-avatar span { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
        background: #c9d1f7; color: var(--biru); border: 2px solid var(--biru); margin-left: -8px; }
    .g2-avatar span:first-child { margin-left: 0; }
    .g2-bawah p { margin: 0; opacity: .88; }

    /* ---------- Panel kanan ---------- */
    .g2-kanan { display: flex; align-items: center; justify-content: center; padding: 40px 28px; position: relative; }
    .g2-form { width: 100%; max-width: 400px; animation: g2Masuk .6s cubic-bezier(.2,.8,.2,1) both; }
    .g2-form .g2-merek { color: var(--biru); margin-bottom: 30px; }
    .g2-form .g2-ikon { background: var(--biru); color: #fff; }
    .g2-form h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.4px; color: var(--teks); }
    .g2-sub { color: #4b5563; font-size: 14.5px; margin: 0 0 28px; }
    .g2-label { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 8px; color: var(--teks); }
    .g2-field { position: relative; margin-bottom: 18px; }
    .g2-field input { width: 100%; height: 48px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; padding: 0 64px 0 14px;
        font-size: 14.5px; color: var(--teks); outline: none; transition: .15s; font-family: inherit; }
    .g2-field input::placeholder { color: #a3a9b8; }
    .g2-field input:focus { border-color: var(--biru); box-shadow: 0 0 0 4px rgba(53,78,205,.12); }
    .g2-lihat { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #8a91a3; font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-family: inherit; }
    .g2-lihat:hover { color: var(--biru); background: #eef1fd; }
    .g2-caps { display: none; margin: -10px 0 14px; font-size: 12px; font-weight: 600; color: #b45309; }
    .g2-baris { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 22px; font-size: 13.5px; }
    .g2-baris span { color: #4b5563; }
    .g2-baris b { font-variant-numeric: tabular-nums; color: var(--teks); }
    .g2-baris a { color: var(--biru); font-weight: 600; }
    .g2-btn { width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--biru); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit;
        box-shadow: 0 10px 22px -10px rgba(53,78,205,.75); transition: .2s; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
    .g2-btn:hover { background: var(--biru-tua); transform: translateY(-1px); }
    .g2-btn:disabled { opacity: .8; transform: none; }
    .g2-catatan { text-align: center; margin-top: 22px; font-size: 13.5px; color: #4b5563; line-height: 1.9; }
    .g2-catatan a { color: var(--biru); font-weight: 700; }
    .g2-pojok { position: absolute; right: 22px; bottom: 18px; font-size: 12px; color: #9aa1b5; }
    #form-pesan .alert { border-radius: 10px; margin-bottom: 16px; }

    @keyframes g2Masuk { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes g2Ayun  { 0%,100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-6px); } }
    @keyframes g2Isi   { from { width: 0; } to { width: 70%; } }
    @keyframes g2Kilau { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(20deg); } }
    @media (prefers-reduced-motion: reduce) { .g2 * { animation: none !important; } }

    @media (max-width: 900px) {
        .g2 { grid-template-columns: 1fr; }
        .g2-kiri { padding: 26px 22px 30px; }
        .g2-isi { margin: 24px 0 4px; padding: 0; }
        .g2-judul { font-size: 40px; }
        .g2-tangan { font-size: 24px; }
        .g2-kartu, .g2-bawah { display: none; }
        .g2-kanan { padding: 30px 22px 56px; align-items: flex-start; }
        .g2-form .g2-merek { display: none; }
        .g2-pojok { left: 0; right: 0; text-align: center; }
    }