/* Navbar brand logo: large PNG only — no glow box, snappy pulse. */

.app-header,
.app-header--d,
.app-header__main,
.app-header .container--fluid,
.app-brand,
.app-brand__link,
.app-brand__mark {
  overflow: visible;
}

.app-brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  background: transparent;
}

.app-brand__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 0;
  z-index: 2;
  padding: 6px 10px;
  background: transparent;
}

.app-brand__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  transform-origin: center center;
}

.app-brand__mark::before,
.app-brand__mark::after {
  content: none;
  display: none;
}

.app-brand a .app-logo,
.app-header .app-logo {
  display: block;
  width: auto;
  height: 50px;
  max-width: 168px;
  max-height: 50px;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform-origin: center center;
}

/* Mobile: kecilin header */
.app-header:not(.app-header--d) {
  height: 72px;
}

.app-header:not(.app-header--d) .app-header__main {
  height: 52px;
}

.app-header:not(.app-header--d) .app-brand a .app-logo,
.app-header:not(.app-header--d) .app-logo {
  height: 40px;
  max-width: 140px;
  max-height: 40px;
}

.app-header:not(.app-header--d) .app-brand {
  max-width: min(46%, 170px);
  padding-right: 6px;
}

.app-header:not(.app-header--d) .app-header__widgets {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  z-index: 3;
}

/* Desktop / tablet landscape — kecilin header */
@media (min-width: 768px) {
  .app-header--d {
    height: 56px;
  }

  .app-header--d .app-header__main,
  .app-header--d .app-header__balance,
  .app-header--d .app-header__username {
    height: 56px;
  }

  .app-header--d .app-brand {
    max-width: unset;
  }

  .app-header--d .app-brand a .app-logo,
  .app-header--d .app-logo {
    height: 42px;
    max-width: 160px;
    max-height: 42px;
  }

  .app-header--d .app-header__user {
    gap: 0.5rem;
  }

  .app-header--d .app-header__btn-inbox,
  .app-header--d .app-header__username {
    font-size: 0.8125rem;
  }

  .app-header--d .app-header__balance {
    font-size: 0.8125rem;
  }

  .app-header--d .btn--success.btn--flex {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .app-header--d .login-inline__form .input input {
    height: 34px;
    font-size: 0.8125rem;
  }

  .app-header--d .login-inline__form .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .app-header--d .login-inline__form .input__container {
    margin-bottom: 0;
  }

  .app-header--d .input-confirm {
    font-size: 0.75rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .app-brand__link:hover .app-logo {
    animation: app-brand-pulse-hot 0.72s cubic-bezier(0.34, 1.6, 0.64, 1) infinite;
  }
}

@keyframes app-brand-pulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  22% {
    transform: scale(1.14) rotate(-3.2deg);
  }
  40% {
    transform: scale(0.97) rotate(2.4deg);
  }
  58% {
    transform: scale(1.12) rotate(-1.8deg);
  }
  76% {
    transform: scale(1.02) rotate(0.9deg);
  }
}

@keyframes app-brand-pulse-hot {
  0%,
  100% {
    transform: scale(1.04) rotate(0deg);
  }
  24% {
    transform: scale(1.22) rotate(-4deg);
  }
  42% {
    transform: scale(1.02) rotate(3deg);
  }
  62% {
    transform: scale(1.18) rotate(-2deg);
  }
  80% {
    transform: scale(1.08) rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-brand a .app-logo,
  .app-header .app-logo,
  .app-brand__mark {
    animation: none !important;
    transform: none !important;
  }
}

/* === Fix margin-bottom: rapatkan .input__container & .btn (HEADER ONLY) === */
.app-header .input__container {
  margin-bottom: 0.35rem;
}

.app-header .input__container label {
  margin-bottom: 0.15rem;
}

.app-header .btn {
  margin-bottom: 0;
}

.app-header .btn + .btn {
  margin-left: 0.35rem;
}

.app-header .wallet-form .input__container,
.app-header .sp-form__block {
  margin-bottom: 0.5rem;
}

.app-header .login-inline__form .input__container {
  margin-bottom: 0;
  margin-right: 0.35rem;
}