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

/* =========================================================
   FINAL 1 CSS - THEME #ab37ad
   Dominan ungu magenta, background #ab37ad,
   efek glass, glow, gradient, hover, dan teks beda tiap blok.
   ========================================================= */

:root{
    --main:#ab37ad;
    --main-dark:#64166b;
    --main-soft:#d76add;
    --main-light:#ffd6ff;
    --white:#ffffff;
    --ink:#fff7ff;
    --gold:#ffe27a;
    --cyan:#7ffcff;
    --mint:#b8ffd9;
    --rose:#ff9fdc;
    --orange:#ffd0a2;
    --violet:#e7c3ff;
    --card:rgba(255,255,255,.16);
    --card-strong:rgba(255,255,255,.24);
    --stroke:rgba(255,255,255,.38);
    --shadow:0 22px 60px rgba(63,0,77,.34);
}

*{
    box-sizing:border-box;
}

body,
.user-page-section-background{
    background-color:var(--main)!important;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.38) 0, rgba(255,255,255,0) 28%),
        radial-gradient(circle at 88% 14%, rgba(255,226,122,.24) 0, rgba(255,226,122,0) 26%),
        radial-gradient(circle at 50% 100%, rgba(127,252,255,.24) 0, rgba(127,252,255,0) 34%),
        linear-gradient(135deg, #ab37ad 0%, #8b248f 44%, #c54bc9 100%)!important;
    background-size:180% 180%, 160% 160%, 150% 150%, 100% 100%!important;
    background-position:center top!important;
    font-family:"Poppins","Montserrat",sans-serif!important;
    color:var(--ink)!important;
    min-height:100vh;
    animation:auroraMove 12s ease-in-out infinite alternate;
    overflow-x:hidden;
}

body::before,
.user-page-section-background::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.12), transparent 32%, rgba(255,255,255,.1) 58%, transparent),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.15), transparent 22%),
        radial-gradient(circle at 80% 70%, rgba(255,226,122,.14), transparent 24%);
    mix-blend-mode:screen;
    opacity:.75;
}

@keyframes auroraMove{
    0%{background-position:0% 30%, 100% 10%, 50% 100%, center;}
    100%{background-position:100% 0%, 20% 60%, 70% 80%, center;}
}

@keyframes floatGlow{
    0%,100%{transform:translateY(0);filter:drop-shadow(0 12px 22px rgba(255,255,255,.12));}
    50%{transform:translateY(-7px);filter:drop-shadow(0 20px 32px rgba(255,226,122,.24));}
}

@keyframes shineSweep{
    0%{transform:translateX(-120%) rotate(16deg);}
    100%{transform:translateX(145%) rotate(16deg);}
}

@keyframes softPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.18), var(--shadow);}
    50%{box-shadow:0 0 0 9px rgba(255,255,255,.05), 0 26px 70px rgba(67,0,82,.42);}
}

/* Bungkus utama */
.wrapper{
    position:relative;
    z-index:1;
}

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

/* Logo */
.wrapper .user-page-section-content .user-info .logo-container .common-user-icon__component{
    border-radius:28px!important;
    overflow:hidden!important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,214,255,.75)),
        radial-gradient(circle at top, rgba(255,226,122,.45), transparent 55%)!important;
    border:3px solid rgba(255,255,255,.72)!important;
    box-shadow:
        0 18px 45px rgba(70,0,84,.42),
        0 0 0 8px rgba(255,255,255,.12),
        inset 0 0 26px rgba(171,55,173,.22)!important;
    animation:floatGlow 5.5s ease-in-out infinite;
}

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

/* Tombol share atas */
.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;
    display:flex!important;
    justify-content:center!important;
    flex-direction:column!important;
    align-content:stretch!important;
    text-align:center!important;
    align-items:center!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:0 12px 28px rgba(76,0,89,.28)!important;
    backdrop-filter:blur(12px);
    transition:transform .28s ease, box-shadow .28s ease, background .28s 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(-3px) scale(1.06);
    background:var(--gold)!important;
    box-shadow:0 18px 40px rgba(255,226,122,.3)!important;
}

.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:#7b197f!important;
}

/* Nama user - warna blok 1 */
.wrapper .user-page-section-content .user-info .username{
    text-align:center!important;
    padding:10px 14px!important;
    color:#fff2ff!important;
    font-size:22px!important;
    font-weight:900!important;
    font-family:"Montserrat","Poppins",sans-serif!important;
    letter-spacing:.7px!important;
    text-shadow:
        0 2px 0 rgba(77,0,88,.38),
        0 0 22px rgba(255,255,255,.35)!important;
}

/* Deskripsi user - warna blok 2 */
.wrapper .user-page-section-content .user-info .preview-user-description__component{
    margin:8px auto 14px!important;
    padding:14px 16px!important;
    color:#ffe98f!important;
    font-size:16px!important;
    font-weight:600!important;
    font-family:"Poppins","Montserrat",sans-serif!important;
    line-height:1.65!important;
    text-align:center!important;
    border-radius:22px!important;
    background:rgba(74,0,88,.22)!important;
    border:1px solid rgba(255,255,255,.24)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
    backdrop-filter:blur(10px);
}

/* Card umum */
.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!important;
    overflow:hidden!important;
    border-radius:20px!important;
    font-family:"Poppins","Montserrat",sans-serif!important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
        linear-gradient(135deg, rgba(171,55,173,.84), rgba(97,20,104,.82))!important;
    border:1px solid var(--stroke)!important;
    box-shadow:var(--shadow)!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        filter .28s ease!important;
}

.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;
    top:-35%;
    left:0;
    width:42%;
    height:170%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transform:translateX(-120%) rotate(16deg);
    pointer-events:none;
}

.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)!important;
    border-color:rgba(255,226,122,.72)!important;
    box-shadow:
        0 28px 72px rgba(54,0,68,.46),
        0 0 0 1px rgba(255,226,122,.28),
        inset 0 1px 0 rgba(255,255,255,.3)!important;
    filter:saturate(1.1);
}

.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{
    animation:shineSweep .85s ease forwards;
}

/* 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:16px!important;
    border:1px solid rgba(255,255,255,.38)!important;
    box-shadow:0 10px 24px rgba(62,0,72,.28)!important;
}

/* Signup / pesan anonim - warna blok 3 */
.wrapper .preview-signup-generator__component,
.wrapper .preview-signup-generator-terms__component,
.wrapper .preview-anonymous-messages__component{
    color:#fff3b0!important;
}

/* Commerce & lokasi - warna blok 4 */
.wrapper .preview-commerce-link-item__component,
.wrapper .preview-location-item__component{
    color:#b8ffd9!important;
}

.wrapper .preview-commerce-link-item__component .up-down-icon svg,
.wrapper .preview-location-item__component .up-down-icon svg{
    fill:#b8ffd9!important;
}

/* Menu - warna blok 5 */
.wrapper .preview-menu-item__component{
    color:#7ffcff!important;
}

.wrapper .preview-menu-item__component .up-down-icon svg{
    fill:#7ffcff!important;
}

/* Header & text block - warna blok 6 */
.wrapper .preview-links-list__component .preview-header-component,
.wrapper .preview-links-list__component .preview-text-block-component{
    text-align:center!important;
    padding:10px 14px!important;
    margin:10px 0!important;
    color:#fff7ff!important;
    font-size:21px!important;
    font-weight:900!important;
    font-family:"Montserrat","Poppins",sans-serif!important;
    letter-spacing:.5px!important;
    text-shadow:
        0 3px 0 rgba(75,0,86,.35),
        0 0 18px rgba(255,255,255,.3)!important;
}

/* Link utama - warna blok 7 */
.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:#ffffff!important;
    font-weight:700!important;
}

/* Warna teks beda tiap item */
.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{
    color:#fff3b0!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-link-wrapper{
    color:#b8ffd9!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-link-wrapper{
    color:#7ffcff!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-link-wrapper{
    color:#ffb7e9!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-link-wrapper{
    color:#ffd0a2!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-link-wrapper{
    color:#e7c3ff!important;
}

/* Icon di dalam link */
.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:#ffffff!important;
    color:#ffffff!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 20px 20px!important;
    border-top:none!important;
    background:rgba(255,255,255,.11)!important;
    color:#fff3b0!important;
    border-left:1px solid rgba(255,255,255,.25)!important;
    border-right:1px solid rgba(255,255,255,.25)!important;
    border-bottom:1px solid rgba(255,255,255,.25)!important;
}

/* Gallery - warna blok 8 */
.wrapper .preview-image-sliders-list__component .youtube-gallery,
.wrapper .preview-image-sliders-list__component .slider-grid,
.wrapper .preview-image-sliders-list__component .instagram-gallery{
    color:#ffd0a2!important;
    animation:softPulse 6s ease-in-out infinite;
}

/* Social - warna blok 9 */
.wrapper .preview-social-links__component .social-link-item__component{
    color:#fff7ff!important;
    fill:#fff7ff!important;
    background:rgba(255,255,255,.14)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:999px!important;
    box-shadow:0 12px 26px rgba(61,0,72,.24)!important;
    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.08);
    color:#ffe27a!important;
    fill:#ffe27a!important;
    background:rgba(255,255,255,.24)!important;
    box-shadow:0 20px 42px rgba(61,0,72,.34)!important;
}

/* Footer - warna blok 10 */
.wrapper .footer-link,
.wrapper .cookies-wrapper #ot-sdk-btn.ot-sdk-show-settings,
.wrapper .report-abuse-button__component,
.wrapper .preview-heylinkme-logo__component{
    color:#fff3b0!important;
    font-weight:800!important;
    text-shadow:0 0 14px rgba(255,255,255,.2)!important;
}

.wrapper .report-abuse-button__component .heylinkme-logo,
.wrapper .preview-heylinkme-logo__component .heylinkme-logo{
    color:#fff3b0!important;
}

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

/* Link umum agar tetap rapi */
.wrapper a{
    text-decoration:none!important;
}

.wrapper a:hover{
    text-decoration:none!important;
}

/* Efek fokus aksesibilitas */
.wrapper a:focus,
.wrapper button:focus,
.wrapper [role="button"]:focus{
    outline:2px solid rgba(255,226,122,.95)!important;
    outline-offset:3px!important;
}

/* Mobile polish */
@media (max-width:768px){
    .wrapper .user-page-section-content{
        padding-left:12px!important;
        padding-right:12px!important;
    }

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

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

    .wrapper .preview-links-list__component .preview-header-component,
    .wrapper .preview-links-list__component .preview-text-block-component{
        font-size:18px!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{
        border-radius:18px!important;
    }
}

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