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

:root {
  /* PALET BARU: AQUA NOIR NEON - beda total dari ruby/sunset lama */
  --primary: #00e5ff;
  --primary-soft: #9ff7ff;
  --primary-dark: #003b46;
  --primary-deep: #020617;

  --secondary: #00ff9d;
  --secondary-soft: #b8ffd9;

  --accent-gold: #f8ff7a;
  --accent-orange: #ffb86b;
  --accent-pink: #ff8df3;
  --accent-blue: #7dd3fc;
  --accent-lime: #c8ff4d;
  --accent-green: #73ffc2;
  --accent-purple: #b69cff;
  --accent-white: #f7feff;
  --accent-red: #ff6b8a;
  --accent-coffee: #c2d5ff;

  --bg-a: #020617;
  --bg-b: #07152f;
  --bg-c: #002b36;
  --bg-d: #063b46;
  --bg-e: #07111f;

  --glass-a: rgba(0, 229, 255, 0.14);
  --glass-b: rgba(0, 255, 157, 0.16);
  --dark-glass: rgba(2, 6, 23, 0.78);

  --shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.72);
  --shadow-soft: 0 18px 48px rgba(0, 229, 255, 0.24);

  --radius-big: 30px;
  --radius-card: 22px;
  --radius-small: 14px;
}

/* ===== ANIMASI BARU ===== */
@keyframes auroraMove {
  0% {
    background-position: 0% 50%, 100% 50%, 50% 100%, center;
  }
  50% {
    background-position: 100% 50%, 0% 40%, 50% 0%, center;
  }
  100% {
    background-position: 0% 50%, 100% 50%, 50% 100%, center;
  }
}

@keyframes neonFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-9px) scale(1.018);
  }
}

@keyframes logoOrbit {
  0%, 100% {
    transform: rotate(-2deg) translateY(0) scale(1.04);
  }
  50% {
    transform: rotate(2deg) translateY(-8px) scale(1.09);
  }
}

@keyframes borderCharge {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.36),
      0 0 30px rgba(0, 255, 157, 0.18),
      var(--shadow-soft);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(0, 229, 255, 0.12),
      0 0 48px rgba(0, 255, 157, 0.35),
      var(--shadow-strong);
  }
}

@keyframes laserSweep {
  0% {
    transform: translateX(-145%) skewX(-22deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(145%) skewX(-22deg);
    opacity: 0;
  }
}

@keyframes slowPulse {
  0%, 100% {
    transform: scale(1);
    filter: saturate(1);
  }
  50% {
    transform: scale(1.018);
    filter: saturate(1.18);
  }
}

@keyframes dotRise {
  0%, 100% {
    opacity: 0.32;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-12px);
  }
}

/* BACKGROUND UTAMA BARU */
.user-page-section-background {
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 229, 255, 0.38), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(0, 255, 157, 0.28), transparent 34%),
    radial-gradient(circle at 50% 105%, rgba(182, 156, 255, 0.26), transparent 38%),
    linear-gradient(145deg, var(--bg-a) 0%, var(--bg-b) 38%, var(--bg-c) 70%, var(--bg-d) 100%) !important;
  background-size: 180% 180%, 190% 190%, 170% 170%, cover !important;
  background-position: center !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  animation: auroraMove 19s ease-in-out infinite;
}

.user-page-section-background::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 32px),
    linear-gradient(30deg, rgba(0, 229, 255, 0.06) 0 1px, transparent 1px 26px),
    radial-gradient(circle at 20% 24%, rgba(0, 255, 157, 0.18) 0 2px, transparent 2px 20px),
    radial-gradient(circle at 80% 76%, rgba(182, 156, 255, 0.14) 0 2px, transparent 2px 24px);
  background-size: 54px 54px, 42px 42px, 38px 38px, 46px 46px;
  opacity: 0.68;
  mix-blend-mode: screen;
  animation: dotRise 8s ease-in-out infinite;
}

.user-page-section-background::after {
  content: "";
  position: fixed;
  inset: -22%;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 18%, rgba(0, 229, 255, 0.14), transparent 48%),
    radial-gradient(circle, transparent 54%, rgba(0, 0, 0, 0.52) 100%);
  transform: rotate(8deg);
  opacity: 0.75;
}

/* WRAPPER GLOBAL */
.wrapper {
  font-family: "Urbanist", sans-serif !important;
  color: var(--accent-white);
}

.wrapper .user-page-section-content {
  width: min(100%, 690px);
  margin: 0 auto;
  padding: 36px 16px 58px;
  position: relative;
  z-index: 2;
}

/* PROFILE CARD - STRUKTUR BARU */
.wrapper .user-page-section-content .user-info {
  display: grid;
  grid-template-columns: 142px 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: 42px 16px 42px 16px;
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.16), rgba(255, 255, 255, 0.035)),
    linear-gradient(160deg, rgba(2, 6, 23, 0.88), rgba(0, 43, 54, 0.68));
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-left: 7px solid rgba(0, 229, 255, 0.72);
  border-right: 7px solid rgba(0, 255, 157, 0.55);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.wrapper .user-page-section-content .user-info::before {
  content: "";
  position: absolute;
  top: -92px;
  left: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.28), transparent 70%);
  pointer-events: none;
}

.wrapper .user-page-section-content .user-info::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -76px;
  width: 185px;
  height: 185px;
  border-radius: 44%;
  background: radial-gradient(circle, rgba(0, 255, 157, 0.22), transparent 72%);
  pointer-events: none;
}

/* LOGO / PROFILE */
.wrapper .user-page-section-content .user-info .logo-container {
  grid-row: span 2;
  transform: translateY(0) scale(1.04);
  filter:
    drop-shadow(0 24px 34px rgba(0, 229, 255, 0.30))
    drop-shadow(0 0 24px rgba(0, 255, 157, 0.20));
  animation: logoOrbit 5.4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component {
  border-radius: 34px 14px 34px 14px !important;
  background:
    linear-gradient(145deg, rgba(247, 254, 255, 0.98), rgba(159, 247, 255, 0.58)),
    linear-gradient(145deg, var(--primary), var(--secondary));
  border: 5px solid rgba(247, 254, 255, 0.80);
  box-shadow:
    0 0 0 8px rgba(0, 229, 255, 0.16),
    0 0 0 14px rgba(0, 255, 157, 0.12),
    0 24px 58px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component .common-user-icon-wrapper svg {
  fill: var(--primary-dark) !important;
}

/* COVER SHARE ICON */
.wrapper .user-page-section-content .user-info .cover-image-container .preview-share-icon-wrapper {
  border-radius: 20px 8px 20px 8px !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: stretch;
  text-align: center;
  align-items: center;
  background:
    linear-gradient(145deg, var(--primary), var(--secondary) 58%, var(--accent-purple)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(247, 254, 255, 0.56);
}

.wrapper .user-page-section-content .user-info .cover-image-container .preview-share-icon-wrapper svg {
  fill: #020617 !important;
}

/* USERNAME */
.wrapper .user-page-section-content .user-info .username {
  width: 100%;
  text-align: left;
  padding: 17px 23px !important;
  color: var(--accent-lime) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  letter-spacing: 0.72px;
  font-family: "Urbanist", sans-serif !important;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(255, 255, 255, 0.04)),
    linear-gradient(100deg, #020617, #003b46 56%, #006b70) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 255, 77, 0.46);
  border-top: 7px solid rgba(0, 229, 255, 0.72);
  border-bottom: 7px solid rgba(0, 255, 157, 0.52);
  border-radius: 10px var(--radius-big) 10px var(--radius-big) !important;
  box-shadow: var(--shadow-soft);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.64);
  animation: borderCharge 5s ease-in-out infinite;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.wrapper .user-page-section-content .user-info .username::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.22) 48%, transparent 72%);
  transform: translateX(-145%) skewX(-22deg);
  animation: laserSweep 5.8s ease-in-out infinite;
  pointer-events: none;
}

/* DESCRIPTION */
.wrapper .user-page-section-content .user-info .preview-user-description__component {
  width: 100%;
  padding: 17px 21px !important;
  color: var(--accent-blue) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  font-family: "Urbanist", sans-serif !important;
  line-height: 24px !important;
  text-align: left;
  background:
    linear-gradient(145deg, rgba(2, 6, 23, 0.86), rgba(0, 59, 70, 0.42)),
    rgba(0, 229, 255, 0.06) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(125, 211, 252, 0.44);
  border-left: 6px solid rgba(125, 211, 252, 0.78);
  border-right: 6px solid rgba(255, 141, 243, 0.34);
  border-radius: var(--radius-big) 12px var(--radius-big) 12px !important;
  box-shadow: 0 19px 44px rgba(0, 0, 0, 0.50);
  position: relative;
  z-index: 2;
}

/* SHARE ICON USER */
.wrapper .user-page-section-content .user-info .preview-share-icon__component {
  border-radius: 18px 8px 18px 8px !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: stretch;
  text-align: center;
  align-items: center;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 255, 157, 0.46);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.wrapper .user-page-section-content .user-info .preview-share-icon__component svg {
  fill: var(--accent-green) !important;
}

/* BLOK SIGNUP / TERMS / ANONYMOUS */
.wrapper .preview-signup-generator__component,
.wrapper .preview-signup-generator-terms__component,
.wrapper .preview-anonymous-messages__component {
  border-radius: var(--radius-card) 9px var(--radius-card) 9px !important;
  color: var(--accent-pink) !important;
  font-family: "Urbanist", sans-serif !important;
  background:
    linear-gradient(135deg, rgba(255, 141, 243, 0.22), rgba(0, 229, 255, 0.10)),
    linear-gradient(145deg, rgba(2, 6, 23, 0.90), rgba(7, 21, 47, 0.68)) !important;
  border: 1px solid rgba(255, 141, 243, 0.48);
  border-top: 7px solid var(--accent-pink);
  border-right: 7px solid rgba(0, 229, 255, 0.38);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.54);
  overflow: hidden;
  position: relative;
}

.wrapper .preview-signup-generator__component::before,
.wrapper .preview-signup-generator-terms__component::before,
.wrapper .preview-anonymous-messages__component::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: translateX(-145%) skewX(-22deg);
  animation: laserSweep 6.4s ease-in-out infinite;
  pointer-events: none;
}

.wrapper .preview-signup-generator__component .thumbnail,
.wrapper .preview-signup-generator-terms__component .thumbnail,
.wrapper .preview-anonymous-messages__component .thumbnail {
  border-radius: var(--radius-small) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42);
}

/* COMMERCE & LOCATION */
.wrapper .preview-commerce-link-item__component,
.wrapper .preview-location-item__component {
  border-radius: 9px var(--radius-card) 9px var(--radius-card) !important;
  color: var(--accent-green) !important;
  font-family: "Urbanist", sans-serif !important;
  background:
    linear-gradient(135deg, rgba(115, 255, 194, 0.18), rgba(255, 255, 255, 0.045)),
    linear-gradient(145deg, rgba(2, 6, 23, 0.90), rgba(0, 43, 54, 0.64)) !important;
  border: 1px solid rgba(115, 255, 194, 0.42);
  border-left: 8px solid var(--accent-green);
  border-bottom: 5px solid rgba(0, 229, 255, 0.28);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.50);
  overflow: hidden;
  transition: transform 0.26s ease, filter 0.26s ease, box-shadow 0.26s ease;
}

.wrapper .preview-commerce-link-item__component:hover,
.wrapper .preview-location-item__component:hover {
  transform: translateY(-5px) rotate(-0.55deg);
  filter: brightness(1.12) saturate(1.16);
  box-shadow: 0 28px 58px rgba(0, 229, 255, 0.20);
}

.wrapper .preview-commerce-link-item__component .thumbnail,
.wrapper .preview-location-item__component .thumbnail {
  border-radius: var(--radius-small) !important;
}

.wrapper .preview-commerce-link-item__component .up-down-icon svg,
.wrapper .preview-location-item__component .up-down-icon svg {
  fill: var(--accent-green) !important;
}

/* MENU ITEM */
.wrapper .preview-menu-item__component {
  border-radius: var(--radius-card) var(--radius-card) 10px 10px !important;
  color: var(--accent-orange) !important;
  font-family: "Urbanist", sans-serif !important;
  background:
    linear-gradient(135deg, rgba(255, 184, 107, 0.20), rgba(0, 229, 255, 0.07)),
    linear-gradient(145deg, rgba(2, 6, 23, 0.90), rgba(6, 59, 70, 0.58)) !important;
  border: 1px solid rgba(255, 184, 107, 0.46);
  border-top: 6px solid var(--accent-orange);
  border-bottom: 7px solid rgba(0, 255, 157, 0.32);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.wrapper .preview-menu-item__component:hover {
  transform: translateY(-6px) scale(1.015);
  filter: brightness(1.12);
  box-shadow: 0 28px 58px rgba(0, 255, 157, 0.20);
}

.wrapper .preview-menu-item__component .thumbnail {
  border-radius: var(--radius-small) !important;
}

.wrapper .preview-menu-item__component .up-down-icon svg {
  fill: var(--accent-orange) !important;
}

/* HEADER & TEXT BLOCK */
.wrapper .preview-links-list__component .preview-header-component,
.wrapper .preview-links-list__component .preview-text-block-component {
  text-align: center;
  padding: 18px 22px !important;
  color: var(--accent-purple) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  font-family: "Urbanist", sans-serif !important;
  letter-spacing: 0.55px;
  background:
    linear-gradient(90deg, rgba(182, 156, 255, 0.18), rgba(0, 229, 255, 0.065)),
    linear-gradient(135deg, #020617, #07152f 54%, #003b46) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(182, 156, 255, 0.48);
  border-left: 8px solid var(--accent-purple);
  border-right: 8px solid rgba(0, 229, 255, 0.34);
  border-radius: 12px var(--radius-big) 12px var(--radius-big) !important;
  box-shadow: 0 21px 46px rgba(0, 0, 0, 0.54);
  position: relative;
  overflow: hidden;
}

.wrapper .preview-links-list__component .preview-header-component::after,
.wrapper .preview-links-list__component .preview-text-block-component::after {
  content: "";
  position: absolute;
  inset: auto 24px 9px 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.76), transparent);
}

/* LINK ITEM */
.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 {
  border-radius: 8px 24px 8px 24px !important;
  color: var(--accent-white) !important;
  font-family: "Urbanist", sans-serif !important;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(255, 255, 255, 0.055)),
    linear-gradient(145deg, #003b46, #07152f 48%, #020617) !important;
  border: 1px solid rgba(247, 254, 255, 0.26);
  border-right: 8px solid rgba(0, 255, 157, 0.66);
  border-bottom: 4px solid rgba(0, 229, 255, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px rgba(0, 0, 0, 0.52);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.25s ease;
  overflow: hidden;
  position: relative;
}

.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(100deg, transparent 0%, rgba(255, 255, 255, 0.25) 48%, transparent 72%);
  transform: translateX(-145%) skewX(-22deg);
  transition: transform 0.48s ease;
  pointer-events: none;
}

.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;
  width: 86px;
  height: 86px;
  left: -36px;
  bottom: -36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.26), transparent 70%);
  pointer-events: none;
}

.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(-7px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 28px 56px rgba(0, 0, 0, 0.70),
    0 0 32px rgba(0, 229, 255, 0.20);
  background:
    linear-gradient(135deg, rgba(0, 255, 157, 0.20), rgba(255, 255, 255, 0.08)),
    linear-gradient(145deg, #006b70, #003b46 50%, #020617) !important;
  filter: saturate(1.18) brightness(1.08);
}

.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(145%) skewX(-22deg);
}

/* WARNA TEXT BEDA TIAP BLOK LINK */
.wrapper .preview-links-list__component .preview-link-item__component:nth-child(6n+1) .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component:nth-child(6n+1) .preview-lock-link-wrapper {
  color: var(--accent-gold) !important;
}

.wrapper .preview-links-list__component .preview-link-item__component:nth-child(6n+2) .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component:nth-child(6n+2) .preview-lock-link-wrapper {
  color: var(--accent-pink) !important;
}

.wrapper .preview-links-list__component .preview-link-item__component:nth-child(6n+3) .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component:nth-child(6n+3) .preview-lock-link-wrapper {
  color: var(--accent-blue) !important;
}

.wrapper .preview-links-list__component .preview-link-item__component:nth-child(6n+4) .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component:nth-child(6n+4) .preview-lock-link-wrapper {
  color: var(--accent-lime) !important;
}

.wrapper .preview-links-list__component .preview-link-item__component:nth-child(6n+5) .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component:nth-child(6n+5) .preview-lock-link-wrapper {
  color: var(--accent-green) !important;
}

.wrapper .preview-links-list__component .preview-link-item__component:nth-child(6n+6) .preview-link-wrapper,
.wrapper .preview-links-list__component .preview-lock-link-item__component:nth-child(6n+6) .preview-lock-link-wrapper {
  color: var(--accent-orange) !important;
}

.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-small) !important;
  box-shadow: 0 11px 26px rgba(0, 0, 0, 0.46);
  border: 1px solid rgba(0, 255, 157, 0.28);
}

.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 {
  fill: var(--accent-green) !important;
}

.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 {
  fill: var(--accent-green) !important;
}

.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(--accent-green) !important;
}

/* 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-radius: 0 0 var(--radius-card) var(--radius-card) !important;
  border-top: none !important;
  background:
    linear-gradient(145deg, rgba(2, 6, 23, 0.92), rgba(0, 59, 70, 0.64)) !important;
  color: var(--accent-purple) !important;
  border: 1px solid rgba(182, 156, 255, 0.38);
  border-bottom: 5px solid rgba(0, 255, 157, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* GALLERY / SLIDER */
.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: 12px var(--radius-big) 12px var(--radius-big) !important;
  color: var(--accent-blue) !important;
  font-family: "Urbanist", sans-serif !important;
  background:
    linear-gradient(145deg, rgba(125, 211, 252, 0.18), rgba(182, 156, 255, 0.16)),
    linear-gradient(160deg, rgba(2, 6, 23, 0.86), rgba(0, 43, 54, 0.60)) !important;
  border: 1px solid rgba(125, 211, 252, 0.43);
  border-left: 8px solid var(--accent-blue);
  border-bottom: 6px solid rgba(0, 255, 157, 0.30);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.56);
  overflow: hidden;
  animation: slowPulse 6.4s ease-in-out infinite;
}

/* SOCIAL LINK */
.wrapper .preview-social-links__component {
  display: flex;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  padding-top: 9px;
}

.wrapper .preview-social-links__component .social-link-item__component {
  color: var(--accent-gold) !important;
  fill: var(--accent-gold) !important;
  background:
    linear-gradient(145deg, rgba(0, 229, 255, 0.18), rgba(255, 255, 255, 0.06)),
    linear-gradient(145deg, #003b46, #020617);
  border: 1px solid rgba(248, 255, 122, 0.46);
  border-radius: 20px 8px 20px 8px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.44);
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.wrapper .preview-social-links__component .social-link-item__component:hover {
  transform: translateY(-6px) rotate(4deg) scale(1.05);
  box-shadow: 0 22px 42px rgba(0, 229, 255, 0.30);
  filter: brightness(1.13);
}

/* FOOTER */
.wrapper .footer-link {
  color: var(--accent-green) !important;
  font-weight: 900;
  text-decoration: none !important;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.50);
}

.wrapper .cookies-wrapper #ot-sdk-btn.ot-sdk-show-settings {
  color: var(--accent-pink) !important;
  font-weight: 900;
}

/* REPORT & HEYLINK LOGO */
.wrapper .report-abuse-button__component,
.wrapper .preview-heylinkme-logo__component {
  color: var(--accent-orange) !important;
  font-weight: 900 !important;
  height: auto !important;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.62);
}

.wrapper .report-abuse-button__component .heylinkme-logo,
.wrapper .preview-heylinkme-logo__component .heylinkme-logo {
  color: var(--accent-orange) !important;
}

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

/* SHARE LINK TAMBAHAN */
a.share-link {
  display: block;
  width: fit-content;
  margin: 24px auto;
  text-decoration: none;
}

.share-kode-link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  padding: 14px 24px;
  border-radius: 8px 24px 8px 24px;
  background:
    linear-gradient(135deg, rgba(0, 255, 157, 0.22), rgba(255, 255, 255, 0.08)),
    linear-gradient(145deg, #003b46, #020617);
  border: 1px solid rgba(0, 255, 157, 0.52);
  border-right: 8px solid var(--accent-green);
  border-bottom: 4px solid rgba(0, 229, 255, 0.44);
  box-shadow: 0 17px 38px rgba(0, 0, 0, 0.52);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.share-kode-link-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-145%) skewX(-22deg);
  transition: transform 0.45s ease;
}

.share-kode-link-wrapper:hover {
  transform: translateY(-6px) scale(1.022);
  filter: brightness(1.12);
  box-shadow: 0 25px 54px rgba(0, 229, 255, 0.22);
}

.share-kode-link-wrapper:hover::before {
  transform: translateX(145%) skewX(-22deg);
}

.title-link {
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 24px;
  color: var(--accent-gold) !important;
  letter-spacing: 0.35px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.48);
}

/* RESPONSIVE */
@media (max-width: 580px) {
  .wrapper .user-page-section-content .user-info {
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
  }

  .wrapper .user-page-section-content .user-info .logo-container {
    grid-row: auto;
  }

  .wrapper .user-page-section-content .user-info .username,
  .wrapper .user-page-section-content .user-info .preview-user-description__component {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .wrapper .user-page-section-content {
    padding: 28px 13px 40px;
  }

  .wrapper .user-page-section-content .user-info {
    gap: 15px;
    padding: 17px 11px 12px;
    border-radius: 32px 12px 32px 12px;
  }

  .wrapper .user-page-section-content .user-info .username {
    font-size: 19px !important;
    padding: 14px 16px !important;
  }

  .wrapper .user-page-section-content .user-info .preview-user-description__component {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .wrapper .preview-links-list__component .preview-header-component,
  .wrapper .preview-links-list__component .preview-text-block-component {
    font-size: 17px !important;
    padding: 14px 16px !important;
  }
}