/* Sipulung — © 2026 Arifin Umar · Created by Arifin Umar */
:root {
  --latar: #0e1318; --panel: #171e26; --panel2: #1f2832; --garis: #2b3643; --teks: #e9eef3; --redup: #93a1b0;
  --aksen: #19b394; --aksen-gelap: #0e7c66; --bahaya: #e5484d; --kuning: #f5c542; --ubin: #222b35;
  --bulat: 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--latar); color: var(--teks); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
.tbl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; background: var(--aksen); color: #04231c; font-weight: 650; transition: filter .15s; }
.tbl:hover { filter: brightness(1.08); } .tbl:disabled { opacity: .5; cursor: default; }
.tbl.polos { background: var(--panel2); color: var(--teks); border: 1px solid var(--garis); font-weight: 550; }
.tbl.merah { background: var(--bahaya); color: #fff; }
.tbl.kecil { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.isian { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--garis); background: var(--latar); outline: none; }
.isian:focus { border-color: var(--aksen); }
label.baris { display: block; font-size: 13px; color: var(--redup); margin: 14px 0 6px; }
.galat { color: #ff8a8d; font-size: 14px; min-height: 20px; margin-top: 10px; }
.saklar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; cursor: pointer; }
.saklar input { appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--garis); position: relative; transition: background .15s; cursor: pointer; flex: none; margin: 0; }
.saklar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.saklar input:checked { background: var(--aksen); } .saklar input:checked::after { left: 21px; }
.kartu { background: var(--panel); border: 1px solid var(--garis); border-radius: var(--bulat); }
.merek { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: .2px; }
.merek img { width: 30px; height: 30px; }
.kaki { color: var(--redup); font-size: 12px; text-align: center; padding: 18px 16px; }
.kaki a { color: inherit; }
dialog { border: 1px solid var(--garis); border-radius: var(--bulat); background: var(--panel); color: var(--teks); padding: 24px; width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin: 0 0 4px; font-size: 19px; }
.aksi-dialog { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
svg.ik { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- beranda ---------- */
.beranda { min-height: 100%; display: flex; flex-direction: column; }
.beranda header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.beranda main { flex: 1; width: min(760px, 100%); margin: 0 auto; padding: 10px 16px 30px; }
.jam { text-align: center; margin: 26px 0 30px; }
.jam b { display: block; font-size: 58px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.jam span { color: var(--redup); font-size: 17px; }
.pintas { display: flex; justify-content: center; gap: 46px; margin-bottom: 36px; }
.pintas button { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; }
.pintas i { width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; background: var(--aksen); color: #04231c; transition: transform .15s; }
.pintas button:nth-child(2) i { background: #3b82f6; color: #fff; }
.pintas button:hover i { transform: translateY(-2px); } .pintas svg.ik { width: 34px; height: 34px; }
.daftar h3 { font-size: 15px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--garis); display: flex; justify-content: space-between; align-items: center; }
.daftar .kosong { padding: 26px 18px; color: var(--redup); text-align: center; }
.butir { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--garis); flex-wrap: wrap; }
.butir:last-child { border-bottom: 0; }
.butir .ket { flex: 1; min-width: 180px; } .butir .ket b { display: block; } .butir .ket small { color: var(--redup); }
.lencana { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--panel2); color: var(--redup); margin-left: 6px; vertical-align: 1px; }
.lencana.hidup { background: rgba(25, 179, 148, .18); color: var(--aksen); }

/* ---------- pra-gabung ---------- */
.tengah { min-height: 100%; display: grid; place-items: center; padding: 20px 16px; }
.pra { width: min(880px, 100%); display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; padding: 26px; align-items: center; }
.pratinjau { position: relative; aspect-ratio: 16/10; background: #000; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.pratinjau video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pratinjau .mati { position: absolute; color: var(--redup); }
.pratinjau .tombol { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.bundar { width: 46px; height: 46px; border-radius: 50%; background: rgba(30, 38, 48, .85); display: grid; place-items: center; backdrop-filter: blur(6px); }
.bundar.padam { background: var(--bahaya); }
.pra h1 { font-size: 22px; margin: 14px 0 2px; } .pra .sub { color: var(--redup); font-size: 14px; }
.pesan-tengah { text-align: center; padding: 40px 30px; width: min(460px, 100%); }
.pesan-tengah h1 { font-size: 22px; margin: 18px 0 8px; } .pesan-tengah p { color: var(--redup); margin: 0 0 22px; }
.putar { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--garis); border-top-color: var(--aksen); animation: putar 1s linear infinite; margin: 0 auto; }
@keyframes putar { to { transform: rotate(360deg); } }

/* ---------- ruang rapat ---------- */
#rapat { height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr auto; }
#atas { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 14px; min-height: 48px; }
#atas .judul { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-weight: 600; max-width: 46vw; }
#atas .judul span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#atas .judul:hover { background: var(--panel2); }
#atas .waktu { color: var(--redup); font-variant-numeric: tabular-nums; font-size: 14px; }
#atas .kanan { margin-left: auto; display: flex; gap: 6px; }
.pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13px; background: var(--panel2); }
.pil svg.ik { width: 17px; height: 17px; }
#panggung { min-width: 0; min-height: 0; padding: 0 10px; display: flex; gap: 10px; }
#utama { flex: 1; min-width: 0; min-height: 0; display: none; position: relative; background: #000; border-radius: 12px; overflow: hidden; }
#utama video { width: 100%; height: 100%; object-fit: contain; }
#utama .nama { position: absolute; left: 10px; bottom: 10px; }
#kisi { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 10px; grid-auto-rows: minmax(0, 1fr); }
#panggung.sorot #utama { display: block; }
#panggung.sorot #kisi { flex: none; width: 210px; display: flex; flex-direction: column; overflow-y: auto; }
#panggung.sorot #kisi .ubin { flex: none; aspect-ratio: 16/10; }
.ubin { position: relative; background: var(--ubin); border-radius: 12px; overflow: hidden; display: grid; place-items: center; min-height: 0; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s; }
.ubin.bicara { outline-color: var(--aksen); }
.ubin video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ubin.saya video { transform: scaleX(-1); }
.ubin .inisial { width: clamp(52px, 26%, 110px); aspect-ratio: 1; border-radius: 50%; background: var(--aksen-gelap); display: grid; place-items: center; font-size: clamp(20px, 4vw, 40px); font-weight: 700; }
.nama { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; background: rgba(10, 14, 18, .72); font-size: 13px; }
.nama span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nama svg.ik { width: 15px; height: 15px; color: #ff7b7f; }
.ubin .tangan { position: absolute; top: 8px; left: 8px; font-size: 22px; background: rgba(10, 14, 18, .72); border-radius: 8px; padding: 2px 7px; }
.ubin .letup { position: absolute; right: 12px; bottom: 12px; font-size: 44px; animation: letup 4s ease-out forwards; pointer-events: none; }
@keyframes letup { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 12% { transform: translateY(0) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-70px) scale(1); opacity: 0; } }

#samping { width: 340px; margin-right: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#samping .kepala { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--garis); font-weight: 650; }
#samping .isi { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
#samping .bawah { padding: 10px; border-top: 1px solid var(--garis); display: flex; gap: 8px; }
.seksi { font-size: 12px; color: var(--redup); padding: 10px 8px 4px; text-transform: uppercase; letter-spacing: .6px; display: flex; justify-content: space-between; align-items: center; }
.org { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; position: relative; }
.org:hover { background: var(--panel2); }
.org .bulatan { width: 34px; height: 34px; border-radius: 50%; background: var(--aksen-gelap); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.org .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org .nm small { color: var(--redup); }
.org .st { display: flex; gap: 6px; align-items: center; color: var(--redup); } .org .st svg.ik { width: 17px; height: 17px; } .org .st .mati { color: #ff7b7f; }
.pesan { padding: 6px 8px; } .pesan b { font-size: 13px; } .pesan small { color: var(--redup); margin-left: 6px; font-size: 11px; }
.pesan p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pesan.sistem { color: var(--redup); font-size: 13px; text-align: center; }

#bilah { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 10px 10px; overflow-x: auto; }
#bilah .sekat { flex: 1; max-width: 60px; }
.alat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 74px; padding: 7px 8px; border-radius: 10px; font-size: 12px; color: var(--teks); flex: none; }
.alat:hover { background: var(--panel2); }
.alat.padam svg.ik { color: #ff7b7f; } .alat.nyala { color: var(--aksen); }
.alat .hitung { position: absolute; top: 3px; right: 14px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bahaya); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.alat .hitung.abu { background: var(--garis); }
.gandeng { display: flex; align-items: stretch; flex: none; }
.gandeng .panah { padding: 0 3px; border-radius: 8px; color: var(--redup); align-self: center; height: 34px; } .gandeng .panah:hover { background: var(--panel2); }
.gandeng .panah svg.ik { width: 14px; height: 14px; }
#keluar { background: var(--bahaya); color: #fff; padding: 10px 20px; border-radius: 10px; font-weight: 650; margin-left: 8px; flex: none; }

.menu { position: fixed; z-index: 50; min-width: 220px; max-width: min(340px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--panel2); border: 1px solid var(--garis); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.menu .jdl { font-size: 12px; color: var(--redup); padding: 8px 10px 4px; }
.menu button.mi { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; }
.menu button.mi:hover { background: var(--garis); } .menu button.mi.merah { color: #ff8a8d; } .menu button.mi.pilih { color: var(--aksen); }
.menu hr { border: 0; border-top: 1px solid var(--garis); margin: 6px 0; }
.menu .emoji { display: flex; gap: 2px; padding: 4px; } .menu .emoji button { font-size: 26px; padding: 6px 8px; border-radius: 8px; } .menu .emoji button:hover { background: var(--garis); }
.menu .saklar { padding: 8px 10px; } .menu .info { padding: 8px 10px; font-size: 14px; } .menu .info small { display: block; color: var(--redup); font-size: 12px; } .menu .info b { user-select: all; }
#roti { position: fixed; left: 50%; top: 62px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.roti { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--garis); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); font-size: 14px; animation: masuk .2s ease-out; }
@keyframes masuk { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 820px) {
  .pra { grid-template-columns: 1fr; padding: 18px; }
  .pintas { gap: 28px; } .jam b { font-size: 46px; }
  #samping { position: fixed; inset: 0; width: auto; margin: 0; z-index: 40; border-radius: 0; }
  #panggung.sorot { flex-direction: column; } #panggung.sorot #kisi { width: auto; flex-direction: row; height: 96px; overflow-x: auto; overflow-y: hidden; } #panggung.sorot #kisi .ubin { height: 100%; aspect-ratio: 4/3; }
  #bilah { justify-content: flex-start; } .alat { min-width: 62px; } #bilah .sekat { display: none; }
  #atas { gap: 8px; } #atas .judul { max-width: 40vw; }
  .gandeng .panah { display: none; } .alat { min-width: 56px; padding: 6px 4px; font-size: 11px; } .alat > span:not(.hitung) { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alat .hitung { right: 6px; } #keluar { padding: 9px 14px; margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition: none !important; } }

/* 03/10/2026: akun (masuk/daftar) + pilihan undangan */
.akun-kepala { display: flex; align-items: center; gap: 10px; min-width: 0; }
.akun-kepala span { color: var(--redup); font-size: 14px; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-akun { display: flex; gap: 4px; padding: 4px; background: var(--latar); border: 1px solid var(--garis); border-radius: 10px; margin-bottom: 6px; }
.tab-akun button { flex: 1; padding: 9px 0; border-radius: 7px; font-weight: 600; color: var(--redup); }
.tab-akun button.aktif { background: var(--panel2); color: var(--teks); }
.tautan { display: block; margin: 16px auto 0; color: var(--redup); font-size: 13px; text-decoration: underline; }
.tautan:hover { color: var(--teks); }
.ket-dialog { color: var(--redup); font-size: 14px; margin: 4px 0 12px; }
.pilihan { display: block; width: 100%; text-align: left; padding: 13px 14px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--garis); background: var(--latar); }
.pilihan:hover { border-color: var(--aksen); }
.pilihan b { display: block; } .pilihan small { display: block; color: var(--redup); font-size: 13px; margin-top: 2px; }
/* 04/10/2026: verifikasi email + tombol Google */
#tblGoogle { display: flex; justify-content: center; min-height: 44px; margin-top: 8px; color-scheme: light; }
.atau { display: flex; align-items: center; gap: 10px; color: var(--redup); font-size: 12px; margin: 14px 0 2px; }
.atau::before, .atau::after { content: ""; flex: 1; border-top: 1px solid var(--garis); }
.isian.kode { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 10px; padding-left: 24px; }
[hidden] { display: none !important; }