/* Gaya tambahan untuk laman jualan, papan pemuka dan panel super-admin. */
.page-shell { position: relative; z-index: 1; min-height: 100vh; }
.panel { padding: 1.25rem; }
@media (min-width: 640px) { .panel { padding: 1.6rem; } }
.metric { padding: 1.1rem 1.2rem; border-radius: 1.2rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); }
.metric strong { display: block; font-family: 'Fraunces', serif; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgb(var(--muted)); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; border-radius: 1.4rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); transition: transform 0.35s var(--ease-spring), border-color 0.3s; }
.plan-card:hover { transform: translateY(-4px); border-color: rgb(var(--gold) / 0.6); }
.plan-card.is-featured { border-color: rgb(var(--gold)); box-shadow: 0 24px 50px -30px rgb(var(--gold) / 0.7); }
.plan-card .price { font-family: 'Fraunces', serif; font-size: 2.1rem; font-weight: 600; line-height: 1; }
.plan-card ul li { display: flex; gap: 0.55rem; font-size: 0.86rem; line-height: 1.45; }
.plan-card ul li i { color: rgb(var(--gold)); margin-top: 0.2rem; }
.plan-ribbon { position: absolute; top: -0.7rem; right: 1.1rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgb(var(--gold)); color: #1B1713; }
.event-row { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: 1.2rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); }
@media (min-width: 768px) { .event-row { flex-direction: row; align-items: center; } }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th { text-align: left; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--muted)); font-weight: 700; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgb(var(--line)); }
.data-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid rgb(var(--line) / 0.7); vertical-align: middle; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: rgb(var(--muted)); }
.empty-state i { font-size: 1.8rem; color: rgb(var(--gold)); margin-bottom: 0.75rem; display: block; }
.step-num { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; background: rgb(var(--gold) / 0.14); color: rgb(var(--gold)); border: 1px solid rgb(var(--gold) / 0.35); }
.faq details { border-bottom: 1px solid rgb(var(--line)); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: rgb(var(--gold)); font-weight: 700; transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 0.6rem; font-size: 0.9rem; color: rgb(var(--muted)); line-height: 1.6; }