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

/* =====================================================
   AQUA PREMIUM UI
   Dominant Color : #00d7e3
   Background     : #00d7e3
   Text Color     : Berbeda / kontras
   Effects        : Glass, glow, shimmer, hover lift,
                    animated aura, neon border, soft shadow
   ===================================================== */

:root {
  --aqua-main: #00d7e3;
  --aqua-light: #5ff7ff;
  --aqua-soft: #b9fbff;
  --aqua-dark: #008e99;
  --aqua-deep: #05333a;

  --text-main: #07171f;
  --text-soft: #123842;
  --text-white: #ffffff;
  --text-gold: #fff36a;

  --card-bg: rgba(255, 255, 255, 0.82);
  --glass-bg: rgba(255, 255, 255, 0.28);
  --glass-border: rgba(255, 255, 255, 0.55);

  --shadow-aqua: 0 12px 35px rgba(0, 215, 227, 0.35);
  --shadow-dark: 0 14px 34px rgba(0, 45, 54, 0.28);
  --radius-lg: 22px;
  --radius-md: 14px;
}

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

.user-page-section-background {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.65) 0%, transparent 32%),
    radial-gradient(circle at bottom right, rgba(0,110,120,.38) 0%, transparent 34%),
    linear-gradient(135deg, #00d7e3 0%, #28f2ff 42%, #00aab7 100%) !important;
}

.user-page-section-background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 48%, transparent 70%),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent 14px
    );
  animation: aquaShine 8s linear infinite;
}

.user-page-section-background::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  filter: blur(12px);
  animation: aquaFloat 7s ease-in-out infinite alternate;
}

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

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

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

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component {
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: linear-gradient(135deg, #ffffff, var(--aqua-soft));
  box-shadow:
    0 0 0 5px rgba(0, 215, 227, .38),
    0 0 28px rgba(255, 255, 255, .95),
    var(--shadow-dark);
  animation: avatarPulse 2.8s ease-in-out infinite;
}

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component .common-user-icon-wrapper svg {
  fill: var(--aqua-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: 8px auto;
  padding: 10px 16px;
  color: var(--text-main);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .4px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(185,251,255,.82));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(14px);
}

.wrapper .user-page-section-content .user-info .preview-user-description__component {
  padding: 14px 16px;
  color: var(--text-soft);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.7;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 28px rgba(0, 81, 91, .18);
  backdrop-filter: blur(14px);
}

.wrapper .user-page-section-content .user-info .preview-share-icon__component {
  background: var(--aqua-deep);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 16px rgba(255,255,255,.55);
}

.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,.92);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(185,251,255,.95) 45%, rgba(0,215,227,.88) 100%);
  box-shadow:
    0 8px 0 rgba(0, 120, 130, .55),
    0 18px 35px rgba(0, 72, 82, .22);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease;
}

.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(115deg, transparent 0%, rgba(255,255,255,.58) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s 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(-5px) scale(1.015);
  border-color: var(--text-gold);
  filter: saturate(1.12);
  box-shadow:
    0 10px 0 rgba(0, 95, 105, .55),
    0 22px 42px rgba(0, 52, 60, .30),
    0 0 24px rgba(255,255,255,.62);
}

.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(255,255,255,.88);
  box-shadow: 0 8px 18px rgba(0, 69, 78, .18);
}

/* ===== 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(--aqua-deep);
  color: var(--aqua-deep);
}

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

.wrapper .preview-links-list__component .preview-header-component,
.wrapper .preview-links-list__component .preview-text-block-component {
  text-align: center;
  padding: 9px 14px;
  color: var(--text-white);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .3px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, #05333a 0%, #006d78 48%, #00d7e3 100%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 28px rgba(0, 47, 55, .28);
}

/* ===== 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,.88);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: rgba(255,255,255,.78);
  color: var(--text-soft);
  box-shadow: 0 12px 25px rgba(0, 70, 80, .16);
}

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

.wrapper .preview-social-links__component .social-link-item__component {
  color: var(--text-white);
  fill: var(--text-white);
  background: rgba(5, 51, 58, .68);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 18px rgba(255,255,255,.28);
  transition: transform .25s ease, background .25s ease;
}

.wrapper .preview-social-links__component .social-link-item__component:hover {
  transform: translateY(-3px) rotate(-2deg);
  background: var(--aqua-deep);
}

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

.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(0,0,0,.35);
}

.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: 20px;
}

.delimiter-wrapper svg {
  width: -webkit-fill-available;
  height: 24px;
  filter: drop-shadow(0 4px 10px rgba(0, 64, 72, .30));
}

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

.transaksi-layout {
  display: flex;
  justify-content: center;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(12px);
}

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

.transaksi-left-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 16px 32px rgba(0, 67, 75, .26);
}

.transaksi-right-box {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.transaksi-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  grid-template-areas:
    "transaksi-bank transaksi-other transaksi-crypto";
}

.transaksi-bank {
  grid-area: transaksi-bank;
  display: grid;
  place-items: center;
  justify-content: flex-start;
}

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

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

.transaksi-wrapper {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  align-items: flex-start;
}

.transaksi-name {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5rem;
  color: var(--text-main);
  text-shadow: 0 2px 10px rgba(255,255,255,.45);
}

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

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

.icon-crypto {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22));
}

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

.transaksi-header {
  position: relative;
  height: 36px;
  min-width: 110px;
  padding: 0 16px 0 30px;
  border-radius: 10px;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, #05333a 0%, #007985 52%, #00d7e3 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,.28),
    0 8px 18px rgba(0, 63, 72, .25);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.transaksi-header:hover {
  transform: translateY(-2px);
  border-color: var(--text-gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 12px 22px rgba(0, 52, 60, .32),
    0 0 18px rgba(255,255,255,.42);
}

.transaksi-status {
  display: none;
}

/* ONLINE */
.transaksi-header.is-online::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #34ff7a;
  box-shadow:
    0 0 0 4px rgba(52,255,122,.16),
    0 0 10px rgba(52,255,122,.95);
  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, #3b4d52, #172b30);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.68);
  opacity: .45;
  align-items: center;
  justify-content: center;
  text-align: center;
}

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

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

.share-kode-link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #b9fbff);
  border: 2px solid rgba(255,255,255,.82);
  box-shadow:
    0 8px 0 rgba(0, 126, 136, .42),
    0 16px 30px rgba(0, 61, 70, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.share-kode-link-wrapper:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 0 rgba(0, 104, 114, .48),
    0 20px 38px rgba(0, 50, 58, .30);
}

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

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

@keyframes aquaShine {
  0% {
    background-position: -260px 0, 0 0;
  }
  100% {
    background-position: 260px 0, 120px 120px;
  }
}

@keyframes aquaFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-30px, 34px, 0) scale(1.08);
  }
}

@keyframes avatarPulse {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(0, 215, 227, .32),
      0 0 24px rgba(255,255,255,.78),
      var(--shadow-dark);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(255,255,255,.22),
      0 0 36px rgba(255,255,255,.96),
      var(--shadow-dark);
  }
}

@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: 9px 14px;
  }

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

  .transaksi-layout {
    flex-direction: column;
    align-items: center;
    padding: 14px;
  }

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

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

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

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

  .transaksi-item {
    width: 100%;
  }

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

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

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

@media only screen and (max-width: 480px) {
  .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: 9px 14px;
  }

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