MediaWiki:Common.css

/* CSS yang ada di sini akan diterapkan pada semua kulit. */
.etika-wrapper {
  background-color: #fcfcfc;
  padding: 1em 2em;
  border-left: 4px solid #5c8a8a;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
}

.etika-wrapper h2 {
  color: #336666;
  border-bottom: 2px solid #aac;
  padding-bottom: 0.2em;
  margin-top: 1.5em;
  font-size: 1.5em;
}

.etika-wrapper h3 {
  color: #444;
  font-size: 1.2em;
  margin-top: 1em;
  border-left: 3px solid #ccc;
  padding-left: 0.5em;
}

/* =========================================================
   WikiPangan — Desain Halaman Depan (WP components)
   Tempel blok ini di halaman: MediaWiki:Common.css
   Aman ditambahkan di bagian bawah file, tidak menimpa
   aturan lain selama tidak ada class lain bernama "wp-*".
   ========================================================= */

.wp-page{
  --wp-blue:#2B90D9;
  --wp-blue-dark:#1c6ca8;
  --wp-terracotta:#C1440E;
  --wp-card:#ffffff;
  --wp-border:#e8e5e0;
  --wp-muted:#6b6b6b;
  --wp-radius:14px;
  --wp-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
  --wp-shadow-hover:0 4px 10px rgba(0,0,0,.06), 0 14px 30px rgba(0,0,0,.10);
}

/* HERO */
.wp-hero{
  position:relative;
  border-radius:var(--wp-radius);
  overflow:hidden;
  min-height:260px;
  display:flex;
  align-items:flex-end;
  box-shadow:var(--wp-shadow);
  margin-bottom:28px;
  background-color:#0d3a52;
  background-size:cover;
  background-position:center;
}
.wp-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,30,45,.10) 0%, rgba(8,25,38,.88) 88%);
}
.wp-hero-content{ position:relative; z-index:2; padding:28px; color:#fff; max-width:640px; }
.wp-hero-content .wp-eyebrow{
  text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700;
  color:#8fd0ff; margin-bottom:6px;
}
.wp-hero-content h2{ margin:0 0 10px; font-size:26px; font-weight:800; color:#fff; border:0; padding:0; }
.wp-hero-content p{ margin:0; font-size:14px; color:#e9eef2; max-width:560px; }

/* STATS */
.wp-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:32px;
}
.wp-stat{
  background:var(--wp-card); border:1px solid var(--wp-border); border-radius:var(--wp-radius);
  padding:16px 8px; text-align:center; transition:transform .15s ease, box-shadow .15s ease;
}
.wp-stat:hover{ transform:translateY(-3px); box-shadow:var(--wp-shadow-hover); }
.wp-stat .wp-icon{ font-size:18px; margin-bottom:4px; }
.wp-stat .wp-num{ font-size:24px; font-weight:800; color:var(--wp-terracotta); line-height:1.1; }
.wp-stat .wp-label{ font-size:12px; color:var(--wp-muted); margin-top:3px; }

/* SECTION HEADER */
.wp-section{ margin-bottom:36px; }
.wp-section-head{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px;
  margin-bottom:14px; border-bottom:1px solid var(--wp-border); padding-bottom:8px;
}
.wp-section-head h2{ font-size:19px; margin:0; border:0; padding:0; }
.wp-section-head .wp-sub{ font-size:12px; color:var(--wp-muted); }

/* CARD GRID */
.wp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:14px; }
.wp-card{
  background:var(--wp-card); border:1px solid var(--wp-border); border-radius:var(--wp-radius);
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
}
.wp-card:hover{ transform:translateY(-4px); box-shadow:var(--wp-shadow-hover); }
.wp-card-img{ position:relative; aspect-ratio:4/3; background:#eee; overflow:hidden; }
.wp-card-img a{ display:block; height:100%; }
.wp-card-img img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
.wp-badge{
  position:absolute; top:8px; left:8px; background:rgba(20,20,20,.72); color:#fff;
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; z-index:2;
}
.wp-card-body{ padding:12px 14px 14px; }
.wp-card-body h3{ margin:0 0 4px; font-size:15px; }
.wp-card-body h3 a{ color:var(--wp-blue-dark); text-decoration:none; }
.wp-card-body p{ margin:0; font-size:13px; color:var(--wp-muted); }
.wp-card-body p a{ font-weight:600; color:var(--wp-blue); white-space:nowrap; }

/* COMMUNITY */
.wp-community{
  background:var(--wp-card); border:1px solid var(--wp-border); border-radius:var(--wp-radius);
  padding:22px; display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center;
}
.wp-community img{ width:100%; border-radius:10px; display:block; }
.wp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* .wp-chip membungkus wikilink [[...]] biasa — MediaWiki tidak mengizinkan tag <a href> mentah,
   jadi styling warna/underline diarahkan ke elemen <a> hasil rendering wikilink di dalamnya. */
.wp-chip{
  display:inline-block; padding:6px 14px; border-radius:999px; background:#eef6fc;
  border:1px solid #d7ebf7; transition:background .15s ease; font-size:13px;
}
.wp-chip:hover{ background:#dcefff; }
.wp-chip a{
  color:var(--wp-blue-dark) !important; font-weight:600; text-decoration:none !important;
}

/* FOOTER */
.wp-footer{ text-align:center; margin-top:32px; opacity:.75; }

@media (max-width:720px){
  .wp-stats{ grid-template-columns:repeat(2,1fr); }
  .wp-community{ grid-template-columns:1fr; }
  .wp-hero-content h2{ font-size:22px; }
}


.etika-list {
  counter-reset: etika-counter;
  margin-left: 1.5em;
  list-style: none;
}

.etika-list li {
  margin-bottom: 0.5em;
  position: relative;
  padding-left: 2em;
}

.etika-list li::before {
  counter-increment: etika-counter;
  content: counter(etika-counter) ".";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #336666;
}

/* CSS untuk Halaman Home

.home-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: space-between;
}

.home-box {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
  flex: 1 1 calc(48% - 1em);
  min-width: 300px;
  padding: 1em;
}

.home-header {
  font-weight: bold;
  font-size: 1.2em;
  padding: 0.5em;
  color: #fff;
  margin: -1em -1em 0.5em -1em;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-left: 6px solid #eee;
}

.home-box.green .home-header {
  background: #2e8b57;
  border-left-color: #229b5e;
}

.home-box.blue .home-header {
  background: #005a9c;
  border-left-color: #007acc;
}

.home-box.red .home-header {
  background: #a41515;
  border-left-color: #e03c3c;
}

.home-content {
  font-size: 0.95em;
  line-height: 1.5em;
}

.gallery-row {
  display: flex;
  gap: 0.5em;
  margin-top: 0.5em;
}

#Artikel Galeri di halaman home
.artikel-galeri {
  display: inline-block;
  width: 30%;
  vertical-align: top;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 2px 2px 8px #eee;
}

.galeri-kartu img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.galeri-judul {
  font-size: 1.2em;
  font-weight: bold;
  color: #223366;
  margin-top: 5px;
}

.galeri-ringkasan {
  font-size: 0.95em;
  color: #333;
  margin-top: 5px;
}

.baca {
  color: #3366cc;
  font-weight: normal;
  text-decoration: none;
}
 /* Styling untuk daftar yang dihasilkan oleh DynamicPageList */
 DynamicPageList ul {
   column-count: 2;
   column-gap: 2em;
   margin: 0;
   padding-left: 1.5em;
   list-style-position: outside;
 }
 DynamicPageList li {
   break-inside: avoid;
   margin-bottom: 0.5em;
 }