/* Dompet QU — Media placeholder + lazy-load (semua portal) */

:root {
  --dq-media-base: #e0f2fe;
  --dq-media-mid: #f0f9ff;
  --dq-media-accent: #bae6fd;
  --dq-media-ink: #0369a1;
  --dq-media-radius: 1rem;
}

@keyframes dqMediaShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes dqMediaFadeIn {
  from { opacity: .35; filter: blur(6px) saturate(.7); }
  to { opacity: 1; filter: none; }
}

/* ---------- Image media ---------- */
img.dq-media {
  background-color: var(--dq-media-base);
  background-image: linear-gradient(
    105deg,
    var(--dq-media-base) 0%,
    var(--dq-media-mid) 38%,
    var(--dq-media-accent) 50%,
    var(--dq-media-mid) 62%,
    var(--dq-media-base) 100%
  );
  background-size: 220% 100%;
  animation: dqMediaShimmer 1.25s ease-in-out infinite;
  color: transparent;
}

img.dq-media.is-loaded {
  animation: dqMediaFadeIn .45s ease both;
  background-image: none;
  background-color: transparent;
  color: inherit;
}

img.dq-media.is-error {
  animation: none;
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(14,165,233,.12), rgba(3,105,161,.18)),
    repeating-linear-gradient(
      -45deg,
      rgba(186,230,253,.55) 0 8px,
      rgba(224,242,254,.55) 8px 16px
    );
  color: var(--dq-media-ink);
}

/* ---------- Frame wrapper (hero, kartu, spotlight) ---------- */
.dq-media-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dq-media-base);
}

.dq-media-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    105deg,
    var(--dq-media-base) 0%,
    var(--dq-media-mid) 38%,
    var(--dq-media-accent) 50%,
    var(--dq-media-mid) 62%,
    var(--dq-media-base) 100%
  );
  background-size: 220% 100%;
  animation: dqMediaShimmer 1.25s ease-in-out infinite;
  transition: opacity .4s ease;
}

.dq-media-frame.is-loaded::before,
.dq-media-frame.is-error::before {
  opacity: 0;
  animation: none;
}

/* Jangan paksa position:relative — hero/detail memakai absolute fill */
.dq-media-frame > img.dq-media,
.dq-media-frame > .dq-media-bg {
  z-index: 0;
}
.lp-hero.dq-media-frame,
.lp-detail-hero.dq-media-frame,
.auth-aside.dq-media-frame {
  background: transparent;
}
.lp-hero.dq-media-frame::before,
.lp-detail-hero.dq-media-frame::before,
.auth-aside.dq-media-frame::before {
  z-index: 1;
}
/* Override agresif: gambar absolute-fill tidak pernah diubah ke flow layout */
.lp-hero .lp-hero__media,
.lp-detail-hero > img,
.auth-aside .auth-aside__media,
.lp-service > img,
.lp-feature > img,
.lp-feature-block__media > img,
.lp-spotlight__visual > img,
.lp-cta > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  z-index: 0 !important;
}
.lp-spotlight__visual.dq-media-frame,
.lp-cta.dq-media-frame {
  background: #e0f2fe;
}
.lp-spotlight__visual.dq-media-frame::before,
.lp-cta.dq-media-frame::before {
  border-radius: inherit;
  z-index: 1;
}
.lp-hero .lp-hero__veil,
.lp-detail-hero .lp-detail-hero__veil,
.lp-service .lp-service__veil,
.lp-feature .lp-feature__veil {
  z-index: 2;
}
.lp-hero .lp-hero__content,
.lp-detail-hero .lp-detail-hero__content,
.lp-service .lp-service__body,
.lp-feature .lp-feature__body {
  z-index: 3;
}
.lp-hero.dq-media-frame::before,
.lp-detail-hero.dq-media-frame::before,
.lp-service.dq-media-frame::before,
.lp-feature.dq-media-frame::before {
  z-index: 1;
}

/* ---------- Background lazy (data-bg) ---------- */
.dq-media-bg {
  background-color: var(--dq-media-base);
  background-image: linear-gradient(
    105deg,
    var(--dq-media-base) 0%,
    var(--dq-media-mid) 40%,
    var(--dq-media-accent) 50%,
    var(--dq-media-mid) 60%,
    var(--dq-media-base) 100%
  );
  background-size: 220% 100%;
  animation: dqMediaShimmer 1.25s ease-in-out infinite;
  background-position: center;
  background-repeat: no-repeat;
}

.dq-media-bg.is-loaded {
  animation: none;
  background-size: cover;
}

.dq-media-bg.is-error {
  animation: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(186,230,253,.55) 0 8px,
    rgba(224,242,254,.55) 8px 16px
  );
}

/* ---------- Avatar / thumb kecil ---------- */
.dq-media--avatar,
.dq-media--thumb {
  --dq-media-base: #e0f2fe;
  --dq-media-mid: #f8fafc;
  --dq-media-accent: #bae6fd;
}

.dq-media--avatar:not(.is-loaded),
.dq-media--thumb:not(.is-loaded) {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

/* ---------- Skeleton blok konten generik ---------- */
.dq-skeleton {
  display: block;
  border-radius: var(--dq-media-radius);
  background-color: var(--dq-media-base);
  background-image: linear-gradient(
    105deg,
    var(--dq-media-base) 0%,
    var(--dq-media-mid) 40%,
    var(--dq-media-accent) 50%,
    var(--dq-media-mid) 60%,
    var(--dq-media-base) 100%
  );
  background-size: 220% 100%;
  animation: dqMediaShimmer 1.25s ease-in-out infinite;
}

.dq-skeleton--text {
  height: .85rem;
  border-radius: 999px;
  margin: .35rem 0;
}
.dq-skeleton--title {
  height: 1.25rem;
  width: 55%;
  border-radius: .5rem;
}
.dq-skeleton--card {
  min-height: 10rem;
  width: 100%;
}
.dq-skeleton--hero {
  min-height: 16rem;
  width: 100%;
  border-radius: 0;
}

/* Portal gelap (admin sidebar avatar, dll) */
.bg-slate-900 .dq-media:not(.is-loaded),
.bg-slate-900 .dq-media-frame:not(.is-loaded)::before {
  --dq-media-base: #1e293b;
  --dq-media-mid: #334155;
  --dq-media-accent: #475569;
}

/* Auth aside */
.auth-aside .dq-media:not(.is-loaded),
.auth-aside .dq-media-frame:not(.is-loaded)::before {
  --dq-media-base: #0369a1;
  --dq-media-mid: #0284c7;
  --dq-media-accent: #38bdf8;
}

@media (prefers-reduced-motion: reduce) {
  img.dq-media,
  .dq-media-frame::before,
  .dq-media-bg,
  .dq-skeleton {
    animation: none !important;
  }
  img.dq-media.is-loaded {
    filter: none !important;
    opacity: 1 !important;
  }
}