:root{
  --pink: #ff8fab; --pink-soft:#ffe3ec; --sky:#6fc6e3; --sky-soft:#e2f6fc;
  --yellow:#ffd166; --yellow-soft:#fff4dd; --green:#6bcf9f; --purple:#b892ff;
  --dark:#3a3050; --text:#55516b; --cream:#f7f5fb; --radius:18px;
  --shadow: 0 8px 24px rgba(90,60,120,.10);
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Poppins',sans-serif; background:var(--cream); color:var(--text); }
h1,h2,h3,h4,.font-heading{ font-family:'Baloo 2',cursive; color:var(--dark); }
a{ text-decoration:none; color:inherit; }

/* ===== LOGIN PAGE ===== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--pink-soft), var(--sky-soft));
  padding:20px;
}
.login-box{ background:#fff; border-radius:26px; box-shadow:var(--shadow); padding:44px 38px; width:100%; max-width:400px; text-align:center; }
.login-box .ic-top{ width:70px; height:70px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.login-box h2{ margin:0 0 6px; }
.login-box p{ font-size:13.5px; opacity:.7; margin:0 0 26px; }
.login-box input{ width:100%; padding:13px 16px; border-radius:14px; border:2px solid #f0ecf7; margin-bottom:14px; font-family:inherit; }
.login-box input:focus{ outline:none; border-color:var(--sky); }
.login-box button{ width:100%; padding:13px; border-radius:50px; border:none; background:linear-gradient(135deg,var(--pink),#ff6f91); color:#fff; font-weight:700; cursor:pointer; font-size:15px; }
.alert{ padding:12px 16px; border-radius:12px; font-size:13.5px; margin-bottom:16px; text-align:left; }
.alert-error{ background:#ffe3ec; color:#d6336c; }
.alert-success{ background:#e3f9ee; color:#2f9e6b; }

/* ===== LAYOUT ===== */
.admin-layout{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; background:var(--dark); color:#d8d3e8; flex-shrink:0; padding:24px 16px;
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:50; transition:.3s;
}
.sidebar .brand{ display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:30px; padding:0 8px; }
.sidebar .brand .ic{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--purple)); display:flex; align-items:center; justify-content:center; }
.sidebar .brand span{ font-family:'Baloo 2',cursive; font-size:16px; }
.sidebar nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; font-size:14px; font-weight:500; margin-bottom:4px;
}
.sidebar nav a i{ width:20px; text-align:center; }
.sidebar nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar nav a.active{ background:linear-gradient(135deg,var(--pink),#ff6f91); color:#fff; }
.sidebar .group-title{ font-size:11px; text-transform:uppercase; opacity:.5; margin:18px 8px 8px; letter-spacing:.5px; }

.main-content{ margin-left:250px; flex:1; padding:26px 30px 50px; width:calc(100% - 250px); }
.topbar-admin{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:12px; }
.topbar-admin h1{ font-size:22px; margin:0; }
.topbar-admin .user-chip{ display:flex; align-items:center; gap:10px; background:#fff; padding:8px 16px 8px 8px; border-radius:50px; box-shadow:var(--shadow); }
.topbar-admin .user-chip .av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.burger-admin{ display:none; background:#fff; border:none; width:40px;height:40px;border-radius:12px; box-shadow:var(--shadow); font-size:18px; cursor:pointer; }

@media(max-width:900px){
  .sidebar{ left:-260px; }
  .sidebar.open{ left:0; }
  .main-content{ margin-left:0; width:100%; }
  .burger-admin{ display:block; }
}

/* ===== CARDS / STATS ===== */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px; }
@media(max-width:900px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; display:flex; align-items:center; gap:16px; }
.stat-card .ic{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex-shrink:0; }
.stat-card h3{ margin:0; font-size:24px; } .stat-card p{ margin:0; font-size:12.5px; opacity:.7; }

.panel{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:24px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.panel-head h3{ margin:0; font-size:17px; }

/* ===== BUTTONS ===== */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:10px 20px; border-radius:12px; border:none; cursor:pointer; font-size:13.5px; transition:.2s; }
.btn-primary{ background:linear-gradient(135deg,var(--pink),#ff6f91); color:#fff; }
.btn-primary:hover{ opacity:.9; }
.btn-secondary{ background:var(--sky-soft); color:#2f8fb5; }
.btn-outline{ background:#fff; border:2px solid #eee; color:var(--text); }
.btn-danger{ background:#ffe3e3; color:#d6336c; }
.btn-sm{ padding:7px 14px; font-size:12.5px; }

/* ===== TABLE ===== */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table th{ text-align:left; padding:12px 14px; background:var(--cream); color:var(--dark); font-weight:700; white-space:nowrap; }
table td{ padding:12px 14px; border-bottom:1px solid #f2f0f7; vertical-align:middle; }
table tr:hover td{ background:#fbfaff; }
.thumb-sm{ width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--sky-soft); }
.badge{ display:inline-block; padding:4px 12px; border-radius:50px; font-size:11.5px; font-weight:700; }
.badge-green{ background:#e3f9ee; color:#2f9e6b; } .badge-gray{ background:#f0ecf7; color:#7c7591; }
.badge-pink{ background:var(--pink-soft); color:var(--pink); }

/* ===== FORM ===== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:13px; font-weight:700; color:var(--dark); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 14px; border-radius:12px; border:2px solid #f0ecf7; font-family:inherit; font-size:14px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--sky); }
.form-group .hint{ font-size:11.5px; opacity:.6; margin-top:4px; }
.current-img{ width:90px; height:90px; border-radius:14px; object-fit:cover; margin-bottom:10px; display:block; border:2px solid #f0ecf7; }

.empty-row td{ text-align:center; padding:40px; opacity:.6; }

/* ===== THEME COLOR GRADIENT SLIDER ===== */
.theme-slider-wrap{ padding:10px 0; }
.theme-slider-track{
  position:relative; height:22px; border-radius:50px; cursor:pointer;
  background:linear-gradient(to right,
    hsl(0,100%,78%), hsl(30,100%,78%), hsl(60,100%,78%), hsl(90,100%,78%),
    hsl(120,100%,78%), hsl(150,100%,78%), hsl(180,100%,78%), hsl(210,100%,78%),
    hsl(240,100%,78%), hsl(270,100%,78%), hsl(300,100%,78%), hsl(330,100%,78%), hsl(360,100%,78%));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
}
.theme-slider-handle{
  position:absolute; top:50%; width:30px; height:30px; border-radius:50%; background:#fff;
  border:4px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.35); transform:translate(-50%,-50%); cursor:grab;
  transition: box-shadow .15s;
}
.theme-slider-handle:hover{ box-shadow:0 4px 14px rgba(0,0,0,.45); }
.theme-slider-handle.dragging{ cursor:grabbing; box-shadow:0 4px 16px rgba(0,0,0,.5); }

/* ===== RICH TEXT EDITOR (WYSIWYG) - konten artikel ===== */
.rte-wrap{ border:2px solid #f0ecf7; border-radius:14px; overflow:hidden; margin-bottom:16px; }
.rte-wrap:focus-within{ border-color:var(--sky); }
.rte-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:8px; background:var(--cream);
  border-bottom:2px solid #f0ecf7;
}
.rte-btn{
  width:34px; height:34px; border-radius:9px; border:none; background:#fff; color:var(--dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13.5px; transition:.15s; flex-shrink:0;
}
.rte-btn:hover{ background:var(--pink-soft); color:var(--pink); }
.rte-btn:disabled{ opacity:.5; cursor:not-allowed; }
.rte-divider{ width:1px; align-self:stretch; background:#e5e0ef; margin:2px 4px; }
.rte-area{
  min-height:220px; max-height:520px; overflow-y:auto; padding:16px 18px; font-size:14px; line-height:1.75;
  color:var(--text); outline:none; background:#fff;
}
.rte-area:focus{ background:#fffdfb; }
.rte-area img{ max-width:100%; border-radius:10px; margin:8px 0; display:block; }
.rte-area a{ color:#2f8fb5; text-decoration:underline; }
.rte-area p{ margin:0 0 10px; }