/* ============================================================
   Settings brand — jiplak konten.com (bedah live 17 Sep 2026)
   Cetak biru terukur di HP 393x852:
     - avatar BULAT 80x80, gambar object-cover, wadah relative
     - input file TERSEMBUNYI (accept png/jpeg/svg)
     - tombol kamera BULAT 28x28 menempel pojok kanan-bawah,
       ikon 14x14, latar lebih terang dari kartu + border 1px
     - Security: 3 kartu (Change Password / Change Email / 2FA)
     - tombol "Update Password" 186x44 radius 10, "Ubah Email"
       150x44, "Enable 2FA" 100x36 radius 8
   Warna aksen konten.com oranye -> biru Clypora #ff2e6a.
   ============================================================ */

/* --- 1. Foto profil ------------------------------------------------- */
.st-avatar-wrap{position:relative;display:inline-block;flex:0 0 auto;
  line-height:0}

.st-avatar{display:grid;place-items:center;
  width:80px;height:80px;flex:0 0 80px;
  border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#7202ff,#ff2e6a);
  color:#fff;font-size:2rem;font-weight:850;line-height:1;
  /* jaga-jaga: kalau isinya teks (belum ada foto) jangan sampai
     meluber keluar lingkaran */
  text-align:center;white-space:nowrap;
  cursor:pointer;transition:opacity .15s}
.st-avatar:hover{opacity:.9}
.st-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* konten.com menyembunyikan input file dan memicunya lewat tombol */
.st-avatar-file{display:none !important}

.st-avatar-btn{position:absolute;bottom:-4px;right:-4px;
  width:28px !important;height:28px !important;min-height:0 !important;
  padding:0 !important;
  display:flex;align-items:center;justify-content:center;
  background:#1b1e33 !important;border:1px solid #3a2030 !important;
  border-radius:50% !important;
  color:#9b93a6;cursor:pointer;transition:background .15s,color .15s}
.st-avatar-btn:hover{background:#262a45 !important;color:#fff}
.st-avatar-btn svg{width:14px;height:14px;display:block}

/* profil-hero harus sejajar rapi dengan avatar yang kini 80px */
.profile-hero{display:flex;align-items:center;gap:16px}

/* --- 2. Tab Security ------------------------------------------------ */
.st-sec{display:flex;flex-direction:column;gap:14px}
.st-sec h2{margin:0 !important;font-size:18px;font-weight:600;
  line-height:1.3}
.st-sec p{margin:0;color:#9b93a6;font-size:14px;line-height:1.5}
.st-sec-now{color:#c7cde0}

/* tombol aksi: lebar mengikuti isinya seperti konten.com,
   BUKAN selebar kartu (dulu memakai .wide).
   Padding disetel supaya lebar akhirnya sedekat mungkin dengan
   konten.com: "Update Password" 186x44, "Ubah Email" 150x44,
   "Enable 2FA" 100x36. Sisa selisih beberapa px berasal dari merek
   huruf yang berbeda (ui-sans-serif vs neueMontreal) — sama seperti
   di halaman Banding, dan TIDAK dipaksakan. */
.st-sec-btn{align-self:flex-start;
  height:44px !important;min-height:44px !important;
  padding:0 26px !important;
  border-radius:10px !important;
  font-size:16px !important;white-space:nowrap}
.st-sec-btn.st-2fa{height:36px !important;min-height:36px !important;
  padding:0 12px !important;border-radius:8px !important;
  font-size:14px !important}

/* --- 3. Pesan hasil ------------------------------------------------- */
.st-msg{margin:0 0 12px;padding:10px 14px;border-radius:10px;
  font-size:14px;line-height:1.4}
.st-msg.ok{background:rgba(255,46,106,.12);border:1px solid #ff2e6a;
  color:#ffd9e6}
.st-msg.err{background:rgba(244,87,87,.12);border:1px solid #f45757;
  color:#ffd9d9}