/* Halaman akun: masuk, akun saya, beli, admin. Memakai token warna & huruf dari gaya.css */
.akun-badan { min-height: 100vh; min-height: 100svh; background: var(--abu); padding-top: var(--nav); }
.akun-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav); background: rgba(251, 251, 253, .9); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.akun-nav .wadah-l { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.akun-nav a.kanan { font-size: 14px; color: var(--oranye-teks); }
.akun-panel { width: min(560px, 100% - 32px); margin: clamp(32px, 7vw, 72px) auto; background: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 48px); box-shadow: 0 30px 60px -48px rgba(0, 0, 0, .4); }
.akun-panel.lebar { width: min(980px, 100% - 32px); }
.akun-panel h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.akun-panel h2 { margin: 36px 0 12px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.akun-panel p { color: var(--teks); }
.akun-panel .lead { font-size: 17px; margin: 12px 0 0; }
.tombol-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 28px; border-radius: 980px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--garis); transition: background .2s; }
.tombol-google:hover { background: var(--abu); }
.tombol-google svg { width: 20px; height: 20px; }
.pemisah { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-size: 13px; color: var(--teks); }
.pemisah::before, .pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }
.isian { display: block; width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--garis); font-size: 17px; background: #fff; }
.isian:focus { outline: none; border-color: var(--oranye-teks); box-shadow: 0 0 0 4px rgba(194, 65, 12, .12); }
.akun-panel .tombol { width: 100%; margin-top: 12px; }
.catatan { font-size: 13px; color: var(--teks); margin-top: 16px; line-height: 1.5; }
.pesan { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.pesan.ok { background: #effaf2; color: #1d5c34; }
.pesan.galat { background: #fff1ec; color: #9a3412; }
.pesan[hidden] { display: none; }
.daftar-kelas-saya { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.daftar-kelas-saya li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--abu); }
.daftar-kelas-saya b { font-size: 17px; font-weight: 650; }
.daftar-kelas-saya small { display: block; font-size: 13px; color: var(--teks); margin-top: 2px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--abu-2); vertical-align: top; }
.tabel th { font-weight: 600; color: var(--teks); font-size: 13px; }
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--abu); color: var(--teks); }
.status.lunas { background: #effaf2; color: #1d5c34; }
.status.menunggu { background: #fff6e5; color: #8a5300; }
.ringkas-beli { margin-top: 24px; padding: 20px; border-radius: 18px; background: var(--abu); }
.ringkas-beli .harga-besar { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.ringkas-beli ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink); font-size: 15px; line-height: 1.6; }
.instruksi { margin-top: 20px; padding: 20px; border-radius: 18px; border: 1.5px solid var(--garis); }
.instruksi b.kode { font-size: 21px; letter-spacing: .04em; }
.instruksi dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: 15px; }
.instruksi dt { color: var(--teks); }
.instruksi dd { margin: 0; font-weight: 600; }
.aksi-kecil { display: flex; gap: 8px; flex-wrap: wrap; }
.aksi-kecil button { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--abu); }
.aksi-kecil button.utama { background: var(--oranye-tombol); color: #fff; }
.tersembunyi { display: none !important; }
.tombol-google[hidden], .pemisah[hidden] { display: none; }
.dokumen h2 { margin-top: 28px; font-size: 19px; }
.dokumen p { font-size: 16px; line-height: 1.6; margin: 8px 0 0; max-width: 46em; }
/* Form masuk: email + kata sandi (19 Okt 2026) */
.akun-panel [hidden] { display: none !important; }
.form-akun { display: grid; gap: 12px; margin-top: 28px; }
#blok-google + .form-akun { margin-top: 0; }
.form-akun .tombol { margin-top: 4px; }
.isian-sandi { position: relative; }
.isian-sandi .isian { padding-right: 76px; }
.lihat { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--teks); background: transparent; }
.lihat:hover { background: var(--abu); }
.baris-lupa { margin: -4px 0 0; text-align: right; }
.tautan-teks { padding: 0; background: none; border: 0; font: inherit; font-size: 15px; color: var(--oranye-teks); cursor: pointer; }
.tautan-teks:hover { text-decoration: underline; }
.ganti-mode { margin: 20px 0 0; font-size: 15px; text-align: center; }
.catatan .tautan, .pesan .tautan { font-size: inherit !important; }
.catatan .tautan::after { content: none !important; }