/* ==========================================================================
   REVIZA UI — satu file gaya bersama untuk SEMUA halaman (di-link sebagai
   "reviza-ui.css" di root, tidak ada folder lagi). File ini dimuat SETELAH
   blok <style> bawaan tiap halaman, jadi aturan di sini otomatis menang
   kalau nama class-nya sama — artinya semua efek global (nebula, hologram,
   loading screen, background, tombol) cukup diubah DI SATU TEMPAT INI saja,
   tidak perlu edit satu-satu tiap halaman lagi.
   ========================================================================== */

/* ---- ANTI-SALIN TEKS (lihat juga anti-copy.js) ---- */
html,body{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
input,textarea,[contenteditable],[contenteditable="true"],[data-copyable]{
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
  -webkit-touch-callout:default;
}
a,button,.btn,input,textarea,select,[role="button"]{cursor:pointer}
input,textarea{cursor:text}

/* ---- Cegah background "kosong putih" muncul sekilas saat overscroll/scroll
   cepat di HP (elastic bounce iOS & fling scroll Android). Tanpa ini, area di
   luar body yang ke-reveal saat overscroll defaultnya putih. ---- */
html{background:#050505}
html,body{overscroll-behavior-y:none}

/* ==========================================================================
   1) BACKGROUND — gradasi hitam ke abu-abu gelap, berlaku di semua halaman
   ========================================================================== */
body{
  background:
    radial-gradient(120% 65% at 50% -8%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,#131314 0%,#0a0a0b 30%,#0d0d0e 62%,#000 100%);
  background-attachment:fixed;
  transition:opacity .3s ease;
}

 /* ==========================================================================
    2) BACKGROUND VIDEO — selalu menempel ke viewport, termasuk saat browser
    mobile mengubah tinggi address bar. Ukuran viewport aktual disinkronkan
    oleh reviza-core.js melalui --rv-vh.
    ========================================================================== */
 .bg-video-wrap{
   position:fixed!important;
   top:0;right:auto;bottom:auto;left:0;
   width:100vw;
   height:100dvh;
   height:var(--rv-vh,100dvh);
   min-height:var(--rv-vh,100vh);
   z-index:0;
   overflow:hidden;
   background:#050505;
   pointer-events:none;
   transform:none;
   contain:strict;
   isolation:isolate;
 }
 .bg-video-wrap video{
   position:absolute;
   top:0;right:0;bottom:0;left:0;
   width:100%;height:100%;
   object-fit:cover;
   object-position:center;
   pointer-events:none;
   -webkit-user-select:none;
   user-select:none;
 }
.bg-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.5) 0%,rgba(5,5,5,.68) 45%,rgba(0,0,0,.82) 100%);pointer-events:none}
 @supports (-webkit-touch-callout:none){
   .bg-video-wrap{height:var(--rv-vh,100vh);min-height:0}
 }

/* ==========================================================================
   4) LOADING SCREEN — KHUSUS DI index.html (BERANDA) SAJA. Jangan tambah
   markup #loading di halaman lain — lihat catatan di reviza-core.js.
   ========================================================================== */
#loading{position:fixed;inset:0;z-index:1000;background:radial-gradient(130% 130% at 50% 28%,rgba(19,19,22,.97),rgba(2,2,3,.99));display:grid;place-items:center;transition:opacity .55s ease,visibility .55s ease}
#loading.hide{opacity:0;visibility:hidden;pointer-events:none}
.loading-box{text-align:center;width:min(300px,calc(100% - 40px))}
.loading-svg{display:block;margin:0 auto 20px;overflow:visible}
.loading-hex{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;transform-origin:50px 50px;animation:holoDraw 1s ease forwards,holoSpin 5.5s linear infinite .3s}
.loading-hex-inner{fill:none;stroke:#b7ff63;stroke-width:1.4;stroke-linejoin:round;transform-origin:50px 50px;animation:holoSpinRev 3.2s linear infinite}
.loading-core{fill:#fff;transform-origin:50px 50px;animation:holoBeat 1.1s ease-in-out infinite}
@keyframes holoDraw{to{stroke-dashoffset:0}}
@keyframes holoSpin{to{transform:rotate(360deg)}}
@keyframes holoSpinRev{to{transform:rotate(-360deg)}}
@keyframes holoBeat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
.loading-word{font:800 13px/1 Manrope,Arial,sans-serif;letter-spacing:.3em}
.loading-kicker{font:10px "DM Mono",monospace;color:#888;letter-spacing:.14em;text-transform:uppercase;margin-top:10px}
.loading-status{font-size:11px;color:#aaa;margin:14px 0 8px}
.loading-progress{height:2px;background:#222;border-radius:5px;overflow:hidden}
.loading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#fff,#b7ff63);transition:width .12s}
@media(prefers-reduced-motion:reduce){.loading-hex,.loading-hex-inner,.loading-core{animation:none!important}}

/* ==========================================================================
   5) TRANSISI FADE ANTAR HALAMAN & SAAT SCROLL
   ========================================================================== */
html.rv-leaving body{opacity:0;transition:opacity .24s ease}
html.rv-enter body{animation:rvPageFadeIn .34s ease both}
@keyframes rvPageFadeIn{from{opacity:0}to{opacity:1}}
main section.rv-reveal{opacity:0;transform:none;transition:opacity .44s ease}
main section.rv-reveal.rv-in{opacity:1}
.risk-modal{opacity:0;transform:none!important;transition:opacity .28s ease}
.rv-modal-overlay.show .risk-modal{opacity:1}
@media(prefers-reduced-motion:reduce){
  html.rv-enter body{animation:none}
  main section.rv-reveal{transition:none;opacity:1}
  html.rv-leaving body{opacity:1;transition:none}
  .risk-modal{transition:none;opacity:1}
}

/* ==========================================================================
   6) TOMBOL — outline gradient putih → hitam di SEMUA tombol/ikon bulat
   ========================================================================== */
.btn,.menu-toggle{
  border:1.5px solid transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#ffffff 0%,#9a9a9a 45%,#050505 100%);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.btn:hover,.menu-toggle:hover{
  background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(135deg,#ffffff 0%,#9a9a9a 45%,#050505 100%);
}
.rv-logout-btn{
  border:1.5px solid transparent;
  background-image:linear-gradient(#0d0d0d,#0d0d0d),linear-gradient(135deg,#ff9d9d 0%,#7a1f1f 55%,#050505 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.rv-logout-btn:hover{background-image:linear-gradient(#1a0d0d,#1a0d0d),linear-gradient(135deg,#ff9d9d 0%,#7a1f1f 55%,#050505 100%)}
.drawer-close,.lightbox-close,.rv-modal-close{
  border:1.5px solid transparent;
  background-image:linear-gradient(#101010,#101010),linear-gradient(135deg,#ffffff 0%,#5a5a5a 55%,#050505 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
}

/* ---- IKON di depan tombol/link (lihat wireButtonIcons di reviza-core.js) ---- */
.rv-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.rv-ic svg{display:block}
.drawer-links a,.social-links a{display:flex;align-items:center;gap:11px}
.btn-order{gap:5px!important}
.btn-order .rv-ic svg{width:9px;height:9px}
.jb-icon-btn .rv-ic svg{width:14px;height:14px}
.auth-login .rv-ic,.faq-contact .btn .rv-ic{margin-right:1px}

/* ---- NAVBAR AUTH (tombol login / chip user) ---- */
.auth-slot{display:flex;align-items:center;gap:10px}
.auth-login{padding:9px 16px;font-size:11px;white-space:nowrap}
.auth-chip{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid #2c2c2c;border-radius:999px;padding:5px 14px 5px 5px;color:#fff;transition:border-color .2s,background .2s}
.auth-chip:hover{border-color:#fff}
.auth-chip img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#222;border:1px solid #333}
.auth-chip span{font-size:12px;font-weight:700;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){.auth-chip span{max-width:64px}.auth-login{padding:9px 12px;font-size:10px}}

/* ---- PROFIL DI DALAM DRAWER (foto + nama akun Google) ---- */
.drawer-profile{display:flex;align-items:center;gap:12px;border:1px solid #2c2c2c;border-radius:14px;padding:12px 14px;margin-bottom:18px;color:#fff}
.drawer-profile:hover{border-color:#fff}
.drawer-profile img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#222;border:1px solid #333;flex:none}
.drawer-profile span{min-width:0;display:flex;flex-direction:column}
.drawer-profile strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-profile small{font-size:10.5px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}

/* ---- MODAL DASAR (dipakai coming-soon & profil) — selalu tersembunyi
   secara default lewat inline-safety di JS juga, ini lapisan CSS-nya ---- */
.rv-modal-overlay{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.rv-modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.rv-modal{position:relative;width:min(380px,100%);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#141414,#0a0a0a);border:1px solid #282828;border-radius:18px;padding:28px 24px 24px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.55);transform:scale(.95);transition:transform .25s ease}
.rv-modal-overlay.show .rv-modal{transform:scale(1)}
.rv-modal h3{font-size:20px;margin:4px 0 10px}
.rv-modal p{color:#a7a7a7;font-size:13px;margin-bottom:18px}
.rv-modal-icon{font-size:34px;margin-bottom:6px}
.rv-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;color:#fff;border-radius:50%;cursor:pointer;font-size:13px;line-height:1}

/* ---- FORM PROFIL PENGGUNA ---- */
.rv-profile-form{display:grid;gap:12px;text-align:left}
.rv-profile-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#1a1a1a;border:1px solid #2c2c2c;margin:0 auto 4px}
.rv-profile-form label{display:block;font-size:11px;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rv-profile-form input{width:100%;margin-top:6px;background:#101010;border:1px solid #2c2c2c;border-radius:10px;padding:11px 13px;color:#fff;font-size:13px;font-weight:400;text-transform:none;letter-spacing:normal}
.rv-profile-form input:focus{outline:none;border-color:#fff}
.rv-profile-email{color:#777;font-weight:400;text-transform:none;letter-spacing:normal}
.rv-profile-email span{color:#ccc}
.rv-profile-actions{display:flex;gap:10px;margin-top:4px}
.rv-profile-actions .btn{flex:1}
.rv-profile-msg{font-size:11px;color:#b7ff63;min-height:14px;text-align:center}

/* ---- ADMIN DASHBOARD (admin.html) ---- */
.admin-field{display:block;font-size:11px;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:14px}
.admin-field:first-child{margin-top:0}
.admin-field input,.admin-field textarea{width:100%;margin-top:8px;background:#101010;border:1px solid #2c2c2c;border-radius:10px;padding:12px 14px;color:#fff;font-size:13px;font-family:inherit;resize:vertical}
.admin-field input:focus,.admin-field textarea:focus{outline:none;border-color:#fff}
.admin-warning{color:#ffb84d;font-size:11px;margin-top:12px;line-height:1.6}