/* Tema "Sakura Elegan" (pilihan A): kaca gelap, pink lembut, garis emas tipis.
   Dimuat SETELAH style-v8.css. Hapus <link> ke file ini kalau mau balik ke tampilan lama. */
:root{
  --bg:#140b26;
  --bg-soft:#1b1030;
  --surface:#231640;
  --surface-2:#2d1c52;
  --line:rgba(255,182,215,.28);
  --cream:#fdeef6;
  --muted:#c3b3dc;
  --amber:#ff9ccb;
  --amber-dim:#9a4672;
  --teal:#cdb0ff;
  --teal-dim:#6a4aa8;
  --gold:#e8c27a;
}

/* ---------- tombol ---------- */
.btn-primary{
  background:linear-gradient(120deg,#ff8fc2,#c79cff);border:0;color:#2a0f3d;
  box-shadow:0 10px 30px -10px rgba(255,143,194,.55);
}
.btn-primary:hover{box-shadow:0 14px 34px -8px rgba(255,143,194,.7)}
.btn-secondary,.btn-ghost{border-color:rgba(255,182,215,.35)}

/* ---------- kartu kaca (dipakai di halaman yang punya .card) ---------- */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(29,18,51,.74)!important;
  border:1px solid rgba(255,182,215,.34)!important;
  box-shadow:0 24px 70px -28px rgba(255,143,194,.35), inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.card::before{
  height:1px!important;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;opacity:.85;
}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number]{
  background:rgba(14,8,28,.55)!important;border-color:rgba(255,182,215,.25)!important;
}
input:focus{border-color:var(--amber)!important;box-shadow:0 0 0 3px rgba(255,156,203,.16)!important}
.switch a,.forgot-link{color:var(--amber)}

/* =====================================================
   HALAMAN MASUK / DAFTAR / LUPA PASSWORD  (body.auth-page)
   ===================================================== */
body.auth-page{background:#140b26}
.auth-art{
  position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,11,38,.18) 0%,rgba(20,11,38,.55) 42%,rgba(20,11,38,.93) 70%),
    url('img/auth-bg.jpg') center top/cover no-repeat;
}
.auth-quote{display:none}
@media (min-width:900px){
  .auth-art{
    width:50%;
    background:url('img/auth-bg.jpg') center top/cover no-repeat;
    -webkit-mask-image:linear-gradient(to right,#000 72%,transparent);mask-image:linear-gradient(to right,#000 72%,transparent);
  }
  .auth-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,11,38,.85),transparent 45%)}
  .auth-quote{
    display:block;position:absolute;left:44px;bottom:48px;max-width:380px;z-index:2;color:var(--cream);
    font-family:'Shippori Mincho',serif;
  }
  .auth-quote b{display:block;font-size:2rem;font-weight:700;color:var(--amber);letter-spacing:.02em;margin-bottom:6px}
  .auth-quote p{font-size:1.02rem;line-height:1.6;opacity:.92;border-left:2px solid var(--gold);padding-left:14px}
  body.auth-page .auth-wrap{margin-left:50%}
  body.auth-page .auth-wrap nav{justify-content:flex-start}
}
body.auth-page .glow{display:none}
@media (max-width:899px){body.auth-page .auth-main{align-items:flex-end;padding-top:150px}}

/* =====================================================
   DASHBOARD  (body.dash-page)
   ===================================================== */
body.dash-page{background:#140b26}
.dash-art{
  position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:#140b26;
}
.dash-art::before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:75vh;
  background:url('img/dash-bg.jpg') center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%);
}
.dash-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,11,38,.97) 0%,rgba(20,11,38,.9) 32%,rgba(20,11,38,.25) 70%,rgba(20,11,38,.05) 100%);
}
@media (min-width:1100px){
  body.dash-page .app-main .wrap{margin-left:40px;margin-right:0;max-width:640px}
}
@media (max-width:820px){
  .dash-art::before{display:none}
  .dash-art{background:radial-gradient(520px 340px at 85% 0%,rgba(255,143,194,.22),transparent 70%),radial-gradient(420px 300px at 0% 60%,rgba(160,110,255,.16),transparent 70%),#140b26}
  .dash-art::after{display:none}
}
body.dash-page .info-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
body.dash-page .app-shell{backdrop-filter:none}
body.dash-page .sidebar{
  background:linear-gradient(180deg,rgba(29,18,51,.82),rgba(20,11,38,.9));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid rgba(255,182,215,.22);
}
body.dash-page .side-link.active{background:rgba(255,156,203,.12);box-shadow:inset 3px 0 0 var(--gold)}
body.dash-page .side-icon{color:var(--amber)}
@media (max-width:820px){body.dash-page .side-link.active{box-shadow:inset 0 -3px 0 var(--gold)}}

body.dash-page .hero-status,
body.dash-page .info-card,
body.dash-page .section-card{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.015)),rgba(29,18,51,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,182,215,.32);
  box-shadow:0 24px 60px -30px rgba(255,143,194,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
body.dash-page .info-card::before,
body.dash-page .section-card::before{
  height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85;
}
body.dash-page .hero-status.is-active{border-color:rgba(232,194,122,.55)}
body.dash-page .hero-status.is-inactive{border-color:rgba(255,182,215,.4)}
body.dash-page .hero-status.is-active .hero-glow{background:radial-gradient(circle,rgba(232,194,122,.28),transparent 70%)}
body.dash-page .hero-status.is-inactive .hero-glow{background:radial-gradient(circle,rgba(255,156,203,.32),transparent 70%)}
body.dash-page .meter{background:rgba(14,8,28,.55);border-color:rgba(255,182,215,.25)}
body.dash-page .meter-fill{background:linear-gradient(90deg,var(--amber),var(--gold))}
body.dash-page .info-icon,body.dash-page .section-icon{background:rgba(255,156,203,.12);border-color:rgba(255,182,215,.3);color:var(--amber)}
body.dash-page .info-card .link{color:var(--amber)}
body.dash-page .dash-head h1{text-shadow:0 2px 20px rgba(20,11,38,.8)}

.hero-quote{
  position:relative;z-index:1;margin-top:18px;padding-left:14px;border-left:2px solid var(--gold);
  font-family:'Shippori Mincho',serif;font-size:1.02rem;line-height:1.6;color:var(--cream);opacity:.95;
}
.hero-quote small{display:block;margin-top:4px;font-family:'Zen Maru Gothic',sans-serif;font-size:.76rem;color:var(--muted);letter-spacing:.04em}


/* ---------- banner foto (khusus HP) ---------- */
.dash-banner{display:none}
.soon-hint{font-family:'Zen Maru Gothic',sans-serif;font-size:.7rem;font-weight:500;color:var(--muted);margin-left:8px}
.soon-card summary::-webkit-details-marker{display:none}
.soon-card:not([open]) .soon-grid{display:none}
.soon-card[open] .soon-hint{display:none}

@media (max-width:820px){
  /* foto jadi banner di bagian atas, ikut scroll (bukan layer tetap) -> tidak ada lagi loncatan bentuk */
  .dash-banner{display:block;position:relative;height:270px;margin:0 -28px;overflow:hidden}
  .dash-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(1.05) contrast(1.04)}
  .banner-fade{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(20,11,38,.55) 0%,rgba(20,11,38,0) 28%,rgba(20,11,38,.15) 55%,#140b26 100%),
    linear-gradient(135deg,rgba(255,143,194,.14),rgba(140,90,255,.18));mix-blend-mode:normal}
  /* butiran halus biar gambar tidak terasa "plastik" */
  .dash-banner::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
  .m-top{position:absolute;left:20px;top:16px;display:flex;align-items:center;gap:9px;z-index:2;font-family:'Shippori Mincho',serif;font-weight:700;color:var(--cream);text-shadow:0 2px 12px rgba(20,11,38,.8)}
  .m-top .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
  body.dash-page .dash{padding-top:0}
  body.dash-page .dash-head{margin-top:-96px;position:relative;z-index:2;margin-bottom:18px}
  body.dash-page .dash-head h1{font-size:1.55rem}

  /* tiga kartu info -> deretan tombol kecil */
  body.dash-page .info-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
  body.dash-page .info-card{padding:14px 8px;gap:4px;align-items:center;text-align:center}
  body.dash-page .info-card .top-row{flex-direction:column;gap:6px}
  body.dash-page .info-card .label,body.dash-page .info-card .sub{display:none}
  body.dash-page .info-card .value{font-size:.95rem}
  body.dash-page .info-card .link{font-size:.7rem;margin-top:2px}
  body.dash-page .info-icon{width:34px;height:34px}
  body.dash-page .hero-status{padding:24px 20px}

  /* blur berat bikin scroll patah-patah di HP -> kaca dibuat lebih pekat tanpa blur */
  body.dash-page .hero-status,body.dash-page .info-card,body.dash-page .section-card,.card{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),rgba(30,18,54,.9)!important;
  }
  .card{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(29,18,51,.86)!important}

  /* sidebar tetap berupa bar di atas (ikut scroll); di dalam aplikasi logo mengarah ke dashboard */
  html body .sidebar{background:#140b26!important;backdrop-filter:none!important;border-right:0!important;border-bottom:1px solid rgba(255,182,215,.22)}
  .m-top{display:none}
  #sakura{z-index:1}
}