/* Marni Jimbaran — Toko Oleh-oleh & Grosir Bali */
:root {
    --spa-dark: #1a1209;
    --spa-brown-dark: #5c2e12;
    --spa-brown: #8b3d1a;
    --spa-brown-mid: #c45c26;
    --spa-brown-light: #e8a06a;
    --spa-tan: #f0c9a0;
    --spa-cream: #faf3e8;
    --spa-white: #fffdf8;
    --spa-gold: #d4a017;
    --spa-gold-light: #f0c85a;
    --marni-teal: #0f6b5c;
    --marni-red: #c0392b;
}

html[data-tenant="marni"] body,
body.auth-marni {
    font-family: "Noto Sans SC", "Poppins", "Segoe UI", sans-serif;
    color: var(--spa-dark);
    background: var(--spa-cream);
}

html[data-tenant="marni"] h1,
html[data-tenant="marni"] h2,
html[data-tenant="marni"] h3,
html[data-tenant="marni"] .font-display {
    font-family: "Playfair Display", "Noto Serif SC", Georgia, serif;
}

.navbar-marni {
    background: var(--spa-dark);
    padding: 0.7rem 0;
}
.navbar-marni .navbar-brand b { color: #fff; letter-spacing: .02em; }
.navbar-marni .dot { color: var(--spa-gold); }
.navbar-marni .place { color: var(--spa-tan); font-weight: 500; }
.badge-marni {
    background: var(--spa-gold);
    color: #3d2a00;
    font-weight: 700;
}

.hero-marni {
    background:
        radial-gradient(circle at 88% -10%, rgba(212,160,23,.35), transparent 42%),
        linear-gradient(135deg, #1a1209 0%, #5c2e12 48%, #0f6b5c 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero-marni::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,200,90,.22), transparent 70%);
}
.hero-marni h1 { font-weight: 700; line-height: 1.2; }
.hero-marni .lead { color: #f3e6d2; max-width: 620px; }
.stat-badge {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
}
.stat-badge .num { font-size: 1.45rem; font-weight: 800; color: var(--spa-gold-light); }

.section-eyebrow {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .74rem;
    font-weight: 700;
    color: var(--spa-brown-mid);
}
.unit-card, .portal-card, .prod-card, .pay-card {
    border: 0;
    border-radius: 16px;
    height: 100%;
    background: var(--spa-white);
    transition: .25s;
}
.unit-card:hover, .portal-card:hover, .prod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(26,18,9,.12) !important;
}
.unit-ico {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: #fff;
}
.btn-gold {
    background: var(--spa-gold);
    border: 0;
    color: #3d2a00;
    font-weight: 700;
}
.btn-gold:hover { background: #c09010; color: #3d2a00; }
.btn-marni {
    background: var(--spa-brown);
    border: 0;
    color: #fff;
    font-weight: 600;
}
.btn-marni:hover { background: var(--spa-brown-dark); color: #fff; }

.lang-switch .btn {
    border-radius: 999px;
    font-weight: 700;
    min-width: 52px;
}
.lang-switch .btn.active {
    background: var(--spa-gold);
    border-color: var(--spa-gold);
    color: #3d2a00;
}

.prod-price { color: var(--spa-brown); font-weight: 800; }
.prod-code { font-size: .72rem; letter-spacing: .04em; color: #8a7460; }
footer.footer-marni { background: #140e08; color: #d4c4ae; }

[data-lang="id"] .zh { display: none !important; }
[data-lang="zh"] .id { display: none !important; }

body.auth-marni {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1209, #5c2e12 55%, #0f6b5c);
}
body.auth-marni .auth-side {
    background: linear-gradient(160deg, #5c2e12, #1a1209);
}
body.auth-marni .btn-brand {
    background: var(--spa-brown);
    border: 0;
    color: #fff;
    font-weight: 600;
}
body.auth-marni .btn-brand:hover { background: var(--spa-brown-dark); color: #fff; }
body.auth-marni .gold { color: var(--spa-gold-light); }
body.auth-marni .brand-badge {
    background: rgba(212,160,23,.15);
    border: 1px solid rgba(212,160,23,.4);
    border-radius: 10px;
}
