:root{--red:#8b1218;--red2:#5c0b0f;--gold:#d4aa45;--bg:#f6f3f2;--line:#e4d9d7;--ink:#221b1b;--muted:#756969}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}
.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:#190607;color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}
.side-brand{display:flex;gap:10px;align-items:center;margin-bottom:22px}.side-brand img{width:44px;height:44px;background:#fff;border-radius:10px;padding:3px}.side-brand strong{display:block}.side-brand span{display:block;color:#bfa6a6;font-size:11px}
.side-nav{display:grid;gap:6px}.side-nav a{padding:11px 12px;border-radius:9px;color:#e5d6d6;font-size:13px}.side-nav a:hover,.side-nav a.active{background:#7f1016;color:#fff}
.main{padding:26px}.top{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:22px}.top h1{margin:0;font-size:27px}.top-actions{display:flex;gap:8px}.top-actions a{padding:9px 11px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.kpi span{font-size:11px;color:var(--muted)}.kpi strong{display:block;font-size:30px;color:var(--red);margin-top:7px}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:18px}.panel h2{margin-top:0;font-size:19px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:10px;border-bottom:1px solid #eee;vertical-align:top}th{color:#6b5c5c;font-size:11px}.badge{display:inline-block;padding:4px 7px;border-radius:999px;background:#f1eaea;color:#6f1519;font-size:10px;font-weight:700}
.actions{display:flex;gap:6px;flex-wrap:wrap}.actions a,.actions button{border:0;padding:6px 8px;border-radius:7px;font-size:10px;cursor:pointer}.edit{background:#fff4d8;color:#7a5a0c}.delete{background:#ffe5e5;color:#8f1717}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .full{grid-column:1/-1}label{display:grid;gap:6px;font-size:12px;font-weight:700}input,textarea,select{border:1px solid #d9cdca;border-radius:9px;padding:10px;background:#fff;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--red)}
.btn{border:0;border-radius:9px;padding:10px 13px;cursor:pointer;font-weight:700;font-size:12px}.primary{background:var(--red);color:#fff}.secondary{background:#eee4e2;color:#5b4646}
.alert{padding:11px;border-radius:9px;margin-bottom:13px;font-size:12px}.ok{background:#eaf7ef;border:1px solid #c6e2d1;color:#286044}.err{background:#fff0f0;border:1px solid #e6c1c1;color:#812323}
.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#140607,#781017);padding:18px}.login-card{width:min(420px,100%);background:#fff;border-radius:20px;padding:28px;box-shadow:0 25px 60px rgba(0,0,0,.28);text-align:center}.login-card img{width:80px;height:80px;object-fit:contain}.login-card h1{margin:12px 0 5px}.login-card p{color:#786969;margin-top:0}.login-card form{display:grid;gap:13px;text-align:left;margin:20px 0}.login-card button{border:0;background:var(--red);color:#fff;padding:11px;border-radius:9px;font-weight:800}.login-card small{color:#8a7d7d}.back{display:block;margin-top:15px;color:var(--red);font-size:12px}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}
@media(max-width:560px){.main{padding:16px}.grid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.top-actions{flex-wrap:wrap}}


/* V4 ADMIN DASHBOARD EFFECTS */
.kpi,.panel{
  animation:adminIn .55s ease both;
}
.kpi:nth-child(2){animation-delay:.07s}
.kpi:nth-child(3){animation-delay:.14s}
.kpi:nth-child(4){animation-delay:.21s}
.panel{animation-delay:.14s}
@keyframes adminIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.kpi{
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.kpi:after{
  content:"";
  position:absolute;
  width:110px;height:110px;border-radius:50%;
  right:-45px;top:-45px;
  background:radial-gradient(circle,rgba(212,170,69,.18),transparent 70%);
}
.kpi:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 35px rgba(86,19,22,.12);
  border-color:#d7bbb5;
}
.kpi strong{
  position:relative;z-index:2;
  text-shadow:0 0 16px rgba(139,18,24,.12);
}
.side-brand img{
  transition:transform .3s ease,filter .3s ease;
}
.side-brand:hover img{
  transform:scale(1.08);
  filter:drop-shadow(0 0 8px rgba(212,170,69,.35));
}
.side-nav a{
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.side-nav a:hover{transform:translateX(4px)}


/* V5 - ADMIN DASHBOARD, efek dibuat lebih nyata */
.sidebar{
  background:
    radial-gradient(circle at 10% 10%,rgba(212,170,69,.12),transparent 24%),
    linear-gradient(180deg,#1a0608,#0f0405);
}
.main{
  background:
    radial-gradient(circle at 92% 5%,rgba(139,18,24,.055),transparent 22%),
    var(--bg);
}
.kpi{
  background:
    radial-gradient(circle at 100% 0%,rgba(212,170,69,.14),transparent 42%),
    #fff;
}
.kpi:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  border-radius:16px 0 0 16px;
  background:linear-gradient(180deg,var(--gold),var(--red));
  transform:scaleY(.2);
  transform-origin:center;
  transition:transform .28s ease;
}
.kpi:hover:before{transform:scaleY(1)}
.kpi:hover strong{transform:scale(1.07);color:#a0131a}
.kpi strong{display:inline-block;transition:transform .25s ease,color .25s ease}
.panel{
  box-shadow:0 8px 28px rgba(69,20,22,.045);
  transition:box-shadow .25s ease,transform .25s ease;
}
.panel:hover{
  box-shadow:0 18px 42px rgba(69,20,22,.08);
}
.top h1{
  position:relative;
  display:inline-block;
}
.top h1:after{
  content:"";
  display:block;
  width:54px;height:3px;
  margin-top:7px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  animation:adminTitleLine 2.8s ease-in-out infinite alternate;
}
@keyframes adminTitleLine{to{width:105px}}