/* Premium Barongsai auth theme — shared by login & register */
:root{
  --red:#8f1620; --red-dk:#4a0a10; --black:#0c0708; --ink:#1a1012;
  --gold:#d9b24e; --gold-lt:#f2dc94; --gold-dk:#8a6d1a; --ivory:#fdf6e6;
  --orange:#ff7a1a;
  --glass:rgba(22,10,12,.55); --glass-bd:rgba(217,178,78,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden}
body{
  font-family:'Poppins',system-ui,sans-serif; color:var(--ivory);
  background:radial-gradient(1200px 700px at 78% 42%, #5c0d16 0%, #2a070c 42%, var(--black) 100%);
  overflow:hidden;
}
a{text-decoration:none}

/* ===== stage & background layers ===== */
.stage{position:fixed; inset:0; overflow:hidden}
.bg-glow{position:absolute; width:70vmax; height:70vmax; right:-8vmax; top:50%; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(255,140,30,.30) 0%, rgba(143,22,32,.18) 34%, transparent 68%);
  filter:blur(10px); pointer-events:none; animation:breathe 9s ease-in-out infinite}
.bg-vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.66) 100%)}
.bg-pattern{position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:screen;
  background-image:radial-gradient(circle at 20% 30%, var(--gold) 0 1.5px, transparent 2px),
                   radial-gradient(circle at 70% 60%, var(--gold) 0 1.5px, transparent 2px);
  background-size:44px 44px,60px 60px}
.bg-frame{position:absolute; inset:16px; border:1px solid rgba(217,178,78,.28); border-radius:14px; pointer-events:none}
.bg-frame::after{content:""; position:absolute; inset:6px; border:1px solid rgba(217,178,78,.14); border-radius:10px}

/* floating gold particles */
.particles{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.particles i{position:absolute; bottom:-12px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-lt),var(--gold) 60%,transparent);
  opacity:.0; animation:rise linear infinite}

/* ===== barongsai visual (right) ===== */
.visual{position:absolute; inset:0 0 0 44%; overflow:hidden; z-index:1;
  background:radial-gradient(60% 70% at 58% 48%, #43090f 0%, #260609 55%, var(--black) 100%)}
.v-glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(42% 48% at 58% 48%, rgba(255,140,40,.30), rgba(143,22,32,.14) 48%, transparent 72%)}
.v-float{position:absolute; inset:0; animation:float 12s ease-in-out infinite}
.visual-img{position:absolute; inset:3% 3% 0 3%; will-change:transform;
  background:radial-gradient(closest-side ellipse at 52% 55%, rgba(90,12,16,0) 42%, rgba(70,10,14,.85) 100%),
             url('../images/sertifikat/hero-barongsai.png') no-repeat center bottom;
  background-size:cover, contain; background-blend-mode:multiply, normal;
  filter:drop-shadow(-26px 26px 40px rgba(0,0,0,.6)) contrast(1.07) saturate(1.08);
  -webkit-mask-image:radial-gradient(closest-side ellipse at 52% 55%, #000 50%, transparent 80%);
          mask-image:radial-gradient(closest-side ellipse at 52% 55%, #000 50%, transparent 80%)}
.visual::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(80% 90% at 55% 50%, transparent 52%, rgba(0,0,0,.5) 100%),
             linear-gradient(90deg, var(--black) 0%, transparent 22%)}

/* ===== layout ===== */
.wrap{position:relative; z-index:5; height:100%; display:flex; align-items:center;
  padding:5vh 7vw; max-width:1500px; margin:0 auto}

/* ===== glass card ===== */
.card{position:relative; width:min(430px,92vw);
  background:var(--glass); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--glass-bd); border-radius:24px; padding:38px 34px 30px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 40px -14px rgba(217,178,78,.4);
  transform-style:preserve-3d; transition:transform .25s ease;
  animation:cardIn .9s cubic-bezier(.2,.7,.2,1) both}
.card::before{content:""; position:absolute; inset:-1px; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(242,220,148,.7), transparent 30%, transparent 70%, rgba(242,220,148,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}

.brand{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.brand img{width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.brand .bt{font-family:'Cinzel',serif; font-weight:700; letter-spacing:.06em; line-height:1;
  font-size:18px; color:var(--gold-lt)}
.brand .bs{font-size:10.5px; letter-spacing:.22em; color:#c9a24a; text-transform:uppercase}

.card h1{font-family:'Cinzel',serif; font-size:26px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,var(--gold-lt) 60%,var(--gold)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:4px}
.card .sub{font-size:12.5px; color:#d9c7a6; opacity:.85; margin-bottom:22px}

#inputMessage:not(:empty){margin-bottom:12px}

.field{margin-bottom:14px}
.field label{display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#e8d3a3; margin:0 2px 6px}
.field-in{position:relative; display:flex; align-items:center;
  background:rgba(10,5,6,.55); border:1px solid rgba(217,178,78,.28); border-radius:13px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5); transition:border-color .2s, box-shadow .2s}
.field-in::before{font-family:'FontAwesome'; position:absolute; left:14px; color:var(--gold);
  font-size:15px; opacity:.9; pointer-events:none}
.field.user .field-in::before{content:'\f007'}
.field.pass .field-in::before{content:'\f023'}
.field.name .field-in::before{content:'\f2c0'}
.field.mail .field-in::before{content:'\f0e0'}
.field-in:focus-within{border-color:var(--gold); box-shadow:inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(217,178,78,.18), 0 0 18px -4px rgba(255,150,40,.55)}
.field-in input.form-control{flex:1 1 0; min-width:0; width:100%; background:transparent; border:none; outline:none;
  color:var(--ivory); font-size:14.5px; font-family:inherit; padding:13px 14px 13px 40px}
.field-in input::placeholder{color:#9a8a74}
.eye{display:flex; align-items:center; justify-content:center; width:44px; align-self:stretch;
  color:var(--gold); border-left:1px solid rgba(217,178,78,.2)}
.eye i{color:var(--gold)}
.err{min-height:0; font-size:12px; margin:5px 2px 0; color:#ff8a8a}
.err:empty{margin:0}

.row-opts{display:flex; align-items:center; justify-content:space-between; margin:6px 2px 20px; font-size:12.5px}
.rmb{display:flex; align-items:center; gap:8px; color:#d9c7a6; cursor:pointer; user-select:none}
.rmb input{position:absolute; opacity:0; width:0; height:0}
.rmb .box{width:17px; height:17px; border-radius:5px; border:1px solid rgba(217,178,78,.5);
  background:rgba(10,5,6,.5); display:inline-flex; align-items:center; justify-content:center; transition:.2s}
.rmb .box i{font-size:10px; color:var(--black); opacity:0; transition:.15s}
.rmb input:checked + .box{background:linear-gradient(180deg,var(--gold-lt),var(--gold)); border-color:var(--gold)}
.rmb input:checked + .box i{opacity:1}
.rmb input:focus-visible + .box{box-shadow:0 0 0 3px rgba(217,178,78,.35)}
.forgot{color:#e0b955}
.forgot:hover{color:var(--gold-lt); text-shadow:0 0 10px rgba(255,150,40,.5)}

/* ===== premium gold button ===== */
.btn-gold{position:relative; width:100%; overflow:hidden; cursor:pointer;
  font-family:'Cinzel',serif; font-weight:700; font-size:15px; letter-spacing:.14em; color:#3a230a;
  padding:14px 18px; border:none; border-radius:14px;
  background:linear-gradient(180deg,#f6e29a 0%,var(--gold) 46%,#a9812b 100%);
  box-shadow:0 10px 22px -8px rgba(217,178,78,.6), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(120,80,10,.5);
  transition:transform .12s ease, box-shadow .25s ease}
.btn-gold::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation:sweep 3.6s ease-in-out infinite}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(255,150,40,.6), inset 0 1px 0 rgba(255,255,255,.6)}
.btn-gold:active{transform:translateY(1px) scale(.995)}
.btn-gold:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(217,178,78,.45), 0 10px 22px -8px rgba(217,178,78,.6)}

.signup{text-align:center; margin-top:18px; font-size:12.5px; color:#c9b48c}
.signup a{color:var(--gold-lt); font-weight:500}
.signup a:hover{text-shadow:0 0 10px rgba(255,150,40,.5)}

/* ===== animations ===== */
@keyframes cardIn{from{opacity:0; transform:translateY(26px) scale(.98)} to{opacity:1; transform:none}}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
@keyframes breathe{0%,100%{opacity:.75; transform:translateY(-50%) scale(1)} 50%{opacity:1; transform:translateY(-50%) scale(1.06)}}
@keyframes sweep{0%,60%{left:-120%} 100%{left:130%}}
@keyframes rise{0%{opacity:0; transform:translateY(0)} 10%{opacity:.9} 90%{opacity:.7} 100%{opacity:0; transform:translateY(-102vh)}}

/* ===== responsive ===== */
@media (max-width:900px){
  body{overflow-x:hidden; overflow-y:auto}
  .visual{inset:0; left:0; opacity:.30}
  .wrap{display:block; padding:26px 14px; width:100%; max-width:100%}
  .card{display:block; width:100%; max-width:440px; margin:0 auto}
  .particles{display:none}
}
@media (max-width:480px){
  .card{padding:30px 22px 24px; border-radius:20px}
  .card h1{font-size:22px}
}

/* accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .visual-img{transform:none !important}
}