/* 29 Sep 2026 (Ji 18:44): foto profil tidak simetris.
   1) Avatar clipper (.kt-avatar-btn) ikut kena aturan tombol global ui-sama.css
      (radius 10px, padding 0 16px, flex) -> gambar 24x56 di kotak bersudut. Sudah
      dikecualikan di ui-sama.css; di sini dikunci ulang.
   2) Avatar brand (.st-avatar, display:grid): height:100% pada img tidak berlaku ->
      foto potret meluber 266px dan tergeser ke bawah.
   Solusi: wadah = lingkaran tetap, img diposisikan absolut mengisi penuh + cover + tengah. */
.kt-avatar.kt-avatar-btn,.st-avatar{position:relative;aspect-ratio:1/1;border-radius:50% !important;
  padding:0 !important;min-height:0 !important;box-sizing:border-box}
.kt-avatar.kt-avatar-btn{display:grid !important;place-items:center}
.kt-avatar-btn img,.st-avatar img{position:absolute;inset:0;width:100% !important;height:100% !important;
  max-width:none;object-fit:cover;object-position:center;border-radius:50% !important;display:block}
.kt-avatar-btn .kt-avatar-edit{z-index:1}
.kt-avatar-btn:focus-visible,.st-avatar-btn:focus-visible{outline:2px solid #ff2e6a;outline-offset:2px}

/* ---------- Dialog "Atur foto" ---------- */
.cly-crop{border:0 !important;padding:0 !important;background:transparent !important;box-shadow:none !important;margin:auto;color:#eef0f7;
  width:min(92vw,400px) !important;max-width:calc(100vw - 16px) !important;max-height:calc(100dvh - 16px) !important;overflow:auto !important;box-sizing:border-box}
.cly-crop::backdrop{background:rgba(5,6,12,.78)}
.cly-crop-box{width:100%;background:#14151f;border:1px solid #2a2d42;border-radius:16px;
  padding:18px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;font-family:inherit}
.cly-crop-box h2{margin:0;font-size:18px;line-height:1.3}
.cly-crop-box p{margin:0;font-size:13px;color:#a3a8bd}
.cly-crop-stage{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:12px;
  background:#0b0c13;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.cly-crop-stage:active{cursor:grabbing}
.cly-crop-stage:focus-visible{outline:2px solid #ff2e6a;outline-offset:2px}
.cly-crop-stage img{position:absolute;left:0;top:0;max-width:none !important;max-height:none !important;
  width:auto;height:auto;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none;user-select:none}
.cly-crop-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 999px rgba(5,6,12,.62);outline:2px solid rgba(255,255,255,.9);outline-offset:-2px}
.cly-crop-zoom{display:flex;align-items:center;gap:10px;font-size:13px;color:#a3a8bd}
.cly-crop-zoom input{flex:1;accent-color:#ff2e6a;min-height:0 !important;height:24px}
.cly-crop-act{display:flex;gap:10px;justify-content:flex-end}
.cly-crop-act button{min-height:40px;padding:0 18px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer;border:1px solid #2a2d42}
.cly-crop-act [data-crop=batal]{background:transparent;color:#eef0f7}
.cly-crop-act [data-crop=simpan]{background:#ff2e6a;border-color:#ff2e6a;color:#fff;font-weight:700}
.cly-crop-act button:disabled{opacity:.6;cursor:progress}