:root {
    --theme-color: #6c5ce7;
    --background-color: #111827;
    --text-color: #ffffff;
}

* {
    box-sizing: border-box;
}

body.public-body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: var(--text-color);
    background:
        radial-gradient(circle at top, rgba(108, 92, 231, 0.28), transparent 35%),
        linear-gradient(135deg, var(--background-color), #090c16 78%);
}

body.public-body.theme-preset-minimal-light {
    background:
        radial-gradient(circle at top, rgba(139, 157, 183, 0.14), transparent 34%),
        linear-gradient(180deg, #fbfbfd, var(--background-color) 82%);
}

body.public-body.theme-preset-creator-neon {
    background:
        radial-gradient(circle at top, rgba(139, 92, 246, 0.34), transparent 32%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.18), transparent 28%),
        linear-gradient(135deg, var(--background-color), #070b16 82%);
}

a {
    color: inherit;
    text-decoration: none;
}

.public-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 16px;
    overflow: hidden;
}

.background-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1), transparent 78%);
    opacity: 0.32;
    pointer-events: none;
}

.background-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(140px);
    opacity: 0.26;
    pointer-events: none;
}

.background-glow-main {
    width: 320px;
    height: 320px;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    background: var(--theme-color);
    animation: floatGlow 11s ease-in-out infinite;
}

.background-glow-side {
    width: 240px;
    height: 240px;
    top: 12%;
    right: 10%;
    background: rgba(255, 209, 102, 0.65);
    animation: floatGlowAlt 13s ease-in-out infinite;
}

.theme-preset-minimal-light .background-grid {
    opacity: 0.18;
}

.theme-preset-minimal-light .background-glow-side {
    background: rgba(71, 85, 105, 0.28);
}

.theme-preset-creator-neon .background-glow-main {
    opacity: 0.34;
}

.theme-preset-creator-neon .background-glow-side {
    background: rgba(34, 211, 238, 0.42);
}

.theme-preset-creator-neon .profile-card {
    animation: neonCardPulse 7s ease-in-out infinite;
}

.profile-card {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    padding: 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.84), rgba(10, 14, 24, 0.88));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.theme-preset-minimal-light .profile-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 251, 0.98));
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 26px 72px rgba(15, 23, 42, 0.08);
}

.theme-preset-creator-neon .profile-card {
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.08);
}

.profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    opacity: 0.75;
}

.profile-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 32%, rgba(108, 92, 231, 0.18));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.hero-badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    animation: badgeFloat 9s ease-in-out infinite;
}

.theme-preset-minimal-light .hero-badge,
.theme-preset-minimal-light .profile-verified,
.theme-preset-minimal-light .social-list a,
.theme-preset-minimal-light .social-section,
.theme-preset-minimal-light .link-section,
.theme-preset-minimal-light .link-button {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(15, 23, 42, 0.06);
}

.theme-preset-minimal-light .link-arrow {
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.6);
}

.theme-preset-minimal-light .section-heading::after {
    background: linear-gradient(90deg, rgba(139, 157, 183, 0.95), transparent);
}

.hero-badge i {
    color: #ffd166;
}

.avatar-shell {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
}

.avatar-shell::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 138px;
    height: 138px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.2), transparent 68%);
    filter: blur(22px);
    z-index: -1;
    animation: avatarHalo 8s ease-in-out infinite;
}

.avatar-image,
.avatar-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 999px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-color), rgba(255, 255, 255, 0.2));
    font-size: 38px;
    font-weight: 800;
}

.profile-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    text-align: center;
}

.profile-heading h1 {
    margin: 0;
    font-size: clamp(30px, 5vw, 42px);
    letter-spacing: -0.04em;
}

.profile-verified {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    font-weight: 700;
}

.profile-verified i {
    color: #9f8fff;
}

.profile-bio {
    margin: 0 auto 22px;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    text-align: center;
}

.theme-preset-minimal-light .profile-bio,
.theme-preset-minimal-light .section-kicker,
.theme-preset-minimal-light .link-content small {
    color: rgba(15, 23, 42, 0.64);
}

.theme-preset-minimal-light .profile-heading h1,
.theme-preset-minimal-light .section-heading h2,
.theme-preset-minimal-light .link-content strong {
    color: #111827;
}

.theme-preset-minimal-light .hero-badge,
.theme-preset-minimal-light .profile-verified {
    color: rgba(15, 23, 42, 0.78);
}

.theme-preset-minimal-light .social-list a,
.theme-preset-minimal-light .link-button,
.theme-preset-minimal-light .social-section,
.theme-preset-minimal-light .link-section {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.theme-preset-minimal-light .link-button:hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(139, 157, 183, 0.22);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.social-section,
.link-section {
    margin-top: 24px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 12px;
}

.section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, rgba(108, 92, 231, 0.9), transparent);
}

.section-kicker {
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.social-list {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-list a:hover {
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.06);
    background: rgba(255, 255, 255, 0.07);
}

.link-list {
    display: grid;
    gap: 14px;
}

.link-button {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.button-style-glass .link-button {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}

.button-style-glass .link-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.button-style-solid .link-button {
    background: linear-gradient(135deg, var(--theme-color), rgba(255, 255, 255, 0.14));
    border-color: rgba(255, 255, 255, 0.04);
}

.button-style-solid .link-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), var(--theme-color));
}

.theme-preset-minimal-light.button-style-solid .link-button {
    border-color: rgba(15, 23, 42, 0.04);
}

.link-button:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.24), rgba(255, 255, 255, 0.08));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
}

.link-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: transform 0.35s ease;
}

.link-button:hover::before {
    transform: translateX(320%);
}

.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.link-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(108, 92, 231, 0.18), transparent 70%);
    z-index: -1;
}

@keyframes floatGlow {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-16px);
    }
}

@keyframes floatGlowAlt {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(10px) scale(1.04);
    }
}

@keyframes avatarHalo {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes badgeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes neonCardPulse {
    0%, 100% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.08);
    }
    50% {
        box-shadow: 0 38px 100px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(34, 211, 238, 0.12), 0 0 40px rgba(139, 92, 246, 0.12);
    }
}

/* ============================================================
   PRESET: Sunset Glow
   ============================================================ */
body.public-body.theme-preset-sunset-glow {
    background:
        radial-gradient(circle at top, rgba(249, 115, 22, 0.30), transparent 34%),
        radial-gradient(circle at bottom left, rgba(244, 63, 94, 0.18), transparent 30%),
        linear-gradient(135deg, var(--background-color), #10060a 82%);
}

.theme-preset-sunset-glow .background-glow-main {
    background: #f97316;
    opacity: 0.30;
}

.theme-preset-sunset-glow .background-glow-side {
    background: rgba(244, 63, 94, 0.55);
}

.theme-preset-sunset-glow .profile-card {
    background: linear-gradient(180deg, rgba(26, 10, 14, 0.86), rgba(16, 6, 10, 0.90));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(249, 115, 22, 0.06);
}

.theme-preset-sunset-glow .profile-card::after {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), transparent 32%, rgba(244, 63, 94, 0.10));
}

.theme-preset-sunset-glow .section-heading::after {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.9), transparent);
}

.theme-preset-sunset-glow .link-icon::after {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.18), transparent 70%);
}

.theme-preset-sunset-glow .hero-badge i {
    color: #fb923c;
}

.theme-preset-sunset-glow .profile-verified i {
    color: #f97316;
}

.theme-preset-sunset-glow .link-button:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(255, 255, 255, 0.08));
}

.theme-preset-sunset-glow .avatar-shell::after {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 68%);
}

/* ============================================================
   PRESET: Ocean Blue
   ============================================================ */
body.public-body.theme-preset-ocean-blue {
    background:
        radial-gradient(circle at top, rgba(14, 165, 233, 0.28), transparent 34%),
        radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #060d18 82%);
}

.theme-preset-ocean-blue .background-glow-main {
    background: #0ea5e9;
    opacity: 0.28;
}

.theme-preset-ocean-blue .background-glow-side {
    background: rgba(56, 189, 248, 0.45);
}

.theme-preset-ocean-blue .profile-card {
    background: linear-gradient(180deg, rgba(12, 21, 36, 0.86), rgba(6, 13, 24, 0.90));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(14, 165, 233, 0.06);
}

.theme-preset-ocean-blue .profile-card::after {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), transparent 32%, rgba(56, 189, 248, 0.08));
}

.theme-preset-ocean-blue .section-heading::after {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.9), transparent);
}

.theme-preset-ocean-blue .link-icon::after {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 70%);
}

.theme-preset-ocean-blue .hero-badge i {
    color: #38bdf8;
}

.theme-preset-ocean-blue .profile-verified i {
    color: #0ea5e9;
}

.theme-preset-ocean-blue .link-button:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(255, 255, 255, 0.08));
}

.theme-preset-ocean-blue .avatar-shell::after {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 68%);
}

/* ============================================================
   PRESET: Forest Dark
   ============================================================ */
body.public-body.theme-preset-forest-dark {
    background:
        radial-gradient(circle at top, rgba(34, 197, 94, 0.24), transparent 34%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #040e08 82%);
}

.theme-preset-forest-dark .background-glow-main {
    background: #22c55e;
    opacity: 0.26;
}

.theme-preset-forest-dark .background-glow-side {
    background: rgba(16, 185, 129, 0.42);
}

.theme-preset-forest-dark .profile-card {
    background: linear-gradient(180deg, rgba(10, 21, 16, 0.86), rgba(4, 14, 8, 0.90));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(34, 197, 94, 0.06);
}

.theme-preset-forest-dark .profile-card::after {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), transparent 32%, rgba(16, 185, 129, 0.08));
}

.theme-preset-forest-dark .section-heading::after {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.9), transparent);
}

.theme-preset-forest-dark .link-icon::after {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 70%);
}

.theme-preset-forest-dark .hero-badge i {
    color: #4ade80;
}

.theme-preset-forest-dark .profile-verified i {
    color: #22c55e;
}

.theme-preset-forest-dark .link-button:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(255, 255, 255, 0.08));
}

.theme-preset-forest-dark .avatar-shell::after {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.22), transparent 68%);
}

/* ============================================================
   PRESET: Candy Pink (Light)
   ============================================================ */
body.public-body.theme-preset-candy-pink {
    background:
        radial-gradient(circle at top, rgba(236, 72, 153, 0.16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.10), transparent 28%),
        linear-gradient(180deg, #fdf2f8, var(--background-color) 82%);
}

.theme-preset-candy-pink .background-grid {
    opacity: 0.14;
}

.theme-preset-candy-pink .background-glow-main {
    background: #ec4899;
    opacity: 0.18;
}

.theme-preset-candy-pink .background-glow-side {
    background: rgba(168, 85, 247, 0.28);
}

.theme-preset-candy-pink .profile-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(253, 242, 248, 0.96));
    border-color: rgba(236, 72, 153, 0.08);
    box-shadow: 0 26px 72px rgba(236, 72, 153, 0.08);
}

.theme-preset-candy-pink .profile-card::after {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.10), transparent 32%, rgba(168, 85, 247, 0.08));
}

.theme-preset-candy-pink .hero-badge,
.theme-preset-candy-pink .profile-verified,
.theme-preset-candy-pink .social-list a,
.theme-preset-candy-pink .social-section,
.theme-preset-candy-pink .link-section,
.theme-preset-candy-pink .link-button {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(236, 72, 153, 0.08);
}

.theme-preset-candy-pink .hero-badge,
.theme-preset-candy-pink .profile-verified {
    color: rgba(30, 16, 48, 0.78);
}

.theme-preset-candy-pink .hero-badge i {
    color: #ec4899;
}

.theme-preset-candy-pink .profile-verified i {
    color: #ec4899;
}

.theme-preset-candy-pink .profile-bio,
.theme-preset-candy-pink .section-kicker,
.theme-preset-candy-pink .link-content small {
    color: rgba(30, 16, 48, 0.60);
}

.theme-preset-candy-pink .profile-heading h1,
.theme-preset-candy-pink .section-heading h2,
.theme-preset-candy-pink .link-content strong {
    color: #1e1030;
}

.theme-preset-candy-pink .section-heading::after {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.8), transparent);
}

.theme-preset-candy-pink .link-arrow {
    background: rgba(236, 72, 153, 0.08);
    color: rgba(30, 16, 48, 0.55);
}

.theme-preset-candy-pink .link-button:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(236, 72, 153, 0.18);
    box-shadow: 0 16px 34px rgba(236, 72, 153, 0.10);
}

.theme-preset-candy-pink .social-list a,
.theme-preset-candy-pink .link-button,
.theme-preset-candy-pink .social-section,
.theme-preset-candy-pink .link-section {
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.05);
}

.theme-preset-candy-pink .avatar-shell::after {
    background: radial-gradient(circle, rgba(236, 72, 153, 0.20), transparent 68%);
}

/* ============================================================
   PRESET: Midnight Purple
   ============================================================ */
body.public-body.theme-preset-midnight-purple {
    background:
        radial-gradient(circle at top, rgba(124, 58, 237, 0.32), transparent 34%),
        radial-gradient(circle at bottom right, rgba(167, 139, 250, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #080418 82%);
}

.theme-preset-midnight-purple .background-glow-main {
    background: #7c3aed;
    opacity: 0.30;
}

.theme-preset-midnight-purple .background-glow-side {
    background: rgba(167, 139, 250, 0.42);
}

.theme-preset-midnight-purple .profile-card {
    background: linear-gradient(180deg, rgba(15, 7, 32, 0.86), rgba(8, 4, 24, 0.90));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(124, 58, 237, 0.08);
}

.theme-preset-midnight-purple .profile-card::after {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), transparent 32%, rgba(167, 139, 250, 0.10));
}

.theme-preset-midnight-purple .section-heading::after {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.9), transparent);
}

.theme-preset-midnight-purple .link-icon::after {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.20), transparent 70%);
}

.theme-preset-midnight-purple .hero-badge i {
    color: #a78bfa;
}

.theme-preset-midnight-purple .profile-verified i {
    color: #7c3aed;
}

.theme-preset-midnight-purple .link-button:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(255, 255, 255, 0.08));
}

.theme-preset-midnight-purple .avatar-shell::after {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.24), transparent 68%);
}

.theme-preset-midnight-purple .profile-card {
    animation: midnightPurplePulse 8s ease-in-out infinite;
}

@keyframes midnightPurplePulse {
    0%, 100% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(124, 58, 237, 0.08);
    }
    50% {
        box-shadow: 0 38px 100px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(167, 139, 250, 0.12), 0 0 36px rgba(124, 58, 237, 0.10);
    }
}

/* ============================================================
   PRESET: Arctic White (Light)
   ============================================================ */
body.public-body.theme-preset-arctic-white {
    background:
        radial-gradient(circle at top, rgba(100, 116, 139, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, var(--background-color) 82%);
}

.theme-preset-arctic-white .background-grid {
    opacity: 0.10;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

.theme-preset-arctic-white .background-glow-main {
    background: #94a3b8;
    opacity: 0.12;
}

.theme-preset-arctic-white .background-glow-side {
    background: rgba(148, 163, 184, 0.18);
}

.theme-preset-arctic-white .profile-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.99));
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
}

.theme-preset-arctic-white .profile-card::before {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.06), transparent);
}

.theme-preset-arctic-white .profile-card::after {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.03), transparent 32%, rgba(100, 116, 139, 0.04));
}

.theme-preset-arctic-white .hero-badge,
.theme-preset-arctic-white .profile-verified,
.theme-preset-arctic-white .social-list a,
.theme-preset-arctic-white .social-section,
.theme-preset-arctic-white .link-section,
.theme-preset-arctic-white .link-button {
    background: rgba(248, 250, 252, 0.90);
    border-color: rgba(15, 23, 42, 0.06);
}

.theme-preset-arctic-white .hero-badge,
.theme-preset-arctic-white .profile-verified {
    color: rgba(15, 23, 42, 0.72);
}

.theme-preset-arctic-white .hero-badge i {
    color: #64748b;
}

.theme-preset-arctic-white .profile-verified i {
    color: #64748b;
}

.theme-preset-arctic-white .profile-bio,
.theme-preset-arctic-white .section-kicker,
.theme-preset-arctic-white .link-content small {
    color: rgba(15, 23, 42, 0.55);
}

.theme-preset-arctic-white .profile-heading h1,
.theme-preset-arctic-white .section-heading h2,
.theme-preset-arctic-white .link-content strong {
    color: #0f172a;
}

.theme-preset-arctic-white .section-heading::after {
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.6), transparent);
}

.theme-preset-arctic-white .link-arrow {
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.50);
}

.theme-preset-arctic-white .link-button:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(100, 116, 139, 0.14);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.theme-preset-arctic-white .social-list a,
.theme-preset-arctic-white .link-button,
.theme-preset-arctic-white .social-section,
.theme-preset-arctic-white .link-section {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
}

.theme-preset-arctic-white .avatar-shell::after {
    background: radial-gradient(circle, rgba(100, 116, 139, 0.12), transparent 68%);
}

/* ============================================================
   PRESET: Warm Earth
   ============================================================ */
body.public-body.theme-preset-warm-earth {
    background:
        radial-gradient(circle at top, rgba(217, 119, 6, 0.26), transparent 34%),
        radial-gradient(circle at bottom left, rgba(180, 83, 9, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #0e0a06 82%);
}

.theme-preset-warm-earth .background-glow-main {
    background: #d97706;
    opacity: 0.26;
}

.theme-preset-warm-earth .background-glow-side {
    background: rgba(180, 83, 9, 0.42);
}

.theme-preset-warm-earth .profile-card {
    background: linear-gradient(180deg, rgba(28, 20, 16, 0.86), rgba(14, 10, 6, 0.90));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(217, 119, 6, 0.06);
}

.theme-preset-warm-earth .profile-card::after {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.10), transparent 32%, rgba(180, 83, 9, 0.08));
}

.theme-preset-warm-earth .section-heading::after {
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.9), transparent);
}

.theme-preset-warm-earth .link-icon::after {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.18), transparent 70%);
}

.theme-preset-warm-earth .hero-badge i {
    color: #fbbf24;
}

.theme-preset-warm-earth .profile-verified i {
    color: #d97706;
}

.theme-preset-warm-earth .link-button:hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(255, 255, 255, 0.08));
}

.theme-preset-warm-earth .avatar-shell::after {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.22), transparent 68%);
}

/* ============================================================
   PRESET: Cyber Punk
   ============================================================ */
body.public-body.theme-preset-cyber-punk {
    background:
        radial-gradient(circle at top, rgba(132, 204, 22, 0.26), transparent 32%),
        radial-gradient(circle at bottom right, rgba(234, 179, 8, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #050804 82%);
}

.theme-preset-cyber-punk .background-glow-main {
    background: #84cc16;
    opacity: 0.28;
}

.theme-preset-cyber-punk .background-glow-side {
    background: rgba(234, 179, 8, 0.40);
}

.theme-preset-cyber-punk .profile-card {
    background: linear-gradient(180deg, rgba(10, 14, 10, 0.88), rgba(5, 8, 4, 0.92));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(132, 204, 22, 0.08);
}

.theme-preset-cyber-punk .profile-card::after {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.12), transparent 32%, rgba(234, 179, 8, 0.08));
}

.theme-preset-cyber-punk .section-heading::after {
    background: linear-gradient(90deg, rgba(132, 204, 22, 0.9), transparent);
}

.theme-preset-cyber-punk .link-icon::after {
    background: radial-gradient(circle, rgba(132, 204, 22, 0.20), transparent 70%);
}

.theme-preset-cyber-punk .hero-badge i {
    color: #a3e635;
}

.theme-preset-cyber-punk .profile-verified i {
    color: #84cc16;
}

.theme-preset-cyber-punk .link-button:hover {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.22), rgba(255, 255, 255, 0.08));
}

.theme-preset-cyber-punk .avatar-shell::after {
    background: radial-gradient(circle, rgba(132, 204, 22, 0.22), transparent 68%);
}

.theme-preset-cyber-punk .profile-card {
    animation: cyberPunkPulse 6s ease-in-out infinite;
}

@keyframes cyberPunkPulse {
    0%, 100% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(132, 204, 22, 0.08);
    }
    50% {
        box-shadow: 0 38px 100px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(234, 179, 8, 0.12), 0 0 34px rgba(132, 204, 22, 0.10);
    }
}

/* ============================================================
   PRESET: Luxury Gold
   ============================================================ */
body.public-body.theme-preset-luxury-gold {
    background:
        radial-gradient(circle at top, rgba(234, 179, 8, 0.26), transparent 34%),
        radial-gradient(circle at bottom left, rgba(161, 98, 7, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #0c0a06 82%);
}

.theme-preset-luxury-gold .background-glow-main {
    background: #eab308;
    opacity: 0.26;
}

.theme-preset-luxury-gold .background-glow-side {
    background: rgba(161, 98, 7, 0.42);
}

.theme-preset-luxury-gold .profile-card {
    background: linear-gradient(180deg, rgba(20, 18, 16, 0.88), rgba(12, 10, 6, 0.92));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(234, 179, 8, 0.08);
}

.theme-preset-luxury-gold .profile-card::after {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), transparent 32%, rgba(161, 98, 7, 0.08));
}

.theme-preset-luxury-gold .section-heading::after {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.9), transparent);
}

.theme-preset-luxury-gold .link-icon::after {
    background: radial-gradient(circle, rgba(234, 179, 8, 0.20), transparent 70%);
}

.theme-preset-luxury-gold .hero-badge i {
    color: #facc15;
}

.theme-preset-luxury-gold .profile-verified i {
    color: #eab308;
}

.theme-preset-luxury-gold .link-button:hover {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(255, 255, 255, 0.08));
}

.theme-preset-luxury-gold .avatar-shell::after {
    background: radial-gradient(circle, rgba(234, 179, 8, 0.24), transparent 68%);
}

.theme-preset-luxury-gold .profile-card::before {
    background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.18), transparent);
}

/* ============================================================
   PRESET: Berry Crush
   ============================================================ */
body.public-body.theme-preset-berry-crush {
    background:
        radial-gradient(circle at top, rgba(225, 29, 72, 0.28), transparent 34%),
        radial-gradient(circle at bottom right, rgba(190, 18, 60, 0.14), transparent 28%),
        linear-gradient(135deg, var(--background-color), #0e0408 82%);
}

.theme-preset-berry-crush .background-glow-main {
    background: #e11d48;
    opacity: 0.28;
}

.theme-preset-berry-crush .background-glow-side {
    background: rgba(190, 18, 60, 0.42);
}

.theme-preset-berry-crush .profile-card {
    background: linear-gradient(180deg, rgba(26, 8, 16, 0.86), rgba(14, 4, 8, 0.90));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(225, 29, 72, 0.06);
}

.theme-preset-berry-crush .profile-card::after {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.12), transparent 32%, rgba(190, 18, 60, 0.08));
}

.theme-preset-berry-crush .section-heading::after {
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.9), transparent);
}

.theme-preset-berry-crush .link-icon::after {
    background: radial-gradient(circle, rgba(225, 29, 72, 0.18), transparent 70%);
}

.theme-preset-berry-crush .hero-badge i {
    color: #fb7185;
}

.theme-preset-berry-crush .profile-verified i {
    color: #e11d48;
}

.theme-preset-berry-crush .link-button:hover {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(255, 255, 255, 0.08));
}

.theme-preset-berry-crush .avatar-shell::after {
    background: radial-gradient(circle, rgba(225, 29, 72, 0.22), transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
    .background-glow-main,
    .background-glow-side,
    .avatar-shell::after,
    .hero-badge,
    .theme-preset-creator-neon .profile-card,
    .theme-preset-midnight-purple .profile-card,
    .theme-preset-cyber-punk .profile-card {
        animation: none;
    }

    .link-button,
    .social-list a {
        transition: none;
    }

    .link-button::before {
        display: none;
    }
}

.link-content {
    flex: 1;
    display: grid;
    gap: 4px;
    text-align: left;
}

.link-content strong {
    font-size: 15px;
}

.link-content small {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    font-weight: 600;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
}

.platform-badge {
    --platform-bg-1: #334155;
    --platform-bg-2: #475569;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--platform-bg-1), var(--platform-bg-2));
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.platform-badge i {
    font-size: 18px;
    line-height: 1;
}

.platform-size-sm {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.platform-size-md {
    width: 42px;
    height: 42px;
}

.platform-size-lg {
    width: 48px;
    height: 48px;
}

.platform-size-sm i {
    font-size: 15px;
}

.platform-size-lg i {
    font-size: 21px;
}

.platform-auto,
.platform-link,
.platform-website {
    --platform-bg-1: #64748b;
    --platform-bg-2: #475569;
}

.platform-instagram {
    --platform-bg-1: #fd5949;
    --platform-bg-2: #d6249f;
}

.platform-youtube {
    --platform-bg-1: #ff4e45;
    --platform-bg-2: #c91616;
}

.platform-tiktok {
    --platform-bg-1: #111111;
    --platform-bg-2: #25f4ee;
}

.platform-x {
    --platform-bg-1: #111827;
    --platform-bg-2: #3b82f6;
}

.platform-facebook {
    --platform-bg-1: #1877f2;
    --platform-bg-2: #0f52ba;
}

.platform-linkedin {
    --platform-bg-1: #0077b5;
    --platform-bg-2: #005885;
}

.platform-whatsapp {
    --platform-bg-1: #25d366;
    --platform-bg-2: #128c7e;
}

.platform-telegram {
    --platform-bg-1: #2aabee;
    --platform-bg-2: #229ed9;
}

.platform-spotify {
    --platform-bg-1: #1db954;
    --platform-bg-2: #14833b;
}

.platform-twitch {
    --platform-bg-1: #9146ff;
    --platform-bg-2: #6441a5;
}

.platform-discord {
    --platform-bg-1: #5865f2;
    --platform-bg-2: #404eed;
}

.platform-github {
    --platform-bg-1: #24292e;
    --platform-bg-2: #111827;
}

.platform-email {
    --platform-bg-1: #f59e0b;
    --platform-bg-2: #d97706;
}

.platform-phone {
    --platform-bg-1: #10b981;
    --platform-bg-2: #0f766e;
}

.platform-map {
    --platform-bg-1: #ef4444;
    --platform-bg-2: #b91c1c;
}

.platform-shop {
    --platform-bg-1: #8b5cf6;
    --platform-bg-2: #7c3aed;
}

.platform-iban {
    --platform-bg-1: #059669;
    --platform-bg-2: #047857;
}

.empty-state,
.setup-box {
    padding: 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.empty-state {
    display: grid;
    gap: 6px;
}

.setup-box code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.setup-box a {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 720px) {
    .profile-card {
        padding: 24px 18px;
        border-radius: 24px;
    }

    .link-button {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .link-arrow {
        margin-left: auto;
    }
}

/* ============================================================
   AVATAR FRAME STYLES
   ============================================================ */

/* Rounded Square */
.avatar-frame-rounded-square .avatar-image,
.avatar-frame-rounded-square .avatar-placeholder {
    border-radius: 24px;
}

.avatar-frame-rounded-square .avatar-shell::after {
    border-radius: 32px;
}

/* Hexagon */
.avatar-frame-hexagon .avatar-image,
.avatar-frame-hexagon .avatar-placeholder {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0;
    border: none;
    width: 116px;
    height: 116px;
}

.avatar-frame-hexagon .avatar-shell::after {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0;
    width: 148px;
    height: 148px;
}

/* Gradient Ring */
.avatar-frame-gradient-ring .avatar-image,
.avatar-frame-gradient-ring .avatar-placeholder {
    border: none;
    box-shadow: none;
}

.avatar-frame-gradient-ring .avatar-shell::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 122px;
    height: 122px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(
        var(--theme-color),
        rgba(255, 255, 255, 0.3),
        var(--theme-color),
        rgba(255, 255, 255, 0.3),
        var(--theme-color)
    );
    animation: ringRotate 4s linear infinite;
    z-index: 0;
}

.avatar-frame-gradient-ring .avatar-shell::after {
    display: none;
}

.avatar-frame-gradient-ring .avatar-image,
.avatar-frame-gradient-ring .avatar-placeholder {
    position: relative;
    z-index: 1;
}

@keyframes ringRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================================
   STAGGER ENTRANCE ANIMATIONS
   ============================================================ */

.stagger-item {
    opacity: 0;
    transform: translateY(18px);
    animation: staggerIn 0.5s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.12s; }
.stagger-item:nth-child(3) { animation-delay: 0.19s; }
.stagger-item:nth-child(4) { animation-delay: 0.26s; }
.stagger-item:nth-child(5) { animation-delay: 0.33s; }
.stagger-item:nth-child(6) { animation-delay: 0.40s; }
.stagger-item:nth-child(7) { animation-delay: 0.47s; }
.stagger-item:nth-child(8) { animation-delay: 0.54s; }
.stagger-item:nth-child(9) { animation-delay: 0.61s; }
.stagger-item:nth-child(10) { animation-delay: 0.68s; }

@keyframes staggerIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-social {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    animation: socialPop 0.35s ease forwards;
    animation-delay: calc(0.45s + var(--social-i, 0) * 0.06s);
}

@keyframes socialPop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stagger-link {
    opacity: 0;
    transform: translateY(14px);
    animation: linkSlideIn 0.4s ease forwards;
    animation-delay: calc(0.35s + var(--link-i, 0) * 0.07s);
}

@keyframes linkSlideIn {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   ENHANCED HOVER & INTERACTION EFFECTS
   ============================================================ */

/* Social icon bounce hover */
.social-list a:hover {
    transform: translateY(-4px) scale(1.08);
    filter: brightness(1.1);
    background: rgba(255, 255, 255, 0.09);
}

.social-list a:active {
    transform: translateY(-1px) scale(0.96);
    transition: transform 0.08s ease;
}

/* Avatar subtle pulse on hover */
.avatar-shell:hover .avatar-image,
.avatar-shell:hover .avatar-placeholder {
    transform: scale(1.04);
    transition: transform 0.3s ease;
}

.avatar-image,
.avatar-placeholder {
    transition: transform 0.3s ease;
}

/* Link button ripple overlay on click */
.link-button {
    position: relative;
    overflow: hidden;
}

.link-button:active {
    transform: translateY(0) scale(0.98);
    transition: transform 0.08s ease;
}

/* Enhanced shimmer on hover */
.link-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.link-button:hover::before {
    transform: translateX(360%);
}

/* Link arrow rotation on hover */
.link-arrow {
    transition: transform 0.2s ease, background 0.2s ease;
}

.link-button:hover .link-arrow {
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.10);
}

/* IBAN Kopyalama Butonu */
.link-button-copy {
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    color: inherit;
}

.link-button-copy .iban-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 0.85em;
    opacity: 0.85;
}

.link-button-copy .link-copy-icon {
    transform: none;
}

.link-button-copy:hover .link-copy-icon {
    transform: scale(1.15);
    background: rgba(5, 150, 105, 0.2);
}

.link-button-copy .link-copied-icon i {
    color: #22c55e;
}

.link-button-copy.copied {
    border-color: rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(255, 255, 255, 0.05));
}

/* Hero badge glow on hover */
.hero-badge {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hero-badge:hover {
    box-shadow: 0 0 20px rgba(255, 209, 102, 0.15);
    transform: translateY(-2px);
}

/* Profile card subtle lift */
.profile-card {
    transition: box-shadow 0.4s ease;
}

.profile-card:hover {
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.40);
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
    .stagger-item,
    .stagger-social,
    .stagger-link {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .avatar-frame-gradient-ring .avatar-shell::before {
        animation: none;
    }

    .avatar-image,
    .avatar-placeholder,
    .link-arrow,
    .hero-badge,
    .profile-card {
        transition: none;
    }

    .link-button::before {
        display: none;
    }
}

/* ============================================================
   LAYOUT: Grid — 2 sütunlu link kartları
   ============================================================ */
.layout-grid .link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.layout-grid .link-button {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px;
    gap: 10px;
    min-height: 120px;
}

.layout-grid .link-icon {
    order: -1;
}

.layout-grid .link-content {
    text-align: center;
    gap: 4px;
}

.layout-grid .link-content strong {
    font-size: 13px;
    line-height: 1.3;
}

.layout-grid .link-content small {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-grid .link-arrow {
    display: none;
}

.layout-grid .link-icon::after {
    inset: -10px;
    border-radius: 20px;
}

@media (max-width: 420px) {
    .layout-grid .link-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   LAYOUT: Compact — küçük kartlar, sıkı aralık
   ============================================================ */
.layout-compact .link-list {
    gap: 8px;
}

.layout-compact .link-button {
    padding: 10px 14px;
    border-radius: 14px;
    gap: 10px;
}

.layout-compact .link-icon .platform-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.layout-compact .link-icon .platform-badge i {
    font-size: 13px;
}

.layout-compact .link-icon::after {
    display: none;
}

.layout-compact .link-content strong {
    font-size: 13px;
}

.layout-compact .link-content small {
    display: none;
}

.layout-compact .link-arrow {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
}

.layout-compact .section-heading {
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.layout-compact .section-heading h2 {
    font-size: 15px;
}

.layout-compact .section-kicker {
    font-size: 10px;
}

.layout-compact .social-section,
.layout-compact .link-section {
    padding: 14px;
    border-radius: 18px;
    margin-top: 16px;
}

.layout-compact .profile-card {
    padding: 24px 18px;
}

/* ============================================================
   LAYOUT: Hero — büyük profil, etkileyici görünüm
   ============================================================ */
.layout-hero .profile-card {
    padding: 40px 28px;
    border-radius: 36px;
    max-width: 680px;
}

.layout-hero .avatar-image,
.layout-hero .avatar-placeholder {
    width: 130px;
    height: 130px;
}

.layout-hero .avatar-shell::after {
    width: 170px;
    height: 170px;
}

.layout-hero .profile-heading h1 {
    font-size: clamp(34px, 6vw, 52px);
    letter-spacing: -0.05em;
}

.layout-hero .profile-bio {
    font-size: 16px;
    max-width: 560px;
    line-height: 1.8;
}

.layout-hero .link-button {
    padding: 20px 22px;
    border-radius: 22px;
    gap: 16px;
}

.layout-hero .link-icon .platform-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.layout-hero .link-icon .platform-badge i {
    font-size: 20px;
}

.layout-hero .link-content strong {
    font-size: 17px;
}

.layout-hero .link-content small {
    font-size: 13px;
}

.layout-hero .link-arrow {
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.layout-hero .section-heading h2 {
    font-size: 22px;
}

.layout-hero .social-section,
.layout-hero .link-section {
    padding: 22px;
    border-radius: 28px;
    margin-top: 28px;
}

.layout-hero .hero-badge {
    padding: 10px 18px;
    font-size: 13px;
}

.layout-hero .social-list {
    gap: 16px;
}

.layout-hero .social-list .platform-badge {
    width: 48px;
    height: 48px;
}

.layout-hero .social-list .platform-badge i {
    font-size: 21px;
}

@media (max-width: 720px) {
    .layout-hero .profile-card {
        padding: 28px 18px;
        border-radius: 28px;
    }

    .layout-hero .avatar-image,
    .layout-hero .avatar-placeholder {
        width: 110px;
        height: 110px;
    }
}

/* ============================================================
   SOCIAL POSITION: Inline Top — isim altı küçük satır
   ============================================================ */
.social-inline-top {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.social-inline-top a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-inline-top a:hover {
    transform: translateY(-3px) scale(1.06);
    filter: brightness(1.08);
}

.social-inline-top .platform-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.social-inline-top .platform-badge i {
    font-size: 14px;
}

/* ============================================================
   SOCIAL POSITION: Bottom Bar — sayfa altı sabit çubuk
   ============================================================ */
.social-bottom-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.social-bottom-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-bottom-bar a:hover {
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.08);
    background: rgba(255, 255, 255, 0.07);
}

/* Light preset overrides for social positions */
.theme-preset-minimal-light .social-inline-top a,
.theme-preset-candy-pink .social-inline-top a,
.theme-preset-arctic-white .social-inline-top a {
    filter: none;
}

.theme-preset-minimal-light .social-bottom-bar,
.theme-preset-candy-pink .social-bottom-bar,
.theme-preset-arctic-white .social-bottom-bar {
    border-top-color: rgba(15, 23, 42, 0.06);
}

.theme-preset-minimal-light .social-bottom-bar a,
.theme-preset-candy-pink .social-bottom-bar a,
.theme-preset-arctic-white .social-bottom-bar a {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(15, 23, 42, 0.06);
}

/* Reduced motion for social positions */
@media (prefers-reduced-motion: reduce) {
    .social-inline-top a,
    .social-bottom-bar a {
        transition: none;
    }
}