/* css/global-optimizations.css — ADIP RMX Global Performance & Brand Sync Layer
   ============================================================================
   ADDITIF MURNI (ADDITIVE-ONLY). File baru, tidak menimpa file CSS lain.
   Berisi:
   1) Circular brand icon/logo styling (semua device)
   2) GPU acceleration untuk Modal Auth, Modal Changelog, Sidebar Drawer
   Dimuat paling akhir di setiap halaman agar override aman tanpa merusak
   logika/komponen yang sudah ada.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) GLOBAL BRAND ICON / FAVICON-STYLE LOGO — CIRCULAR & PROPORSIONAL
   --------------------------------------------------------------------------- */
.logo-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-img,
.logo-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Small circular brand marks used elsewhere (guest widgets, footer badges) */
.md-guest-logo,
.auth-modal-logo,
.brand-icon-circle {
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1;
}

@media (max-width: 480px) {
  .logo-wrapper { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------------------
   2) GPU ACCELERATION — MODAL AUTH, MODAL CHANGELOG, SIDEBAR DRAWER
   Mencegah lag/stutter saat animasi buka/tutup & scroll di HP.
   --------------------------------------------------------------------------- */
.auth-modal-overlay,
.auth-modal-card,
.clg-modal,
.clg-pill,
.thor-panel {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Release will-change when not animating to save RAM/GPU memory on HP */
.auth-modal-overlay:not(.open),
.clg-modal:not(.active) {
  will-change: auto;
}

/* Smoother scrolling inside modal bodies on iOS/Android */
.clg-modal__body,
.auth-modal-card {
  -webkit-overflow-scrolling: touch;
}