/* Sipulung — beranda bergaya ruang rapat eksekutif (kayu gelap + emas), mengikuti gambar kiriman Arifin 04/10/2026; palet TEMBAGA mengikuti logo SP kiriman Arifin (04/10 dini hari).
   © 2026 Arifin Umar · Created by Arifin Umar */
body.mewah {
  --latar: #131110; --panel: #1c1917; --panel2: #2a2421; --garis: #43352e; --teks: #f4ece7; --redup: #bcaba2;
  --aksen: #cf9778; --aksen-gelap: #98674f; --emas-terang: #f0cdb9; --ubin: #241f1c;
  background: var(--latar);
}
body.mewah .tbl { color: #20120b; }
body.mewah .tbl.polos { color: var(--teks); background: rgba(42, 36, 33, .72); border-color: rgba(207, 151, 120, .38); }
body.mewah .tbl.polos:hover { border-color: var(--aksen); }
body.mewah .lencana { background: rgba(207, 151, 120, .12); color: var(--aksen); }
body.mewah .lencana.hidup { background: rgba(207, 151, 120, .22); color: var(--emas-terang); }
body.mewah dialog { box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
body.mewah dialog::backdrop { background: rgba(8, 5, 3, .72); backdrop-filter: blur(3px); }
body.mewah .tab-akun button.aktif { color: var(--emas-terang); }

/* latar: foto ruang rapat, digelapkan di sisi isi supaya tulisan terbaca */
.mewah .latar { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #131110 url(/latar.jpg?v=2) center / cover no-repeat; }
.mewah .latar::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(14, 12, 11, .93) 0%, rgba(14, 12, 11, .84) 26%, rgba(14, 12, 11, .38) 42%, rgba(14, 12, 11, .04) 58%, rgba(14, 12, 11, .08) 100%),
  linear-gradient(180deg, rgba(14, 12, 11, .42) 0%, rgba(14, 12, 11, 0) 18%, rgba(14, 12, 11, 0) 78%, rgba(14, 12, 11, .6) 100%); }
.mewah .beranda { position: relative; z-index: 1; min-height: 100%; }
.mewah .beranda header { padding: 20px clamp(18px, 4vw, 56px); }
.mewah .merek { gap: 12px; color: var(--emas-terang); }
.mewah .merek img { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(207, 151, 120, .45), 0 6px 18px rgba(0, 0, 0, .5); }
.mewah .merek span { display: block; line-height: 1.15; }
.mewah .merek b { display: block; font-size: 17px; font-weight: 650; letter-spacing: .32em; }
.mewah .merek small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--aksen); margin-top: 3px; }
.mewah .akun-kepala span { color: var(--emas-terang); }

.mewah .beranda main { width: 100%; max-width: none; margin: 0; padding: clamp(10px, 4vh, 48px) clamp(18px, 4vw, 56px) 30px; }
.mewah .sambut, .mewah .beranda main > .daftar { width: min(500px, 100%); }
.mewah .pita { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--aksen); }
.mewah .pita::before { content: ""; width: 34px; border-top: 1px solid var(--aksen); }
.mewah h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.mewah h1 em { font-style: normal; background: linear-gradient(100deg, #f0cdb9, #cf9778 55%, #a8745a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mewah .ulas { margin: 16px 0 0; max-width: 470px; font-size: 16px; color: var(--redup); }

.mewah .jam { text-align: left; margin: 26px 0 22px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mewah .jam b { display: inline; font-size: 40px; font-weight: 650; letter-spacing: .02em; color: var(--emas-terang); }
.mewah .jam span { font-size: 15px; }

.mewah .pintas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; justify-content: stretch; margin: 0 0 22px; }
.mewah .pintas button { flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(207, 151, 120, .40); background: rgba(28, 25, 23, .66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s, border-color .15s, box-shadow .15s; }
.mewah .pintas button:hover { transform: translateY(-2px); border-color: var(--aksen); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.mewah .pintas button:first-child { background: linear-gradient(120deg, #ecc6b0, #cf9778 55%, #ab775c); border-color: transparent; color: #20120b; }
.mewah .pintas i { width: 48px; height: 48px; border-radius: 14px; flex: none; background: rgba(207, 151, 120, .16); color: var(--emas-terang); }
.mewah .pintas button:nth-child(2) i { background: rgba(207, 151, 120, .16); color: var(--emas-terang); }
.mewah .pintas button:first-child i { background: rgba(32, 18, 11, .16); color: #20120b; }
.mewah .pintas button:hover i { transform: none; } .mewah .pintas svg.ik { width: 26px; height: 26px; }
.mewah .pintas span { display: block; min-width: 0; } .mewah .pintas b { display: block; font-size: 17px; font-weight: 700; }
.mewah .pintas small { display: block; font-size: 12.5px; opacity: .78; margin-top: 1px; }

.mewah .unggul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 0 0 28px; }
.mewah .unggul li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 30px; font-size: 13px; color: var(--teks); background: rgba(28, 25, 23, .6); border: 1px solid rgba(207, 151, 120, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mewah .unggul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aksen); }

.mewah .kartu { background: rgba(28, 25, 23, .78); border-color: rgba(207, 151, 120, .24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mewah .beranda main > .daftar { margin-bottom: 18px; }
.mewah .daftar h3 { color: var(--emas-terang); letter-spacing: .02em; }
.mewah .kaki { position: relative; text-align: left; padding: 18px clamp(18px, 4vw, 56px) 22px; color: rgba(244, 237, 227, .6); }

/* HP / layar sempit: foto jadi panji di atas (dinding logo SP), isi di bawahnya */
@media (max-width: 1100px), (max-aspect-ratio: 3/2) {
  .mewah .latar { position: absolute; inset: 0 0 auto 0; height: min(52vh, 430px); background: #131110 url(/latar-hp.jpg?v=2) center 30% / cover no-repeat; }
  .mewah .latar::after { background: linear-gradient(180deg, rgba(14, 12, 11, .50) 0%, rgba(14, 12, 11, 0) 26%, rgba(14, 12, 11, .05) 58%, rgba(19, 17, 16, .88) 88%, #131110 100%); }
  .mewah .beranda main { padding-top: calc(min(52vh, 430px) - 96px); }
  .mewah .merek { text-shadow: 0 1px 8px rgba(0, 0, 0, .8); } .mewah .merek b { font-size: 14px; } .mewah .merek small { font-size: 9px; color: var(--emas-terang); }
  .mewah .sambut { max-width: 640px; }
  .mewah .sambut, .mewah .beranda main > .daftar { width: 100%; }
  .mewah h1 { font-size: 28px; } .mewah .ulas { font-size: 15px; margin-top: 10px; }
  .mewah .pita { margin-bottom: 10px; }
  .mewah .jam { margin: 16px 0 16px; } .mewah .jam b { font-size: 30px; } .mewah .jam span { font-size: 14px; }
  .mewah .pintas button { padding: 13px 12px; gap: 10px; } .mewah .pintas i { width: 42px; height: 42px; border-radius: 12px; } .mewah .pintas b { font-size: 16px; }
  .mewah .kaki { text-align: center; }
}
@media (max-width: 380px) { .mewah .pintas { grid-template-columns: 1fr; } }