/**
 * Dekorasi background unik per keluarga template — BUKAN grid titik generik
 */

/* Matikan pola titik lama yang bikin semua template kelihatan sama */
.living-bg::after,
.cover-pattern::before {
    background-image: none !important;
    opacity: 0 !important;
}

.living-bg::before {
    opacity: 0.55;
    animation: livingAurora 16s ease-in-out infinite alternate;
}

.template-surface,
#hero {
    position: relative;
}

.template-deco-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.85;
}

#hero > .template-deco-layer {
    z-index: 1;
    opacity: 0.4;
    mix-blend-mode: normal;
}

.template-surface > .inv-section__inner,
.template-surface > .template-deco-layer + .inv-section__inner {
    position: relative;
    z-index: 2;
}

/* ——— Floral / Garden ——— */
body.tpl-deco-floral-0 .template-deco-layer,
body.tpl-deco-floral-2 .template-deco-layer,
body.tpl-deco-floral-4 .cover-ambient::before {
    background:
        radial-gradient(ellipse 28% 22% at 8% 12%, rgba(var(--accent-rgb), 0.22), transparent 70%),
        radial-gradient(ellipse 24% 20% at 92% 18%, rgba(var(--primary-rgb), 0.18), transparent 68%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23ffffff' fill-opacity='0.07' d='M60 8c8 18 22 22 22 38s-14 28-22 38-22-22-22-38 14-20 22-38z'/%3E%3C/svg%3E");
    background-size: auto, auto, 140px 140px;
}

body.tpl-deco-floral-1 .template-deco-layer,
body.tpl-deco-floral-3 .template-deco-layer {
    background:
        repeating-linear-gradient(125deg, transparent 0 40px, rgba(var(--accent-rgb), 0.06) 40px 41px),
        radial-gradient(circle at 15% 85%, rgba(34, 197, 94, 0.12), transparent 35%),
        radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), 0.15), transparent 32%);
}

body.tpl-deco-floral-5 .template-deco-layer {
    background:
        conic-gradient(from 120deg at 70% 30%, rgba(var(--accent-rgb), 0.1), transparent 25%, rgba(var(--primary-rgb), 0.08) 50%, transparent 75%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(var(--primary-rgb), 0.12), transparent 60%);
}

/* ——— Luxury / Royal ——— */
body.tpl-deco-luxury-0 .template-deco-layer,
body.tpl-deco-luxury-2 .template-deco-layer {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(var(--accent-rgb), 0.09) 18px, 19px),
        repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255, 255, 255, 0.04) 28px, 29px),
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.2), transparent 55%);
}

body.tpl-deco-luxury-1 .template-deco-layer,
body.tpl-deco-luxury-4 .template-deco-layer {
    background:
        linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.12) 50%, transparent 100%),
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.08) 0 1px, transparent 2px);
    background-size: 100% 100%, 48px 48px;
}

body.tpl-deco-luxury-3 .template-deco-layer,
body.tpl-deco-luxury-5 .template-deco-layer {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 30% 20%, rgba(var(--accent-rgb), 0.25), transparent 50%);
    background-size: 96px 96px, cover;
}

/* ——— Starry / Midnight ——— */
body.tpl-deco-starry-0 .template-deco-layer,
body.tpl-deco-starry-2 .template-deco-layer,
body.tpl-deco-starry-4 .cover-ambient::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
        radial-gradient(circle at 45% 72%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 65%, rgba(var(--accent-rgb), 0.8) 0 1.5px, transparent 3px),
        radial-gradient(ellipse 70% 50% at 50% 110%, rgba(var(--accent-rgb), 0.15), transparent 50%);
    background-size: 220px 220px, 280px 280px, 200px 200px, 260px 260px, cover;
}

body.tpl-deco-starry-1 .template-deco-layer,
body.tpl-deco-starry-3 .template-deco-layer {
    background:
        radial-gradient(ellipse 60% 40% at 50% -10%, rgba(var(--accent-rgb), 0.35), transparent 60%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.03) 0 8deg, transparent 8deg 18deg);
}

body.tpl-deco-starry-5 .template-deco-layer {
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.12) 0%, transparent 40%),
        radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.5px);
    background-size: 100% 100%, 36px 36px;
}

/* ——— Watercolor ——— */
body.tpl-deco-watercolor-0 .template-deco-layer,
body.tpl-deco-watercolor-2 .template-deco-layer {
    background:
        radial-gradient(ellipse 45% 35% at 20% 30%, rgba(236, 72, 153, 0.14), transparent 70%),
        radial-gradient(ellipse 40% 38% at 80% 25%, rgba(var(--accent-rgb), 0.16), transparent 68%),
        radial-gradient(ellipse 50% 42% at 55% 85%, rgba(var(--primary-rgb), 0.12), transparent 72%);
    filter: blur(0.5px);
}

body.tpl-deco-watercolor-1 .template-deco-layer,
body.tpl-deco-watercolor-4 .template-deco-layer {
    background:
        radial-gradient(circle at 10% 60%, rgba(var(--accent-rgb), 0.2) 0%, transparent 28%),
        radial-gradient(circle at 90% 40%, rgba(244, 114, 182, 0.15) 0%, transparent 32%);
}

/* ——— Adat ——— */
body.tpl-deco-adat-0 .template-deco-layer,
body.tpl-deco-adat-3 .template-deco-layer {
    background:
        repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.14) 0 6px, transparent 6px 24px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 24px),
        radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 45%);
}

body.tpl-deco-adat-1 .template-deco-layer,
body.tpl-deco-adat-4 .template-deco-layer {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='%23ffffff' stroke-opacity='0.1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 50%);
    background-size: 72px 72px, cover;
}

body.tpl-deco-adat-2 .template-deco-layer,
body.tpl-deco-adat-5 .template-deco-layer {
    background:
        repeating-linear-gradient(45deg, rgba(var(--accent-rgb), 0.07) 0 12px, transparent 12px 28px),
        conic-gradient(from 45deg at 80% 20%, rgba(var(--accent-rgb), 0.12), transparent 40%);
}

/* ——— Islamic ——— */
body.tpl-deco-islamic-0 .template-deco-layer,
body.tpl-deco-islamic-2 .template-deco-layer {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.09' d='M50 5 L95 50 L50 95 L5 50 Z M50 20 L80 50 L50 80 L20 50 Z'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.15), transparent 50%);
    background-size: 100px 100px, cover;
}

/* ——— Artistic ——— */
body.tpl-deco-artistic-0 .template-deco-layer,
body.tpl-deco-artistic-1 .template-deco-layer {
    background:
        radial-gradient(circle at 25% 25%, rgba(var(--accent-rgb), 0.2) 0%, transparent 22%),
        radial-gradient(circle at 75% 60%, rgba(var(--primary-rgb), 0.18) 0%, transparent 25%),
        linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
}

/* ——— Elegant default ——— */
body.tpl-deco-elegant-0 .template-deco-layer,
body.tpl-deco-elegant-1 .template-deco-layer {
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0 1px, transparent 1px 42px),
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(var(--accent-rgb), 0.1), transparent 55%);
}

/* Cover ambient per keluarga */
body.tpl-deco-starry-0 #cover .cover-ambient::before,
body.tpl-deco-starry-2 #cover .cover-ambient::before {
    background:
        radial-gradient(ellipse 90% 70% at 50% 20%, rgba(var(--accent-rgb), 0.35), transparent 55%),
        radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px) !important;
    background-size: cover, 120px 120px !important;
    opacity: 0.7 !important;
}

body.tpl-deco-floral-0 #cover .cover-ambient::before,
body.tpl-deco-floral-2 #cover .cover-ambient::before {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(var(--accent-rgb), 0.3), transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cellipse cx='50' cy='50' rx='20' ry='35' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E") !important;
    background-size: cover, 120px !important;
    opacity: 0.65 !important;
}

body.tpl-deco-luxury-0 #cover .cover-ambient::before,
body.tpl-deco-luxury-1 #cover .cover-ambient::before {
    background:
        repeating-linear-gradient(45deg, rgba(var(--accent-rgb), 0.12) 0 2px, transparent 2px 24px),
        radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.28), transparent 50%) !important;
    opacity: 0.75 !important;
}