/* === PENGATURAN DASAR & WARNA === */
:root{
  --utama:#165DFF;
  --gelap:#1D2939;
  --abu‑tulisan:#475467;
  --abu‑latar:#F9FAFB;
  --batas:#E4E7EC;
  --sukses:#039855;
  --peringatan:#F79009;
  --bahaya:#F04438;
  --bayang:0 4px 20px rgba(0,0,0,.04);
  --bayang‑hover:0 8px 30px rgba(22, 93, 255, 0.12);
}
*{
  box‑sizing:border‑box;margin:0;padding:0;
  font‑family:'Inter',‑apple‑system,BlinkMacSystemFont,"Segoe UI",Roboto,sans‑serif
}
body{
  background:var(--abu‑latar);color:var(--gelap);line‑height:1.6;
  font‑size:16px
}
a{text‑decoration:none;color:inherit}
.container{max‑width:1280px;margin:0 auto;padding:0 1.25rem}

/* === TATA LETAK ATAS & LOGO === */
.site‑header{
  background:#fff;box‑shadow:var(--bayang);padding:1rem 0;position:sticky;top:0;z‑index:99
}
.site‑header>.container{
  display:flex;align‑items:center;justify‑content:space‑between;flex‑wrap:wrap;gap:1rem
}
.logo{height:52px;width:auto;display:block;border‑radius:8px;object‑fit:contain}
.main‑nav{display:flex;gap:.4rem;align‑items:center;flex‑wrap:wrap}
.nav‑link{
  padding:.7rem 1rem;border‑radius:9px;font‑weight:500;color:var(--abu‑tulisan);transition:.2s
}
.nav‑link:hover{background:rgba(22,93,255,.06);color:var(--utama)}
.nav‑link.aktif{background:rgba(22,93,255,.1);color:var(--utama)}
.btn‑masuk{background:var(--utama);color:#fff;margin‑left:.4rem}
.btn‑masuk:hover{background:#0F4CD9;color:#fff}

/* === TATA LETAK UTAMA — SIDEBAR & KONTEN === */
main.container{
  display:grid;grid‑template‑columns:280px 1fr;gap:2.25rem;padding:2rem 1.25rem 4rem
}
.sidebar .widget{background:#fff;border‑radius:16px;padding:1.5rem;box‑shadow:var(--bayang)}
.widget h3{font‑size:1.1rem;margin‑bottom:1rem;color:var(--gelap)}
.widget li{
  list‑style:none;padding:.85rem 1.1rem;border‑radius:11px;margin‑bottom:.5rem;
  cursor:pointer;transition:.2s ease;
  color:var(--abu‑tulisan)
}
.widget li:hover{background:var(--abu‑latar);color:var(--utama)}
.widget li.aktif{background:var(--utama);color:#fff;font‑weight:500}

/* === KOTAK BERITA & TATA LETAK KARTU === */
h2{font‑size:1.5rem;margin‑bottom:1.25rem;color:var(--gelap)}
.grid‑berita{
  display:grid;grid‑template‑columns:repeat(auto‑fill,minmax(300px,1fr));gap:1.75rem
}
.kartu‑berita{
  background:#fff;border‑radius:20px;overflow:hidden;box‑shadow:var(--bayang);
  transition:.25s ease;display:flex;flex‑direction:column;position:relative
}
.kartu‑berita:hover{transform:translateY(‑5px);box‑shadow:var(--bayang‑hover)}
.kartu‑berita>img, .tanpa‑gambar{
  width:100%;height:190px;object‑fit:cover;background:#E4E7EC;display:flex;align‑items:center;justify‑content:center;font‑size:2.5rem;color:#98A2B3
}
.tag‑kategori{
  position:absolute;top:1rem;left:1rem;background:var(--utama);color:#fff;padding:.25rem .8rem;
  border‑radius:20px;font‑size:.8rem;font‑weight:500
}
.kartu‑berita h3{
  padding:1.1rem 1.25rem .6rem;font‑size:1.1rem;line‑height:1.4;color:var(--gelap)
}
.kartu‑berita p{padding:0 1.25rem 1rem;color:var(--abu‑tulisan);line‑height:1.5;flex‑grow:1}
.kartu‑berita time{
  padding:0 1.25rem 1.25rem;color:#98A2B3;font‑size:.9rem;display:block
}

/* === HALAMAN ISI BERITA PENUH === */
.artikel‑penuh{background:#fff;border‑radius:24px;padding:2.5rem;box‑shadow:var(--bayang)}
.gambar‑utama img{width:100%;border‑radius:16px;margin‑bottom:1.75rem;object‑fit:cover;max‑height:420px}
.artikel‑penuh>h1{font‑size:2.1rem;line‑height:1.35;margin:1.25rem 0 1rem;color:var(--gelap)}
.waktu‑terbit{color:var(--abu‑tulisan);padding‑bottom:1.25rem;border‑bottom:1px solid var(--batas);margin‑bottom:1.75rem}
.isi‑artikel{font‑size:1.075rem;line‑height:1.8;color:#344054}
.isi‑artikel br{margin‑bottom:.8rem}

/* === FORMULIR & TOMBOL — ADMIN === */
.form‑kotak{background:#fff;border‑radius:20px;padding:2rem;box‑shadow:var(--bayang);margin‑bottom:2rem}
.form‑grup{margin‑bottom:1.35rem}
.form‑grup>label{display:block;margin‑bottom:.5rem;font‑weight:500;color:var(--gelap)}
input, select, textarea{
  width:100%;padding:.9rem 1rem;border:1px solid var(--batas);border‑radius:12px;
  font‑size:1rem;outline:none;transition:.2s ease
}
input:focus, select:focus, textarea:focus{border‑color:var(--utama);box‑shadow:0 0 0 3px rgba(22, 93, 255, 0.15)}
button{border:none;cursor:pointer;font‑weight:500;border‑radius:12px;transition:.2s ease}
.btn‑utama{background:var(--utama);color:#fff;padding:.95rem 1.8rem;font‑size:1rem;width:100%}
.btn‑utama:hover{background:#0F4CD9}
.btn‑biru{background:#E8F3FF;color:#165DFF;padding:.6rem 1.1rem;margin‑right:.5rem}
.btn‑biru:hover{background:#D4E8FF}
.btn‑merah{background:#FFECEB;color:#D12F2F;padding:.6rem 1.1rem}
.btn‑merah:hover{background:#FFD9D7}
.btn‑keluar{background:#F2F4F7;color:#344054;padding:.7rem 1.3rem}
.btn‑keluar:hover{background:#E4E7EC}
.pesan‑salah{color:var(--bahaya);margin‑top:1rem}
.baris‑tombol{display:flex;justify‑content:space‑between;align‑items:center;margin‑bottom:1.5rem;flex‑wrap:wrap;gap:1rem}
.baris‑kelola{
  display:flex;justify‑content:space‑between;align‑items:center;flex‑wrap:wrap;gap:1rem;
  padding:1.1rem 1.25rem;background:#fff;border‑radius:14px;margin‑bottom:.8rem;box‑shadow:var(--bayang)
}
.pemisah{border:none;border‑top:1px solid var(--batas);margin:2.5rem 0}
.kosong{text‑align:center;color:var(--abu‑tulisan);padding:3rem 1rem}
.daftar‑peta, .daftar‑peta li{list‑style:none;margin‑bottom:.7rem;padding‑left:.2rem}
.daftar‑peta a{color:var(--utama);font‑weight:500;line‑height:1.7}

/* === KAKI HALAMAN === */
.site‑footer{
  background:#fff;border‑top:1px solid var(--batas);padding:2.25rem 0;
  text‑align:center;color:var(--abu‑tulisan);margin‑top:4rem
}
.site‑footer a{color:var(--utama);margin:0 .5rem}

/* === SESUAIKAN UNTUK HP & LAYAR‑KECIL === */
@media(max‑width: 900px){
  main.container{grid‑template‑columns:240px 1fr;gap:1.5rem}
}
@media(max‑width: 720px){
  html{font‑size:15px}
  main.container{grid‑template‑columns:1fr}
  .artikel‑penuh{padding:1.5rem}
  .grid‑berita{grid‑template‑columns:1fr}
  .site‑header>.container{justify‑content:center;text‑align:center}
}