* { margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI", sans-serif; }
body { background:#f4f6f9; color:#333; }

.navbar { background:linear-gradient(135deg,#1e5799,#2a7ab8); color:#fff; padding:15px 5%; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.15); position:sticky; top:0; z-index:100; }
.navbar .logo { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:bold; }
.navbar ul { display:flex; gap:25px; list-style:none; }
.navbar ul a { color:#fff; text-decoration:none; font-weight:500; transition:.3s; }
.navbar ul a:hover { color:#ffd700; }

.hero { background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url("https://images.unsplash.com/photo-1500382017468-9049fed747ef"); background-size:cover; background-position:center; color:#fff; padding:100px 5%; text-align:center; }
.hero h1 { font-size:48px; margin-bottom:15px; }
.hero p { font-size:20px; max-width:700px; margin:0 auto; }

.container { max-width:1200px; margin:40px auto; padding:0 20px; }
.section-title { text-align:center; margin-bottom:40px; }
.section-title h2 { color:#1e5799; font-size:32px; margin-bottom:10px; }
.section-title p { color:#666; }

.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.card { background:#fff; border-radius:10px; padding:25px; box-shadow:0 2px 10px rgba(0,0,0,.08); transition:.3s; }
.card:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.card .icon { font-size:40px; color:#1e5799; margin-bottom:15px; }
.card h3 { color:#1e5799; margin-bottom:10px; }

.berita-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:25px; }
.berita-item { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.berita-item img { width:100%; height:75%; object-fit:cover; }
.berita-item .content { padding:20px; }
.berita-item h3 { color:#1e5799; margin-bottom:10px; }
.berita-item .meta { color:#999; font-size:13px; margin-bottom:10px; }
.btn { display:inline-block; background:#1e5799; color:#fff; padding:10px 20px; border-radius:5px; text-decoration:none; border:none; cursor:pointer; transition:.3s; }
.btn:hover { background:#164278; }

footer { background:#1a1a2e; color:#fff; padding:40px 5% 20px; margin-top:60px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; max-width:1200px; margin:0 auto; }
.footer-grid h4 { margin-bottom:15px; color:#ffd700; }
.footer-grid p, .footer-grid a { color:#ccc; text-decoration:none; line-height:1.8; }
.copyright { text-align:center; padding-top:20px; border-top:1px solid #333; margin-top:30px; color:#888; }

.admin-wrapper { display:flex; min-height:100vh; }
.sidebar { width:250px; background:#1a1a2e; color:#fff; padding:20px 0; position:fixed; height:100vh; overflow-y:auto; }
.sidebar .brand { padding:0 20px 20px; border-bottom:1px solid #333; margin-bottom:20px; text-align:center; }
.sidebar .brand h3 { color:#ffd700; }
.sidebar ul { list-style:none; }
.sidebar ul li a { display:block; padding:12px 20px; color:#ccc; text-decoration:none; transition:.3s; border-left:3px solid transparent; }
.sidebar ul li a:hover, .sidebar ul li a.active { background:#2a2a4e; color:#fff; border-left-color:#ffd700; }
.main-content { flex:1; margin-left:250px; padding:20px; }
.topbar { background:#fff; padding:15px 25px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; box-shadow:0 2px 5px rgba(0,0,0,.05); }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:30px; }
.stat-card { background:#fff; padding:25px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.06); border-left:5px solid #1e5799; }
.stat-card h4 { color:#666; font-size:14px; margin-bottom:8px; }
.stat-card .value { font-size:28px; font-weight:bold; color:#1e5799; }
.stat-card.green { border-left-color:#28a745; }
.stat-card.green .value { color:#28a745; }
.stat-card.orange { border-left-color:#fd7e14; }
.stat-card.orange .value { color:#fd7e14; }
.stat-card.red { border-left-color:#dc3545; }
.stat-card.red .value { color:#dc3545; }

.panel { background:#fff; border-radius:10px; padding:25px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:20px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.panel-header h3 { color:#1e5799; }
table { width:100%; border-collapse:collapse; }
table th { background:#1e5799; color:#fff; padding:12px; text-align:left; }
table td { padding:12px; border-bottom:1px solid #eee; }
table tr:hover { background:#f9f9f9; }
.badge { padding:4px 10px; border-radius:12px; font-size:12px; color:#fff; }
.badge-success { background:#28a745; }
.badge-warning { background:#fd7e14; }
.badge-danger { background:#dc3545; }
.badge-info { background:#17a2b8; }

.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:5px; font-weight:500; }
.form-control { width:100%; padding:10px; border:1px solid #ddd; border-radius:5px; font-size:14px; }
.form-control:focus { outline:none; border-color:#1e5799; }

.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1e5799,#2a7ab8); }
.login-box { background:#fff; padding:40px; border-radius:10px; width:400px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.login-box h2 { text-align:center; color:#1e5799; margin-bottom:25px; }

@media(max-width:768px){
  .sidebar { width:70px; }
  .sidebar .brand h3, .sidebar ul li a span { display:none; }
  .main-content { margin-left:70px; }
  .navbar ul { display:none; }
  .hero h1 { font-size:32px; }
}