:root {
  --primary-green: #0d6136;
  --dark-green: #083c21;
  --bg-gray: #f8f9fa;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}

body {
  background-color: #555;
  padding: 20px 10px;
  display: flex;
  justify-content: center;
}

/* Canvas Poster Layout */
.poster-canvas {
  width: 850px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- RED BLOCK (EKA.PHP) --- */
.block-red {
  background: #fff;
  padding: 10px 15px;
}

/* Header Container dibuat rata tengah & berdampingan */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: left;
}

.header-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.header-title h1 {
  color: var(--primary-green);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0 0 4px 0;
}

.header-title p {
  color: #333;
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* --- INDIGO BLOCK (DWI.PHP) - Border Dihapus --- */
.block-indigo {
  padding: 5px 10px;
  background: #fff;
}

.indigo-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.3fr;
  gap: 20px;
}

.sec-head {
  color: var(--primary-green);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 4px;
  text-transform: uppercase;
}

.sec-head-icon {
  width: 24px;
  height: 24px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.desc-text {
  font-size: 11px;
  color: #333;
  line-height: 1.4;
  text-align: justify;
  margin-bottom: 12px;
}

.info-table {
  font-size: 11px;
  width: 100%;
  border-collapse: collapse;
}

.info-table td {
  padding: 4px 0;
  vertical-align: top;
}

.info-table td.icon {
  width: 22px;
  color: var(--primary-green);
}

.info-table td.label {
  font-weight: bold;
  width: 75px;
}

/* Visi & Misi Box */
.badge-title {
  background: var(--primary-green);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 4px;
}

.visi-misi-box {
  font-size: 10.5px;
  line-height: 1.4;
  color: #222;
  margin-bottom: 10px;
}

.misi-list {
  padding-left: 14px;
  margin-top: 3px;
}

.misi-list li {
  margin-bottom: 4px;
}

/* Org Structure */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.org-box {
  background: var(--primary-green);
  color: white;
  text-align: center;
  border-radius: 3px;
  padding: 5px 6px;
  font-size: 10px;
  font-weight: bold;
  width: 85%;
}

.org-box small {
  display: block;
  font-weight: normal;
  font-size: 9px;
}

.org-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
}

.org-box-sm {
  background: #14522d;
  color: white;
  text-align: center;
  padding: 4px 2px;
  font-size: 8.5px;
  border-radius: 2px;
  font-weight: bold;
}

.org-box-sm span {
  display: block;
  font-weight: normal;
  font-size: 8px;
}

/* --- PURPLE BLOCK (TRI.PHP) --- */
.block-purple {
  border: 4px solid var(--purple-border);
  border-radius: 4px;
  padding: 12px;
  background: #fff;
}

.purple-header {
  text-align: center;
  color: var(--primary-green);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.act-card {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
  padding: 10px 6px;
}

.act-badge-icon {
  width: 30px;
  height: 30px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px auto;
  font-size: 14px;
}

.act-card h4 {
  color: var(--primary-green);
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 4px;
}

.act-card p {
  font-size: 9.5px;
  color: #555;
  line-height: 1.3;
}

/* --- TURQUOISE BLOCK (CATUR.PHP) - Border Dihapus --- */
.block-turquoise {
  padding: 5px 10px;
  background: #fff;
}

.turquoise-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}

.galeri-text-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.galeri-item-box {
  background: #f8f9fa;
  border-left: 4px solid var(--primary-green);
  padding: 8px 12px;
  font-size: 11px;
  color: #333;
  border-radius: 0 4px 4px 0;
}

.galeri-item-box strong {
  color: var(--primary-green);
  display: block;
  margin-bottom: 2px;
}

.quote-box {
  text-align: center;
  color: var(--primary-green);
  font-style: italic;
  font-weight: bold;
  font-size: 11.5px;
  margin-top: 12px;
  padding: 8px;
  background: #e8f5e9;
  border-radius: 4px;
}

.testi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.testi-card {
  background: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px 12px;
}

.testi-info h5 {
  font-size: 11px;
  color: #222;
  margin-bottom: 1px;
}

.testi-info small {
  font-size: 9px;
  color: #666;
}

.testi-stars {
  color: #ffc107;
  font-size: 10px;
  margin: 2px 0;
}

.testi-info p {
  font-size: 10px;
  color: #444;
  font-style: italic;
}

/* --- GREEN BLOCK (PANCA.PHP) - Border Dihapus --- */
.block-green {
  padding: 5px 10px;
  background: #fff;
}

.panca-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 20px;
  align-items: start;
}

.panca-title {
  color: var(--primary-green);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
}

.donasi-icons-row {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
}

.donasi-item {
  text-align: center;
  font-size: 8.5px;
  font-weight: bold;
  color: var(--primary-green);
}

.donasi-circle {
  width: 30px;
  height: 30px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px auto;
  font-size: 13px;
}

.bank-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fdfdfd;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 6px;
}

.bank-name {
  font-weight: 900;
  font-size: 15px;
}

.bank-detail {
  text-align: right;
  font-size: 10px;
}

.bank-detail strong {
  color: #111;
}

.contact-list {
  font-size: 10.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-row span {
  color: var(--primary-green);
  font-weight: bold;
}

.footer-banner {
  background: var(--dark-green);
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 15px;
  border-radius: 4px;
  font-size: 11px;
}

.footer-banner p {
  font-style: italic;
}

.footer-banner small {
  font-size: 9.5px;
  opacity: 0.85;
}

/* Styling Scrollbar & Batasan Tampil 3 Item pada Dokumentasi Kegiatan */
.galeri-text-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px; /* Membatasi tinggi setara ~3 item */
  overflow-y: auto; /* Menampilkan scrollbar jika data > 3 */
  padding-right: 5px;
}

.galeri-item-box {
  background-color: #f8f9fa;
  border-left: 4px solid #006633;
  border-radius: 4px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.galeri-item-box strong {
  color: #006633;
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
  font-weight: bold;
}

.galeri-item-box span {
  color: #444;
  font-size: 11px;
  line-height: 1.4;
  display: block;
}

/* Styling Scrollbar & Batasan Tampil 3 Item pada Testimoni */
.testi-list {
  max-height: 220px; /* Membatasi tinggi setara ~3 item */
  overflow-y: auto; /* Menampilkan scrollbar jika data > 3 */
  padding-right: 5px;
}

.testi-card {
  margin-bottom: 10px;
}

/* Container untuk membatasi tampilan rekening bank max 2 data dan scrollable */
.bank-list {
  max-height: 115px;
  overflow-y: auto;
  padding-right: 3px;
}

/* Container untuk meratakan tombol 'Kembali ke Beranda' ke tengah */
.btn-back-wrapper {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Style tombol 'Kembali ke Beranda' */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background-color: #0d6136;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.btn-back:hover {
  background-color: #084425;
}

.btn-back-icon {
  font-size: 16px;
  line-height: 1;
}