/* SWY INVITATION — Matched with swy.co.id design language */

/* ══════ DESIGN TOKENS ══════ */
:root{--swy-blue:#2563eb;--swy-blue2:#1d4ed8;--swy-dark:#0f172a;--swy-slate:#64748b;--swy-light:#f0f4ff;--swy-white:#fff;--swy-border:rgba(37,99,235,.08);--swy-glow:0 0 60px rgba(37,99,235,.08);--swy-card:rgba(255,255,255,.7);--swy-card-border:rgba(37,99,235,.06);--swy-shadow:0 20px 60px rgba(15,23,42,.06)}
*{transition-timing-function:cubic-bezier(.4,0,.2,1)}
::selection{background:rgba(37,99,235,.15)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(37,99,235,.2);border-radius:6px}

/* ══════ BODY ══════ */
body.studio-landing,body.premium-themes-page,body.pricing-page{background:var(--swy-light)!important;color:var(--swy-dark)!important}
body.studio-landing:before,body.premium-themes-page:before,body.pricing-page:before{background:radial-gradient(ellipse at 30% 0%,rgba(37,99,235,.06),transparent 50%),radial-gradient(ellipse at 80% 10%,rgba(99,102,241,.04),transparent 40%),var(--swy-light)!important;opacity:1!important}
body.studio-landing:after,body.premium-themes-page:after,body.pricing-page:after{background-image:radial-gradient(circle,rgba(37,99,235,.08) 1px,transparent 1px)!important;background-size:28px 28px!important;opacity:.5!important}
body.auth-page{background:var(--swy-light)!important;color:var(--swy-dark)!important}
body.auth-page:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 0%,rgba(37,99,235,.06),transparent 50%),var(--swy-light)}
body.auth-page:after{background-image:radial-gradient(circle,rgba(37,99,235,.08) 1px,transparent 1px)!important;background-size:28px 28px!important;opacity:.4!important}
body.dashboard-page,body.admin-page{background:var(--swy-light)!important;color:var(--swy-dark)!important}
body.dashboard-page:before,body.admin-page:before{background:var(--swy-light)!important;opacity:1!important}
body.dashboard-page:after,body.admin-page:after{background-image:radial-gradient(circle,rgba(37,99,235,.06) 1px,transparent 1px)!important;background-size:28px 28px!important;opacity:.4!important}

/* ══════ HEADER ══════ */
.site-header{background:rgba(240,244,255,.8)!important;border-bottom:1px solid rgba(37,99,235,.06)!important;backdrop-filter:blur(24px) saturate(1.6)!important;-webkit-backdrop-filter:blur(24px) saturate(1.6)!important;transition:all .4s ease}
.site-header.scrolled{background:rgba(255,255,255,.92)!important;box-shadow:0 4px 24px rgba(15,23,42,.06)}
.site-header.scrolled .nav-wrap{height:60px}
.site-header.header-hide{transform:translateY(-100%)}
.nav-wrap{transition:height .35s ease}
.brand-mark{background:var(--swy-dark)!important;color:#fff!important;box-shadow:0 6px 20px rgba(15,23,42,.15)!important;font-size:.82rem}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.08)}
.brand-text strong{color:var(--swy-dark)!important}
.brand-text em{color:var(--swy-slate)!important}
.site-nav>a{color:var(--swy-dark)!important;font-size:.88rem;font-weight:600;transition:color .25s ease}
.site-nav>a:hover{background:rgba(37,99,235,.06)!important;color:var(--swy-blue)!important}

/* ══════ BUTTONS ══════ */
.btn{font-size:.88rem;border-radius:999px!important;transition:all .3s ease;font-weight:700}
.btn:active{transform:scale(.97)!important}
.btn-dark,.btn-primary{background:var(--swy-dark)!important;color:#fff!important;border:none!important;box-shadow:0 6px 24px rgba(15,23,42,.15)!important}
.btn-dark:hover,.btn-primary:hover{box-shadow:0 10px 36px rgba(15,23,42,.22)!important;transform:translateY(-2px)}
.btn-outline{background:rgba(255,255,255,.6)!important;border:1.5px solid rgba(15,23,42,.1)!important;color:var(--swy-dark)!important;box-shadow:none!important;backdrop-filter:blur(8px)}
.btn-outline:hover{background:rgba(255,255,255,.9)!important;border-color:rgba(37,99,235,.2)!important;color:var(--swy-blue)!important}
.btn-light{background:#fff!important;color:var(--swy-dark)!important;box-shadow:0 6px 20px rgba(15,23,42,.08)}
.btn.compact{border-radius:999px!important}

/* ══════ EYEBROW ══════ */
.eyebrow{color:var(--swy-blue)!important;-webkit-text-fill-color:var(--swy-blue)!important;background:none!important;font-size:.72rem;letter-spacing:.18em;font-weight:800}
.eyebrow:before{background:linear-gradient(90deg,transparent,var(--swy-blue))!important}

/* ══════ HERO ══════ */
.studio-hero{padding:100px 0 80px!important}
.studio-hero:before{border-color:rgba(37,99,235,.05)!important;background:none!important}
.studio-hero-copy h1{color:var(--swy-dark)!important;-webkit-text-fill-color:var(--swy-dark)!important;background:none!important}
.studio-hero-copy .lead{color:var(--swy-slate)!important}
.studio-chipline{background:rgba(37,99,235,.06)!important;border:1px solid rgba(37,99,235,.12)!important;color:var(--swy-blue)!important}

/* ══════ PROOF ══════ */
.studio-proof div{background:rgba(255,255,255,.6)!important;border:1px solid rgba(37,99,235,.06)!important;border-radius:20px!important;box-shadow:none!important;backdrop-filter:blur(8px);transition:all .3s ease}
.studio-proof div:hover{background:rgba(255,255,255,.9)!important;box-shadow:var(--swy-shadow)!important;transform:translateY(-3px)}
.studio-proof strong{color:var(--swy-blue)!important}
.studio-proof span{color:var(--swy-slate)!important}

/* ══════ PREVIEW ══════ */
.preview-browser{background:rgba(255,255,255,.8)!important;border:1px solid rgba(37,99,235,.08)!important;box-shadow:0 30px 80px rgba(15,23,42,.1)!important;backdrop-filter:blur(12px)!important}
.browser-bar{background:rgba(240,244,255,.9)!important;border-bottom-color:rgba(37,99,235,.06)!important}
.browser-bar span{background:var(--swy-blue)!important;opacity:.3}
.browser-bar b{color:var(--swy-slate)!important}
.browser-title small{color:var(--swy-blue)!important}
.browser-title strong{color:var(--swy-dark)!important}
.mini-theme{border-color:rgba(37,99,235,.06)!important;transition:all .3s ease}
.mini-theme:hover{transform:scale(1.03);border-color:rgba(37,99,235,.15)!important}
.mini-theme span{color:var(--swy-dark)!important}

/* ══════ FLOATING ══════ */
.floating-phone-pro{box-shadow:0 30px 80px rgba(15,23,42,.12)!important;animation:floatPhone 6s ease-in-out infinite;border:1px solid rgba(37,99,235,.08)!important}
@keyframes floatPhone{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floating-status{background:rgba(255,255,255,.85)!important;border:1px solid rgba(37,99,235,.08)!important;color:var(--swy-dark)!important;backdrop-filter:blur(16px)!important;animation:chipFloat 4s ease-in-out infinite;box-shadow:0 12px 32px rgba(15,23,42,.06)!important}
.floating-status b{color:var(--swy-blue)!important}
.floating-status span{color:var(--swy-slate)!important}
.status-a{animation-delay:0s}.status-b{animation-delay:1.5s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ══════ PREMIUM STRIP ══════ */
.premium-strip{background:rgba(255,255,255,.5)!important;border:1px solid rgba(37,99,235,.06)!important;border-radius:24px!important}
.premium-strip div{background:rgba(255,255,255,.6)!important;min-height:160px!important;transition:all .3s ease}
.premium-strip div:hover{background:rgba(255,255,255,.95)!important;box-shadow:var(--swy-shadow)!important}
.premium-strip span{background:var(--swy-dark)!important;color:#fff!important}
.premium-strip strong{color:var(--swy-dark)!important}
.premium-strip p{color:var(--swy-slate)!important}

/* ══════ SECTION HEADS ══════ */
.section-head h2{color:var(--swy-dark)!important;-webkit-text-fill-color:var(--swy-dark)!important;background:none!important}
.section-head p{color:var(--swy-slate)!important}

/* ══════ BENTO ══════ */
.bento-card{background:rgba(255,255,255,.6)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:none!important;border-radius:24px!important;transition:all .35s ease;backdrop-filter:blur(8px)}
.bento-card:hover{background:rgba(255,255,255,.95)!important;box-shadow:var(--swy-shadow)!important;transform:translateY(-4px)}
.bento-card.large{background:linear-gradient(155deg,rgba(37,99,235,.04),rgba(255,255,255,.8))!important}
.bento-card.dark{background:var(--swy-dark)!important;color:#fff!important}
.bento-card.dark h3{color:#fff!important}
.bento-card span{color:var(--swy-blue)!important;-webkit-text-fill-color:var(--swy-blue)!important}
.bento-card h3{color:var(--swy-dark)!important}
.bento-card:before{background:radial-gradient(circle,rgba(37,99,235,.04),transparent 64%)!important}

/* ══════ THEME CARDS ══════ */
.pro-theme-card{background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:var(--swy-shadow)!important;border-radius:24px!important;transition:all .4s ease}
.pro-theme-card:hover{transform:translateY(-8px)!important;border-color:rgba(37,99,235,.12)!important;box-shadow:0 30px 80px rgba(15,23,42,.12)!important}
.theme-body{background:rgba(255,255,255,.5)}
.theme-body h3{color:var(--swy-dark)!important}
.theme-body p{color:var(--swy-slate)!important}
.theme-meta{color:var(--swy-slate)!important}
.theme-meta b{background:rgba(37,99,235,.08)!important;color:var(--swy-blue)!important;border-radius:999px!important}

/* ══════ PRICING ══════ */
.pricing-card{background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:none!important;border-radius:24px!important;transition:all .35s ease;color:var(--swy-dark)!important;backdrop-filter:blur(8px)}
.pricing-card:hover{background:rgba(255,255,255,.95)!important;box-shadow:var(--swy-shadow)!important;transform:translateY(-4px)}
.pricing-card.popular{background:var(--swy-dark)!important;border-color:transparent!important;color:#fff!important;transform:translateY(-8px)!important;box-shadow:0 30px 80px rgba(15,23,42,.18)!important}
.pricing-card.popular:hover{transform:translateY(-12px)!important;box-shadow:0 36px 100px rgba(15,23,42,.22)!important}
.pricing-card.popular h3,.popular .price{color:#fff!important;-webkit-text-fill-color:#fff!important}
.pricing-card p{color:var(--swy-slate)!important}.popular p{color:rgba(255,255,255,.6)!important}
.badge{background:rgba(37,99,235,.08)!important;border-color:rgba(37,99,235,.12)!important;color:var(--swy-blue)!important}
.popular .badge{background:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.8)!important;border-color:rgba(255,255,255,.15)!important}
.price{color:var(--swy-dark)!important;-webkit-text-fill-color:var(--swy-dark)!important;background:none!important}
.features li{color:var(--swy-slate)!important;transition:transform .2s ease}.features li:hover{transform:translateX(4px)}
.features li:before{color:var(--swy-blue)!important}
.popular .features li{color:rgba(255,255,255,.6)!important}.popular .features li:before{color:rgba(255,255,255,.5)!important}

/* ══════ CTA BAND ══════ */
.cta-band,.premium-cta{background:var(--swy-dark)!important;border:none!important;box-shadow:0 24px 64px rgba(15,23,42,.15)!important;border-radius:28px!important}
.cta-band h2{color:#fff!important}.cta-band p{color:rgba(255,255,255,.5)!important}
.cta-band .eyebrow{color:rgba(255,255,255,.5)!important;-webkit-text-fill-color:rgba(255,255,255,.5)!important}

/* ══════ GALLERY HERO ══════ */
.theme-gallery-hero:before{border-color:rgba(37,99,235,.04)!important}
.theme-gallery-layout h1{color:var(--swy-dark)!important}.theme-gallery-layout p{color:var(--swy-slate)!important}
.gallery-hero-card{background:rgba(255,255,255,.6)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:none!important;backdrop-filter:blur(8px);transition:all .3s ease}
.gallery-hero-card:hover{background:rgba(255,255,255,.95)!important;box-shadow:var(--swy-shadow)!important}
.gallery-hero-card strong{color:var(--swy-blue)!important}.gallery-hero-card span{color:var(--swy-slate)!important}

/* ══════ TOOLBAR ══════ */
.premium-toolbar,.theme-toolbar{background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:var(--swy-shadow)!important;backdrop-filter:blur(16px)!important}
.premium-toolbar strong,.theme-toolbar strong{color:var(--swy-dark)!important}
.premium-toolbar span,.theme-toolbar span{color:var(--swy-slate)!important}
.theme-toolbar input,.theme-toolbar select{background:rgba(240,244,255,.6)!important;border:1.5px solid rgba(37,99,235,.1)!important;color:var(--swy-dark)!important;border-radius:999px!important}
.theme-toolbar input:focus,.theme-toolbar select:focus{border-color:var(--swy-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
.theme-toolbar input::placeholder{color:var(--swy-slate)!important}

/* ══════ AUTH ══════ */
.auth-page .form-wrap{min-height:85vh;display:grid;place-items:center}
.auth-card{max-width:460px!important;margin:0 auto;padding:48px 36px!important;border-radius:28px!important;background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:var(--swy-shadow)!important;backdrop-filter:blur(16px)!important}
.auth-card:before{display:none!important}
.auth-card h1{color:var(--swy-dark)!important}.auth-card .eyebrow{color:var(--swy-blue)!important;-webkit-text-fill-color:var(--swy-blue)!important}
.auth-card .muted{color:var(--swy-slate)!important}
.auth-card .field label{color:var(--swy-dark)!important}
.auth-card .field input{background:rgba(240,244,255,.5)!important;border:1.5px solid rgba(37,99,235,.1)!important;color:var(--swy-dark)!important;border-radius:999px!important}
.auth-card .field input:focus{border-color:var(--swy-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important;background:#fff!important}
.auth-card .field input::placeholder{color:var(--swy-slate)}
.auth-card a{color:var(--swy-blue)!important}.auth-card p.small{color:var(--swy-slate)!important}

/* ══════ DASHBOARD ══════ */
.sidebar{background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:none!important;backdrop-filter:blur(12px)!important;border-radius:24px!important}
.sidebar-avatar{background:var(--swy-dark)!important;color:#fff!important}
.sidebar-title strong{color:var(--swy-dark)!important}.sidebar-title span{color:var(--swy-slate)!important}
.sidebar a{color:var(--swy-slate)!important;border-radius:999px!important;transition:all .25s ease;font-weight:600}
.sidebar a:hover{background:rgba(37,99,235,.06)!important;color:var(--swy-blue)!important;padding-left:20px}
.sidebar a.active{background:var(--swy-dark)!important;color:#fff!important;box-shadow:0 6px 20px rgba(15,23,42,.12)!important}
.dashboard-card,.form-card,.panel,.admin-card{background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:none!important;border-radius:24px!important;color:var(--swy-dark)!important;backdrop-filter:blur(8px)}
.form-card input,.form-card textarea,.form-card select{background:rgba(240,244,255,.5)!important;border:1.5px solid rgba(37,99,235,.1)!important;color:var(--swy-dark)!important;border-radius:14px!important}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:var(--swy-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
table td{background:rgba(255,255,255,.5)!important;color:var(--swy-dark)!important;border-color:rgba(37,99,235,.06)!important}
table th{color:var(--swy-slate)!important}
table tr:hover td{background:rgba(37,99,235,.04)!important}
.invitation-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.invitation-card{border-radius:24px!important;overflow:hidden;background:rgba(255,255,255,.7)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:none!important;transition:all .35s ease}
.invitation-card:hover{box-shadow:var(--swy-shadow)!important;transform:translateY(-4px)}
.invitation-card-cover{padding:28px 24px;min-height:150px;background:var(--swy-dark)!important;display:flex;justify-content:space-between;align-items:flex-start}
.invitation-card-cover h3{font-family:var(--serif);font-weight:400;font-size:2rem;letter-spacing:-.04em;line-height:.9;margin:10px 0 0;color:#fff}
.invitation-card-cover small{color:rgba(255,255,255,.5);font-weight:800;font-size:.78rem}
.invitation-card-body{padding:22px 24px}
.invitation-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.status{padding:6px 12px;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.status.active{background:rgba(34,197,94,.1);color:#16a34a}
.status.pending{background:rgba(234,179,8,.1);color:#ca8a04}
.status.draft{background:rgba(15,23,42,.06);color:var(--swy-slate)}
.copy-link{color:var(--swy-blue)!important;font-size:.88rem;word-break:break-all}

/* ══════ ALERTS ══════ */
.alert{background:rgba(255,255,255,.8)!important;border:1px solid rgba(37,99,235,.1)!important;color:var(--swy-dark)!important;border-radius:999px!important;box-shadow:none!important}
.alert span{background:var(--swy-dark)!important;color:#fff!important}

/* ══════ FOOTER ══════ */
.site-footer{background:var(--swy-dark)!important;border-top:none}
.site-footer:before{background:none!important}.site-footer:after{background:none!important}
.site-footer strong{color:rgba(255,255,255,.5)!important;text-transform:uppercase;font-size:.72rem;letter-spacing:.15em}
.site-footer p,.site-footer a{color:rgba(255,255,255,.4)!important}
.site-footer a:hover{color:#fff!important;transform:translateX(3px)}
.brand-light .brand-mark{background:#fff!important;color:var(--swy-dark)!important}
.brand-light .brand-text strong{color:#fff!important}
.brand-light .brand-text em{color:rgba(255,255,255,.4)!important}
.copyright{color:rgba(255,255,255,.2)!important;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .25s ease;text-decoration:none;font-size:.82rem;color:rgba(255,255,255,.5)!important;font-weight:800}
.footer-social a:hover{background:rgba(255,255,255,.12)!important;transform:translateY(-2px);color:#fff!important}

/* ══════ REVEAL ══════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ══════ MUTED/FIELDS ══════ */
.muted{color:var(--swy-slate)!important}
.field label{color:var(--swy-dark)!important}
.field input,.field select,.field textarea{background:rgba(240,244,255,.5)!important;border-color:rgba(37,99,235,.1)!important;color:var(--swy-dark)!important}

/* ══════ SCENE ══════ */
.theme-scene span{animation:sceneRotate 25s linear infinite}
@keyframes sceneRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ══════ MOBILE ══════ */
@media(max-width:820px){
body.nav-open:before{content:"";position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.2);backdrop-filter:blur(4px)}
.site-nav{z-index:85!important;background:rgba(255,255,255,.95)!important;border:1px solid rgba(37,99,235,.06)!important;box-shadow:0 20px 60px rgba(15,23,42,.1)!important;animation:slideDown .3s ease}
.site-nav>a{color:var(--swy-dark)!important}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.invitation-card-grid{grid-template-columns:1fr}
}

/* ══════ A11Y ══════ */
:focus-visible{outline:2px solid rgba(37,99,235,.4);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.floating-phone-pro,.floating-status{animation:none}}
@media print{.site-header,.site-footer,.invite-nav{display:none}body{background:#fff!important;color:#000!important}}