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

/* 
  FINAL CSS - Dominan #0fb1d9
  Background utama #0fb1d9
  Efek baru: aqua glass, wave glow, floating bubble, neon edge, shine hover
  Warna teks dibuat beda tiap blok
*/

:root{
  --main:#0fb1d9;
  --main-dark:#047c9d;
  --main-deep:#035e78;
  --main-soft:#72e7ff;

  --text-1:#fff4a8;
  --text-2:#ffb7f3;
  --text-3:#b9ffcf;
  --text-4:#ffd0a6;
  --text-5:#c9c6ff;
  --text-6:#ffffff;

  --glass:rgba(255,255,255,.15);
  --glass-2:rgba(255,255,255,.23);
  --stroke:rgba(255,255,255,.34);
  --shadow:0 18px 50px rgba(0,63,82,.42);

  --radius-xl:26px;
  --radius-lg:18px;
  --radius-md:14px;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

.user-page-section-background{
  min-height:100vh;
  color:#ffffff!important;
  font-family:"Poppins","Noto Sans",sans-serif!important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.32) 0 7%, transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.24) 0 8%, transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(3,94,120,.55) 0 18%, transparent 46%),
    linear-gradient(135deg,#0fb1d9 0%,#12c9ef 38%,#047c9d 72%,#0fb1d9 100%);
  background-size:180% 180%;
  animation:aquaMove 14s ease infinite;
  position:relative;
  overflow:hidden;
}

.user-page-section-background::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.16) 47%, transparent 55%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:220px 220px, 38px 38px, 38px 38px;
  animation:lightSweep 9s linear infinite;
  opacity:.85;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
}

.user-page-section-background::after{
  content:"";
  position:fixed;
  width:390px;
  height:390px;
  right:-150px;
  top:20%;
  border-radius:999px;
  background:
    conic-gradient(from 120deg,#ffffff,#72e7ff,#0fb1d9,#047c9d,#ffffff);
  filter:blur(58px);
  opacity:.45;
  pointer-events:none;
  animation:aquaBlob 8s ease-in-out infinite;
}

.wrapper,
.wrapper *{
  font-family:"Poppins","Noto Sans",sans-serif!important;
}

.wrapper{
  color:#ffffff!important;
}

.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:50%!important;
  border:3px solid rgba(255,255,255,.92)!important;
  background:
    radial-gradient(circle at 30% 20%,#ffffff 0 8%,transparent 28%),
    linear-gradient(135deg,#72e7ff,#0fb1d9,#047c9d);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.13),
    0 18px 42px rgba(0,70,90,.45),
    0 0 38px rgba(114,231,255,.65);
  overflow:hidden;
  transform:translateZ(0);
  animation:avatarGlow 3.6s ease-in-out infinite;
}

.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component .common-user-icon-wrapper svg{
  fill:#ffffff!important;
  filter:drop-shadow(0 4px 10px rgba(0,55,75,.45));
}

/* SHARE BUTTON */
.wrapper .user-page-section-content .user-info .cover-image-container .preview-share-icon-wrapper,
.wrapper .user-page-section-content .user-info .preview-share-icon__component{
  border-radius:999px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.10))!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 12px 35px rgba(0,65,85,.32);
  display:flex;
  justify-content:center;
  align-items:center;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.wrapper .user-page-section-content .user-info .cover-image-container .preview-share-icon-wrapper:hover,
.wrapper .user-page-section-content .user-info .preview-share-icon__component:hover{
  transform:translateY(-4px) scale(1.06) rotate(4deg);
  box-shadow:0 18px 45px rgba(0,65,85,.44),0 0 28px rgba(255,255,255,.35);
}

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

/* USERNAME + DESCRIPTION */
.wrapper .user-page-section-content .user-info .username,
.wrapper .user-page-section-content .user-info .preview-user-description__component,
.wrapper .preview-links-list__component .preview-header-component,
.wrapper .preview-links-list__component .preview-text-block-component{
  text-align:center;
  border-radius:var(--radius-lg)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09))!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:var(--shadow);
  text-shadow:0 3px 14px rgba(0,52,70,.42);
}

.wrapper .user-page-section-content .user-info .username{
  color:#fff4a8!important;
  padding:11px 18px!important;
  font-size:22px!important;
  font-weight:900!important;
  letter-spacing:.4px;
}

.wrapper .user-page-section-content .user-info .preview-user-description__component{
  color:#e8fbff!important;
  padding:15px 17px!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.75!important;
}

.wrapper .preview-links-list__component .preview-header-component{
  color:#ffb7f3!important;
  padding:12px 18px!important;
  font-size:20px!important;
  font-weight:900!important;
}

.wrapper .preview-links-list__component .preview-text-block-component{
  color:#b9ffcf!important;
  padding:13px 18px!important;
  font-size:15px!important;
  font-weight:800!important;
}

/* UNIVERSAL CARD */
.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{
  --block-text:#ffffff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:var(--block-text)!important;
  border-radius:var(--radius-xl)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.10)) padding-box,
    linear-gradient(135deg,#ffffff,#72e7ff,#0fb1d9,#ffffff) border-box!important;
  border:1.6px solid transparent!important;
  box-shadow:
    0 18px 48px rgba(0,68,88,.38),
    inset 0 1px 0 rgba(255,255,255,.32);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  font-weight:800!important;
  font-size:14px!important;
  letter-spacing:.15px;
  text-shadow:0 2px 10px rgba(0,50,70,.38);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    filter .28s ease,
    background .28s ease;
}

/* WARNA TEXT BEDA TIAP BLOK */
.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-link-wrapper{
  --block-text:#fff4a8;
}

.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-link-wrapper{
  --block-text:#ffb7f3;
}

.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-link-wrapper{
  --block-text:#b9ffcf;
}

.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-link-wrapper{
  --block-text:#ffd0a6;
}

.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-link-wrapper{
  --block-text:#c9c6ff;
}

.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-link-wrapper{
  --block-text:#ffffff;
}

/* WARNA TEXT UNTUK BLOK LAIN */
.wrapper .preview-signup-generator__component{
  --block-text:#fff4a8;
}

.wrapper .preview-signup-generator-terms__component{
  --block-text:#ffb7f3;
}

.wrapper .preview-anonymous-messages__component{
  --block-text:#b9ffcf;
}

.wrapper .preview-commerce-link-item__component{
  --block-text:#ffd0a6;
}

.wrapper .preview-location-item__component{
  --block-text:#c9c6ff;
}

.wrapper .preview-menu-item__component{
  --block-text:#ffffff;
}

.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 *{
  color:inherit!important;
}

/* SHINE EFFECT */
.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:-2px;
  z-index:-1;
  background:
    linear-gradient(120deg,transparent 0%,rgba(255,255,255,.36) 45%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .75s ease;
}

/* NEON SIDE LINE */
.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;
  left:12px;
  top:18%;
  width:4px;
  height:64%;
  border-radius:999px;
  background:linear-gradient(to bottom,#ffffff,#72e7ff,#ffffff);
  box-shadow:0 0 18px rgba(255,255,255,.68);
  opacity:.78;
}

/* HOVER */
.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.018);
  box-shadow:
    0 25px 62px rgba(0,52,72,.52),
    0 0 36px rgba(114,231,255,.35),
    inset 0 1px 0 rgba(255,255,255,.42);
  filter:saturate(1.16) brightness(1.04);
}

.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(130%);
}

/* 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:18px!important;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    0 10px 25px rgba(0,55,75,.34),
    0 0 16px rgba(255,255,255,.15);
}

/* 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:currentColor!important;
  color:inherit!important;
  filter:drop-shadow(0 3px 8px rgba(0,49,68,.42));
}

/* 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{
  color:#eaffff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-top:none!important;
  border-radius:0 0 var(--radius-xl) var(--radius-xl)!important;
  background:
    linear-gradient(135deg,rgba(3,94,120,.62),rgba(15,177,217,.34))!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 42px rgba(0,54,74,.36);
}

/* SOCIAL */
.wrapper .preview-social-links__component .social-link-item__component{
  color:#ffffff!important;
  fill:#ffffff!important;
  border-radius:999px;
  transition:transform .25s ease, filter .25s ease;
}

.wrapper .preview-social-links__component .social-link-item__component:nth-child(6n+1){
  color:#fff4a8!important;
  fill:#fff4a8!important;
}

.wrapper .preview-social-links__component .social-link-item__component:nth-child(6n+2){
  color:#ffb7f3!important;
  fill:#ffb7f3!important;
}

.wrapper .preview-social-links__component .social-link-item__component:nth-child(6n+3){
  color:#b9ffcf!important;
  fill:#b9ffcf!important;
}

.wrapper .preview-social-links__component .social-link-item__component:nth-child(6n+4){
  color:#ffd0a6!important;
  fill:#ffd0a6!important;
}

.wrapper .preview-social-links__component .social-link-item__component:hover{
  transform:translateY(-5px) rotate(-5deg) scale(1.1);
  filter:drop-shadow(0 12px 20px rgba(0,50,70,.48));
}

/* FOOTER */
.wrapper .footer-link,
.wrapper .cookies-wrapper #ot-sdk-btn.ot-sdk-show-settings,
.wrapper .report-abuse-button__component,
.wrapper .preview-heylinkme-logo__component,
.wrapper .report-abuse-button__component .heylinkme-logo,
.wrapper .preview-heylinkme-logo__component .heylinkme-logo{
  color:#ffffff!important;
  font-weight:900!important;
  text-shadow:0 3px 12px rgba(0,50,70,.45);
}

.wrapper .report-abuse-button__component,
.wrapper .preview-heylinkme-logo__component{
  height:auto!important;
}

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

/* POLISH */
a,
button,
[role="button"],
.preview-link-wrapper,
.preview-lock-link-wrapper{
  -webkit-tap-highlight-color:transparent;
}

a{
  text-decoration:none!important;
}

/* ANIMATION */
@keyframes aquaMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes lightSweep{
  0%{background-position:-220px -220px,0 0,0 0}
  100%{background-position:220px 220px,38px 38px,38px 38px}
}

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

@keyframes avatarGlow{
  0%,100%{
    box-shadow:
      0 0 0 8px rgba(255,255,255,.13),
      0 18px 42px rgba(0,70,90,.45),
      0 0 38px rgba(114,231,255,.65);
  }
  50%{
    box-shadow:
      0 0 0 13px rgba(255,255,255,.09),
      0 24px 58px rgba(0,70,90,.56),
      0 0 54px rgba(255,255,255,.62);
  }
}

/* RESPONSIVE */
@media (max-width:768px){
  :root{
    --radius-xl:22px;
  }

  .wrapper .user-page-section-content .user-info .username{
    font-size:20px!important;
  }

  .wrapper .preview-links-list__component .preview-header-component{
    font-size:18px!important;
  }

  .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{
    font-size:13px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
  }
}