@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

/* =====================================================
   RED WHITE PREMIUM UI
   Dominant Color : #d71920
   Background     : Merah Putih
   Logic/Selector  : Tetap mengikuti struktur class lama
   Effects        : layered card, ribbon, glow, lift,
                    soft glass, diagonal highlight
   ===================================================== */

:root {
  --aqua-main: #d71920;
  --aqua-light: #ff4d5c;
  --aqua-soft: #ffffff;
  --aqua-dark: #9f1018;
  --aqua-deep: #4b0508;

  --red-main: #d71920;
  --red-light: #ff4d5c;
  --red-soft: #fff1f2;
  --red-dark: #9f1018;
  --red-deep: #4b0508;

  --text-main: #2a0507;
  --text-soft: #6c1118;
  --text-white: #ffffff;
  --text-gold: #ffe3e6;

  --card-bg: rgba(255, 255, 255, 0.94);
  --glass-bg: rgba(255, 255, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.68);

  --shadow-aqua: 0 18px 42px rgba(215, 25, 32, 0.28);
  --shadow-dark: 0 18px 42px rgba(76, 0, 8, 0.32);
  --radius-lg: 24px;
  --radius-md: 15px;
}

/* ===== BACKGROUND UTAMA ===== */

.user-page-section-background {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.48) 16%, transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.20) 18%, transparent 38%),
    linear-gradient(145deg, #d71920 0%, #b90f18 38%, #ffffff 38.3%, #ffffff 48%, #d71920 48.3%, #7c060d 100%) !important;
}

.user-page-section-background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.32) 46%, transparent 63%),
    repeating-linear-gradient(
      -35deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 2px,
      transparent 2px,
      transparent 18px
    );
  animation: redWhiteShine 9s linear infinite;
}

.user-page-section-background::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -190px;
  top: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 48%, transparent 70%);
  filter: blur(8px);
  animation: redWhiteFloat 7s ease-in-out infinite alternate;
}

/* ===== GLOBAL FONT ===== */

.wrapper,
.wrapper * {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  z-index: 1;
}

.wrapper .user-page-section-content {
  position: relative;
  z-index: 2;
}

/* ===== LOGO / AVATAR ===== */

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component {
  border-radius: 28px;
  border: 4px solid #ffffff;
  background:
    linear-gradient(145deg, #ffffff 0%, #fff1f2 42%, #d71920 100%);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, .36),
    0 16px 34px rgba(74, 0, 7, .35),
    0 0 28px rgba(255, 255, 255, .72);
  transform: rotate(-2deg);
  animation: avatarPulse 2.9s ease-in-out infinite;
}

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component .common-user-icon-wrapper svg {
  fill: var(--red-deep);
}

.wrapper .user-page-section-content .user-info .cover-image-container .preview-share-icon-wrapper svg {
  fill: var(--text-white);
}

/* ===== USERNAME & DESCRIPTION ===== */

.wrapper .user-page-section-content .user-info .username {
  text-align: center;
  margin: 12px auto 8px;
  padding: 12px 18px;
  color: var(--red-deep);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .45px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,242,.94));
  border: 2px solid rgba(255,255,255,.88);
  box-shadow:
    0 8px 0 rgba(159, 16, 24, .55),
    0 18px 36px rgba(84, 0, 9, .24);
  backdrop-filter: blur(15px);
}

.wrapper .user-page-section-content .user-info .username::first-letter {
  color: var(--red-main);
}

.wrapper .user-page-section-content .user-info .preview-user-description__component {
  position: relative;
  padding: 16px 18px 16px 22px;
  color: var(--text-soft);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.72;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    inset 5px 0 0 var(--red-main),
    0 15px 32px rgba(93, 0, 9, .20);
  backdrop-filter: blur(16px);
}

.wrapper .user-page-section-content .user-info .preview-user-description__component::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  right: 14px;
  top: -18px;
  border-radius: 50%;
  background: rgba(215, 25, 32, .14);
  border: 1px solid rgba(215, 25, 32, .18);
}

.wrapper .user-page-section-content .user-info .preview-share-icon__component {
  background: linear-gradient(135deg, var(--red-main), var(--red-deep));
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 10px 22px rgba(75, 5, 8, .28);
}

.wrapper .user-page-section-content .user-info .preview-share-icon__component svg {
  fill: var(--text-white);
}

/* ===== CARD UTAMA / MENU / LINK ===== */

.wrapper .preview-signup-generator__component,
.wrapper .preview-signup-generator-terms__component,
.wrapper .preview-anonymous-messages__component,
.wrapper .preview-commerce-link-item__component,
.wrapper .preview-location-item__component,
.wrapper .preview-menu-item__component,
.wrapper .preview-links-list__component .preview-link-item__component .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-link-item__component .preview-lock-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-lock-link-wrapper,
.wrapper .preview-image-sliders-list__component .youtube-gallery,
.wrapper .preview-image-sliders-list__component .slider-grid,
.wrapper .preview-image-sliders-list__component .instagram-gallery {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--text-main);
  border: 2px solid rgba(255,255,255,.95);
  background:
    linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,244,245,.98) 46%, rgba(255,255,255,.94) 100%);
  box-shadow:
    8px 8px 0 rgba(159, 16, 24, .70),
    0 22px 44px rgba(74, 0, 7, .24);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease,
    background .28s ease;
}

.wrapper .preview-signup-generator__component::after,
.wrapper .preview-signup-generator-terms__component::after,
.wrapper .preview-anonymous-messages__component::after,
.wrapper .preview-commerce-link-item__component::after,
.wrapper .preview-location-item__component::after,
.wrapper .preview-menu-item__component::after,
.wrapper .preview-links-list__component .preview-link-item__component .preview-link-wrapper::after,
.wrapper .preview-links-list__component .preview-link-item__component .preview-lock-link-wrapper::after,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-link-wrapper::after,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-lock-link-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  background: linear-gradient(180deg, var(--red-main), var(--red-light), var(--red-dark));
  box-shadow: 0 0 18px rgba(215, 25, 32, .32);
}

.wrapper .preview-signup-generator__component::before,
.wrapper .preview-signup-generator-terms__component::before,
.wrapper .preview-anonymous-messages__component::before,
.wrapper .preview-commerce-link-item__component::before,
.wrapper .preview-location-item__component::before,
.wrapper .preview-menu-item__component::before,
.wrapper .preview-links-list__component .preview-link-item__component .preview-link-wrapper::before,
.wrapper .preview-links-list__component .preview-link-item__component .preview-lock-link-wrapper::before,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-link-wrapper::before,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-lock-link-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(215,25,32,.11) 26%, transparent 44%),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.76) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .72s ease;
}

.wrapper .preview-signup-generator__component:hover,
.wrapper .preview-signup-generator-terms__component:hover,
.wrapper .preview-anonymous-messages__component:hover,
.wrapper .preview-commerce-link-item__component:hover,
.wrapper .preview-location-item__component:hover,
.wrapper .preview-menu-item__component:hover,
.wrapper .preview-links-list__component .preview-link-item__component .preview-link-wrapper:hover,
.wrapper .preview-links-list__component .preview-link-item__component .preview-lock-link-wrapper:hover,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-link-wrapper:hover,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-lock-link-wrapper:hover {
  transform: translateY(-6px) scale(1.012);
  border-color: #ffffff;
  filter: saturate(1.08);
  background:
    linear-gradient(135deg, #ffffff 0%, #fff0f1 45%, #ffffff 100%);
  box-shadow:
    11px 11px 0 rgba(75, 5, 8, .78),
    0 28px 52px rgba(74, 0, 7, .30),
    0 0 24px rgba(255,255,255,.60);
}

.wrapper .preview-signup-generator__component:hover::before,
.wrapper .preview-signup-generator-terms__component:hover::before,
.wrapper .preview-anonymous-messages__component:hover::before,
.wrapper .preview-commerce-link-item__component:hover::before,
.wrapper .preview-location-item__component:hover::before,
.wrapper .preview-menu-item__component:hover::before,
.wrapper .preview-links-list__component .preview-link-item__component .preview-link-wrapper:hover::before,
.wrapper .preview-links-list__component .preview-link-item__component .preview-lock-link-wrapper:hover::before,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-link-wrapper:hover::before,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-lock-link-wrapper:hover::before {
  transform: translateX(120%);
}

/* ===== THUMBNAIL ===== */

.wrapper .preview-signup-generator__component .thumbnail,
.wrapper .preview-signup-generator-terms__component .thumbnail,
.wrapper .preview-anonymous-messages__component .thumbnail,
.wrapper .preview-commerce-link-item__component .thumbnail,
.wrapper .preview-location-item__component .thumbnail,
.wrapper .preview-menu-item__component .thumbnail,
.wrapper .preview-links-list__component .preview-link-item__component .thumbnail,
.wrapper .preview-links-list__component .preview-lock-link-item__component .thumbnail {
  border-radius: var(--radius-md) !important;
  border: 2px solid rgba(215,25,32,.28);
  box-shadow:
    0 8px 18px rgba(78, 0, 8, .18),
    inset 0 0 0 1px rgba(255,255,255,.72);
}

/* ===== ICON ===== */

.wrapper .preview-commerce-link-item__component .up-down-icon svg,
.wrapper .preview-location-item__component .up-down-icon svg,
.wrapper .preview-menu-item__component .up-down-icon svg,
.wrapper .preview-links-list__component .preview-link-item__component .phone-thumbnail svg,
.wrapper .preview-links-list__component .preview-lock-link-item__component .phone-thumbnail svg,
.wrapper .preview-links-list__component .preview-link-item__component .preview-share-icon__component,
.wrapper .preview-links-list__component .preview-link-item__component .shevron-icon__component,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-share-icon__component,
.wrapper .preview-links-list__component .preview-lock-link-item__component .shevron-icon__component,
.wrapper .preview-links-list__component .preview-link-item__component .preview-share-icon__component svg,
.wrapper .preview-links-list__component .preview-link-item__component .shevron-icon__component svg,
.wrapper .preview-links-list__component .preview-lock-link-item__component .preview-share-icon__component svg,
.wrapper .preview-links-list__component .preview-lock-link-item__component .shevron-icon__component svg {
  fill: var(--red-main);
  color: var(--red-main);
}

/* ===== HEADER LINK / TEXT BLOCK ===== */

.wrapper .preview-links-list__component .preview-header-component,
.wrapper .preview-links-list__component .preview-text-block-component {
  position: relative;
  text-align: center;
  padding: 12px 16px;
  color: var(--text-white);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .35px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #4b0508 0%, #d71920 52%, #ff4d5c 100%);
  border: 2px solid rgba(255,255,255,.72);
  box-shadow:
    0 8px 0 rgba(255,255,255,.28),
    0 16px 30px rgba(74, 0, 7, .28);
  overflow: hidden;
}

.wrapper .preview-links-list__component .preview-header-component::before,
.wrapper .preview-links-list__component .preview-text-block-component::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  right: -28px;
  top: -35px;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
}

/* ===== EXPANDED BLOCK ===== */

.wrapper .preview-links-list__component .preview-link-item__component .common-expanded-block,
.wrapper .preview-links-list__component .preview-link-item__component .common-expanded-locked-block__component,
.wrapper .preview-links-list__component .preview-lock-link-item__component .common-expanded-block,
.wrapper .preview-links-list__component .preview-lock-link-item__component .common-expanded-locked-block__component {
  border: 2px solid rgba(255,255,255,.94);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,241,242,.90));
  color: var(--text-soft);
  box-shadow: 0 14px 28px rgba(74, 0, 7, .16);
}

/* ===== SOCIAL / FOOTER ===== */

.wrapper .preview-social-links__component .social-link-item__component {
  color: var(--text-white);
  fill: var(--text-white);
  background: linear-gradient(135deg, var(--red-main), var(--red-deep));
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    0 7px 0 rgba(255,255,255,.22),
    0 14px 26px rgba(74,0,7,.26);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.wrapper .preview-social-links__component .social-link-item__component:hover {
  transform: translateY(-4px) rotate(-3deg) scale(1.04);
  background: linear-gradient(135deg, #ffffff, #fff1f2);
  color: var(--red-main);
  fill: var(--red-main);
  box-shadow:
    0 9px 0 rgba(159,16,24,.40),
    0 18px 30px rgba(74,0,7,.30);
}

.wrapper .footer-link,
.wrapper .cookies-wrapper #ot-sdk-btn.ot-sdk-show-settings {
  color: var(--text-white) !important;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(74,0,7,.38);
}

.wrapper .report-abuse-button__component,
.wrapper .preview-heylinkme-logo__component {
  color: var(--text-white);
  font-weight: 900;
  height: auto !important;
  text-shadow: 0 2px 10px rgba(74,0,7,.42);
}

.wrapper .report-abuse-button__component .heylinkme-logo,
.wrapper .preview-heylinkme-logo__component .heylinkme-logo {
  color: var(--text-white);
}

.wrapper .report-abuse-button__component .page-report-section,
.wrapper .preview-heylinkme-logo__component .page-report-section {
  margin: 0 !important;
}

/* ===== DELIMITER ===== */

.delimiter-wrapper {
  margin-bottom: 22px;
}

.delimiter-wrapper svg {
  width: -webkit-fill-available;
  height: 24px;
  filter: drop-shadow(0 5px 12px rgba(74, 0, 7, .34));
}

/* =====================================================
   TRANSAKSI SECTION
   ===================================================== */

.transaksi-layout {
  display: grid;
  grid-template-columns: minmax(210px, .86fr) minmax(260px, 1.14fr);
  justify-content: center;
  gap: 20px;
  align-items: stretch;
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12)),
    linear-gradient(145deg, rgba(215,25,32,.42), rgba(255,255,255,.20));
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(14px);
}

.transaksi-left-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.transaksi-left-inner::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.58);
  pointer-events: none;
}

.transaksi-left-img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
  object-fit: cover;
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,.86);
  box-shadow:
    0 14px 0 rgba(159, 16, 24, .40),
    0 22px 40px rgba(74, 0, 7, .30);
}

.transaksi-right-box {
  flex: 1;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  min-width: 0;
}

.transaksi-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  grid-template-areas:
    "transaksi-bank transaksi-bank"
    "transaksi-other transaksi-crypto";
}

.transaksi-bank {
  grid-area: transaksi-bank;
  display: grid;
  place-items: stretch;
  justify-content: stretch;
}

.transaksi-other {
  grid-area: transaksi-other;
  display: flex;
  justify-content: stretch;
  width: 100%;
}

.transaksi-crypto {
  grid-area: transaksi-crypto;
  display: flex;
  justify-content: stretch;
  width: 100%;
}

.transaksi-wrapper {
  display: flex;
  flex-direction: column;
  gap: .78rem;
  align-items: stretch;
  width: 100%;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    inset 0 0 0 1px rgba(215,25,32,.08),
    0 14px 28px rgba(74,0,7,.16);
}

.transaksi-name {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.5rem;
  color: var(--red-deep);
  text-shadow: none;
  padding: 0 0 8px;
  border-bottom: 2px dashed rgba(215,25,32,.22);
}

.transaksi-list-bank,
.transaksi-list-other {
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(4, minmax(95px, 1fr));
  gap: 9px;
}

.transaksi-list-crypto {
  height: fit-content;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  padding: 6px 0;
}

.icon-crypto {
  width: 28px;
  height: 28px;
  filter:
    drop-shadow(0 5px 8px rgba(74,0,7,.24))
    saturate(1.1);
}

.transaksi-item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.transaksi-header {
  position: relative;
  height: 38px;
  min-width: 105px;
  padding: 0 14px 0 32px;
  border-radius: 12px;
  font-weight: 900;
  border: 2px solid rgba(255,255,255,.92);
  background:
    linear-gradient(135deg, #4b0508 0%, #d71920 58%, #ff4d5c 100%);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 7px 0 rgba(75, 5, 8, .58),
    0 12px 22px rgba(74, 0, 7, .24);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

.transaksi-header:hover {
  transform: translateY(-3px);
  border-color: #ffffff;
  background:
    linear-gradient(135deg, #ffffff 0%, #fff1f2 52%, #ffffff 100%);
  color: var(--red-main);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 8px 0 rgba(159,16,24,.48),
    0 16px 26px rgba(74, 0, 7, .30),
    0 0 18px rgba(255,255,255,.45);
}

.transaksi-status {
  display: none;
}

/* ONLINE */
.transaksi-header.is-online::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #20ff68;
  box-shadow:
    0 0 0 4px rgba(32,255,104,.16),
    0 0 10px rgba(32,255,104,.92);
  animation: onlineBlink 1.4s ease-in-out infinite;
}

/* OFFLINE */
.transaksi-header.is-offline,
.transaksi-header:not(.is-online):not(.is-offline) {
  padding: 0 16px;
  background: linear-gradient(135deg, #d8d8d8, #8d8d8d);
  border-color: rgba(255,255,255,.42);
  color: rgba(75,5,8,.60);
  opacity: .55;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 7px 0 rgba(75,5,8,.20),
    0 12px 20px rgba(74,0,7,.12);
}

/* =====================================================
   SHARE LINK
   ===================================================== */

a.share-link {
  display: block;
  width: fit-content;
  margin: 18px auto;
  text-decoration: none;
}

.share-kode-link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #ffffff, #fff1f2 45%, #ffffff);
  border: 2px solid rgba(255,255,255,.90);
  box-shadow:
    0 8px 0 rgba(159, 16, 24, .52),
    0 17px 32px rgba(74, 0, 7, .24);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.share-kode-link-wrapper:hover {
  transform: translateY(-5px);
  background:
    linear-gradient(135deg, var(--red-main), var(--red-deep));
  box-shadow:
    0 10px 0 rgba(255,255,255,.24),
    0 22px 40px rgba(74, 0, 7, .32);
}

.title-link {
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 24px;
  color: var(--red-deep);
  letter-spacing: .22px;
}

.share-kode-link-wrapper:hover .title-link {
  color: var(--text-white);
}

/* =====================================================
   ANIMATION
   ===================================================== */

@keyframes redWhiteShine {
  0% {
    background-position: -280px 0, 0 0;
  }
  100% {
    background-position: 280px 0, 130px 130px;
  }
}

@keyframes redWhiteFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-32px, 36px, 0) scale(1.08);
  }
}

@keyframes avatarPulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(255,255,255,.30),
      0 14px 32px rgba(74,0,7,.30),
      0 0 24px rgba(255,255,255,.72);
  }
  50% {
    box-shadow:
      0 0 0 9px rgba(255,255,255,.22),
      0 18px 38px rgba(74,0,7,.38),
      0 0 38px rgba(255,255,255,.90);
  }
}

@keyframes onlineBlink {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: .62;
    transform: translateY(-50%) scale(.82);
  }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media only screen and (max-width: 768px) {
  .wrapper .user-page-section-content .user-info .username {
    font-size: 18px;
    padding: 10px 15px;
    border-radius: 16px;
  }

  .wrapper .user-page-section-content .user-info .preview-user-description__component {
    font-size: 14.5px;
    padding: 14px 16px 14px 20px;
  }

  .transaksi-layout {
    grid-template-columns: 1fr;
    align-items: center;
    padding: 14px;
    gap: 16px;
  }

  .transaksi-left-img {
    min-height: unset;
    height: auto;
  }

  .transaksi-group {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "transaksi-bank"
      "transaksi-other"
      "transaksi-crypto";
    gap: 18px;
    margin-bottom: 8px;
  }

  .transaksi-header {
    font-size: 1rem;
    height: 39px;
  }

  .transaksi-list-bank,
  .transaksi-list-other {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .transaksi-list-crypto {
    width: 92%;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .transaksi-item {
    width: 100%;
  }

  .transaksi-name {
    font-size: 1.18rem;
    text-align: center;
    line-height: 1.75rem;
  }

  .transaksi-wrapper {
    width: 100%;
    max-width: 100% !important;
    gap: 1rem;
    align-items: stretch;
  }

  .icon-crypto {
    width: 28px;
    height: 28px;
  }
}

@media only screen and (max-width: 480px) {
  .user-page-section-background {
    background:
      radial-gradient(circle at 18% 8%, rgba(255,255,255,.86) 0%, transparent 34%),
      linear-gradient(155deg, #d71920 0%, #9f1018 48%, #ffffff 48.3%, #ffffff 53%, #d71920 53.3%, #6b050a 100%) !important;
  }

  .wrapper .preview-signup-generator__component,
  .wrapper .preview-signup-generator-terms__component,
  .wrapper .preview-anonymous-messages__component,
  .wrapper .preview-commerce-link-item__component,
  .wrapper .preview-location-item__component,
  .wrapper .preview-menu-item__component,
  .wrapper .preview-links-list__component .preview-link-item__component .preview-link-wrapper,
  .wrapper .preview-links-list__component .preview-link-item__component .preview-lock-link-wrapper,
  .wrapper .preview-links-list__component .preview-lock-link-item__component .preview-link-wrapper,
  .wrapper .preview-links-list__component .preview-lock-link-item__component .preview-lock-link-wrapper,
  .wrapper .preview-image-sliders-list__component .youtube-gallery,
  .wrapper .preview-image-sliders-list__component .slider-grid,
  .wrapper .preview-image-sliders-list__component .instagram-gallery {
    border-radius: 19px;
    box-shadow:
      5px 6px 0 rgba(159, 16, 24, .62),
      0 16px 30px rgba(74, 0, 7, .24);
  }

  .transaksi-list-bank,
  .transaksi-list-other {
    grid-template-columns: repeat(2, 1fr);
  }

  .transaksi-header {
    min-width: unset;
    width: 100%;
    font-size: .95rem;
  }

  .share-kode-link-wrapper {
    padding: 10px 15px;
  }

  .title-link {
    font-size: 14px;
  }
}