/* SOVIA Login - merah-oranye yang memudar ke putih, grafik elegan beranimasi
   File: assets/css/login_sovia_soft.css */
:root{
  --red:#e60012;--red-2:#ff3b1a;--orange:#ff9a00;
  --grad:linear-gradient(135deg,#ff0a00 0%,#ff3b1a 55%,#ff8a00 100%);
  --ink:#1b1d22;--muted:#6b7280;--line:#d9dce5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);min-height:100vh;position:relative;overflow-x:hidden;
  background:
    radial-gradient(640px 460px at 8% 0%,rgba(255,120,60,.55),transparent 62%),
    radial-gradient(620px 520px at 100% 100%,rgba(255,184,140,.45),transparent 64%),
    linear-gradient(104deg,#c9000f 0%,#ff2a10 24%,#ff5f1c 40%,#ff9a55 50%,#ffd9c2 62%,#fff4ec 74%,#fff 86%);
  background-attachment:fixed;
}
h1,h2{font-family:'Poppins','Inter',sans-serif;margin:0}

/* ================= LATAR ================= */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 48% 70% at 22% 40%,#000 15%,transparent 78%);
          mask-image:radial-gradient(ellipse 48% 70% at 22% 40%,#000 15%,transparent 78%);
  animation:gridmove 18s linear infinite;
}
@keyframes gridmove{to{background-position:52px 52px}}
.bg .orb{position:absolute;border-radius:50%;filter:blur(70px);animation:drift 15s ease-in-out infinite alternate}
.bg .o1{width:340px;height:340px;background:rgba(255,255,255,.28);left:22%;top:-90px}
.bg .o2{width:380px;height:380px;background:rgba(255,196,140,.5);right:4%;top:14%;animation-delay:-5s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(44px,-34px) scale(1.16)}}
.bg svg.waves{position:absolute;left:0;bottom:0;width:100%;height:30vh}
.wave-a,.wave-b{animation:sway 10s ease-in-out infinite alternate}
.wave-b{animation-duration:13s;animation-direction:alternate-reverse}
@keyframes sway{from{transform:translateX(-28px)}to{transform:translateX(28px)}}

/* ================= LAYOUT ================= */
.page{
  position:relative;z-index:1;min-height:100vh;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:56px;
  padding:44px 40px 15vh;
}

/* ---------- Kiri ---------- */
.brand{min-width:0;color:#fff}
.b-top{display:flex;align-items:center;gap:14px}
/* logo tanpa lingkaran putih: diberi halo putih tipis agar tetap jelas di atas merah */
.b-top .lg{display:grid;place-items:center;flex:none;width:58px;height:58px}
.b-top img,.b-top .lg svg.fb{
  width:56px;height:56px;object-fit:contain;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 8px 14px rgba(90,0,0,.4));
}
.b-top .lg svg.fb{display:none}
.b-top b{font-family:'Poppins',sans-serif;font-size:19px;letter-spacing:.9px;display:block}
.b-top small{font-size:10.5px;letter-spacing:2px;opacity:.9}

.brand h2{font-size:35px;line-height:1.17;font-weight:700;margin:34px 0 12px;max-width:480px;letter-spacing:-.4px}
.brand h2 span{
  background:linear-gradient(90deg,#fff,#ffe3ad);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.brand p.lead{margin:0 0 26px;font-size:14.5px;color:rgba(255,255,255,.92);max-width:430px;line-height:1.6}

/* ---- grafik elegan ---- */
.chart{max-width:470px}
.c-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.c-head b{font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;letter-spacing:.3px}
.legend{display:flex;gap:14px;font-size:11.5px;color:rgba(255,255,255,.88)}
.legend i{display:inline-block;width:14px;height:3px;border-radius:3px;background:#fff;margin-right:6px;vertical-align:middle}
.legend i.d{background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 4px,transparent 4px 8px)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:'Inter',sans-serif;font-size:10px;fill:rgba(255,255,255,.78)}
.gl{stroke:rgba(255,255,255,.2);stroke-width:1;animation:glin 8s ease-in-out infinite}
@keyframes glin{0%{opacity:0}10%,90%{opacity:1}97%,100%{opacity:0}}

.line{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:drawloop 8s linear infinite}
.line2{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:.012 .012;opacity:0;animation:l2 8s ease-in-out infinite}
@keyframes drawloop{0%{stroke-dashoffset:1;opacity:1}45%{stroke-dashoffset:0}90%{stroke-dashoffset:0;opacity:1}97%{opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes l2{0%,18%{opacity:0}34%,90%{opacity:1}97%,100%{opacity:0}}
.area{opacity:0;animation:areain 8s ease-in-out infinite}
@keyframes areain{0%,12%{opacity:0}48%,90%{opacity:1}97%,100%{opacity:0}}
.pt{opacity:0;transform-box:fill-box;transform-origin:center;animation:ptin 8s ease-in-out infinite;animation-delay:var(--pd,0s)}
@keyframes ptin{0%{opacity:0;transform:scale(.3)}8%{opacity:1;transform:scale(1)}85%{opacity:1}95%,100%{opacity:0}}
.dotg{animation:dotfade 8s linear infinite}
@keyframes dotfade{0%{opacity:1}92%{opacity:1}98%,100%{opacity:0}}

.co{margin-top:26px;font-size:12px;letter-spacing:.8px;color:#000}
.co b{display:block;font-family:'Poppins',sans-serif;font-size:14.5px;letter-spacing:0;color:#000;margin-bottom:2px}
.chip{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:6px 14px;border-radius:999px;font-size:12px;color:#000;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);
}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ee59d;box-shadow:0 0 0 3px rgba(46,229,157,.3)}
.chip p{margin:0}

/* ---------- Kanan : form (di area terang) ---------- */
.form{
  width:100%;max-width:410px;margin:0 auto;
  padding:34px 32px 28px;
  border:1px solid #efddd6;border-radius:22px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 56px rgba(230,60,20,.12);
}
.welcome{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  padding:6px 13px;border-radius:999px;font-size:12px;font-weight:600;color:var(--red);
  background:#fff1ee;border:1px solid rgba(230,0,18,.16);
}
.welcome i{width:7px;height:7px;border-radius:50%;background:var(--red-2);animation:pulse 1.8s ease infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,26,.5)}100%{box-shadow:0 0 0 9px rgba(255,59,26,0)}}
.form h1{font-size:28px;font-weight:700;color:var(--ink)}
.sub{margin:8px 0 26px;color:var(--muted);font-size:14.5px}

.field{position:relative;margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:500;color:#4b5260;margin-bottom:7px}
.field input{
  width:100%;height:52px;padding:0 48px 0 46px;border:1px solid var(--line);border-radius:13px;background:#fff;
  font:inherit;font-size:15px;color:var(--ink);transition:box-shadow .2s,border-color .2s;
}
.field input::placeholder{color:#a3a9b5}
.field input:hover{border-color:#c2c7d3}
.field input:focus{outline:0;border-color:var(--red-2);box-shadow:0 0 0 4px rgba(255,59,26,.13)}
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #fff inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.field .ic{position:absolute;left:15px;bottom:14px;width:22px;height:22px;display:grid;place-items:center;color:#9aa1ad;pointer-events:none;transition:color .2s}
.field .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.field:focus-within .ic{color:var(--red-2)}
.eye{position:absolute;right:7px;bottom:8px;width:36px;height:36px;border:0;background:transparent;color:#6b7280;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.eye:hover{background:#f3f4f7;color:var(--red)}

.btn{
  position:relative;overflow:hidden;width:100%;height:54px;border:0;border-radius:14px;cursor:pointer;margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:#fff;background:var(--grad);
  box-shadow:0 14px 28px rgba(255,59,26,.34);transition:transform .15s,box-shadow .15s,opacity .15s;
}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 32px rgba(255,59,26,.4)}
.btn.loading{opacity:.8;pointer-events:none}

.msg{min-height:22px;margin:14px 0 0;font-size:13px;color:#067647}
.msg b{display:block;background:#fef3f2;color:var(--red);padding:9px 13px;border-radius:11px;font-weight:600;border:1px solid #fdd5d1}
.lupa{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--red);text-decoration:none}
.lupa:hover{text-decoration:underline}

footer{position:fixed;right:0;bottom:12px;z-index:2;width:46vw;text-align:center;font-size:12.5px;color:#7a625b}

.rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:none}}

/* ================= Responsif ================= */
@media (max-width:920px){
  body{background:
    radial-gradient(520px 380px at 90% 0%,rgba(255,150,80,.5),transparent 62%),
    linear-gradient(180deg,#d4000f 0%,#ff2a10 20%,#ff6a1e 32%,#ffc19a 44%,#fff4ec 56%,#fff 70%)}
  .bg .grid{-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 42%);mask-image:linear-gradient(180deg,#000 0,transparent 42%)}
  .page{grid-template-columns:1fr;gap:34px;padding:26px 20px 90px;align-items:start;align-content:start}
  .brand h2,.brand p.lead,.chart,.co,.brand .chip{display:none}
  .form{max-width:440px;padding:28px 22px 24px;background:rgba(255,255,255,.92)}
  .bg svg.waves{height:20vh}
  footer{position:static;width:auto;padding:0 0 20px;color:#7a625b}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}.line{stroke-dashoffset:0}.area,.pt,.line2,.gl{opacity:1}
}

/* ===== TAMBAHKAN di PALING BAWAH file assets/css/login_dashboard.css ===== */

/* Footer tepat di tengah bawah (desktop). Di mobile tetap mengikuti aturan lama. */
@media (min-width:921px){
  footer{
    left:0;right:0;width:auto;text-align:center;
    color:#4a2218;font-weight:500;
  }
}

/* ===== TAMBAHKAN di PALING BAWAH file assets/css/login_dashboard.css =====
   (setelah tambahan3; aturan ini menimpa gaya chip sebelumnya) */

/* jarak di bawah nama perusahaan (chip sudah pindah ke bawah) */
.form .co{margin-bottom:22px}

/* baris bawah: "Lupa Password ?" di kiri, tanggal & jam di kanan */
.foot-row{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 10px;margin-top:8px;
}
.foot-row .lupa{margin-top:0}

/* chip tanggal & jam versi kecil */
.form .foot-row .chip{
  margin:0;width:auto;
  padding:4px 11px;gap:7px;
  font-size:11px;box-shadow:none;
}
.form .foot-row .chip::before{
  width:7px;height:7px;
  box-shadow:0 0 0 3px rgba(18,183,106,.2);
}

/* ===== TAMBAHKAN di PALING BAWAH file assets/css/login_dashboard.css =====
   (setelah isi login_dashboard_tambahan.css yang sebelumnya) */

/* Batang grafik: tumbuh bergantian lalu bernapas pelan, berulang bersama garis */
.bar{
  transform-box:fill-box;transform-origin:bottom;
  transform:scaleY(0);opacity:0;
  animation:barin 8s ease-in-out infinite;
  animation-delay:var(--bd,0s);
}
@keyframes barin{
  0%{transform:scaleY(0);opacity:0}
  10%{transform:scaleY(1.06);opacity:1}
  14%{transform:scaleY(1)}
  55%{transform:scaleY(.93)}
  75%{transform:scaleY(1)}
  90%{transform:scaleY(1);opacity:1}
  97%,100%{transform:scaleY(1);opacity:0}
}

/* Legenda: kotak kecil untuk "Penjualan" (batang) */
.legend{flex-wrap:wrap;justify-content:flex-end;gap:6px 14px}
.legend i.b{width:9px;height:9px;border-radius:3px;background:rgba(255,255,255,.7)}

@media (prefers-reduced-motion:reduce){
  .bar{transform:none;opacity:1;animation:none}
}