.wa-demo-controls {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.wa-demo-controls > * {
  flex: 1;              /* tiap anak ambil porsi sama rata */
  text-align: center;   /* tengahin isi */
}






/* Archive grid responsive */
.wa-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* default desktop: 4 kolom */
  gap: 20px;
  margin: 20px 0;
}

@media (max-width: 768px) {
  .wa-archive-grid {
    grid-template-columns: 1fr; /* mobile: 1 kolom */
  }
}

.wa-archive-item {
  background: #fff;
  border: 2px solid #2e9e35;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-archive-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.wa-archive-thumb {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.wa-archive-title {
  font-size: 18px;
  margin: 6px 0;
  color: #1b5f2b;
}

.wa-archive-h2 {
  font-size: 14px;
  color: #666;
}

















/* Kolom 3 tetap sama layout & padding */
.wa-grid-item.wa-item-3 {
    position: relative;
    min-height: 300px;
    border: 3px solid #2e9e35;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.03);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Kolom 3 */
.wa-grid-item.wa-item-3 {
    position: relative;
    min-height: 300px; /* bisa kamu ubah-ubah, QR tetap center */
    border: 3px solid #2e9e35;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.03);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* QR block full height + flex center */
.wa-grid-item.wa-item-3 .wa-qr-block {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;       /* stack: QR + caption */
    justify-content: center;      /* vertical center */
    align-items: center;          /* horizontal center */
    padding: 20px;
    border-radius: 12px;
    background: url('/wp-content/uploads/2025/09/scanme.png') no-repeat center center;
    background-size: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); height: 444px;
}

/* QR image */
.wa-grid-item.wa-item-3 .wa-qr {
    max-width: 180px;
    width: 50%;
    height: auto;
}

/* Caption */
.wa-grid-item.wa-item-3 .wa-qr-caption {
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}




/* Basic styles for WA Menu Grid plugin
   - Responsive: desktop -> 3 columns (grid), mobile -> 1 column
*/


.menu-article {
  margin-top: 40px;
  column-count: 2;
  column-gap: 30px;
}

.menu-article h1.entry-title {
  column-span: all;   /* pastikan H1 span full sebelum kolom */
  -webkit-column-span: all; /* untuk Safari/Chrome */
  font-size: 28px;
  margin-bottom: 20px;
}

@media(max-width:768px) {
  .menu-article {
    column-count: 1;
  }
}

/* Basic styles for WA Menu Grid plugin
   - Responsive: desktop -> 3 columns (grid), mobile -> 1 column
*/


.wa-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
  margin: 16px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}


/* individual boxes */
.wa-menu-grid .wa-grid-item {
  border: 3px solid #2e9e35;
  border-radius: 12px;
  padding: 14px;
  background: #f6fff6;
  box-shadow: 0 2px 0 rgba(0,0,0,0.03);
  min-height: 120px;
}

/* featured image */
.wa-featured-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}



@media (max-width: 900px) {
  .wa-menu-grid { grid-template-columns: 1fr; }
  .wa-device-frame { height:420px; } /* mobile preview taller on narrow screens */
}


/* device frames */
.wa-device-wrap { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.wa-device-frame { width:100%; border-radius:8px; overflow:hidden; border:1px solid #ddd; background:#fff; height:389px; }
.wa-device-frame iframe { width:100%; height:100%; border:0; }

/* demo controls */
.wa-demo-controls { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-top:6px; }


.wa-demo-h2 {
  font-weight: 700;
  font-size: 26px;
  color: #1b5f2b;
  line-height: 100%;
  text-align: left;
}


.wa-demo-button {
  padding: 8px 10px;
  background: #157003;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
  transition: 0.3s; /* biar smooth */
}

.wa-demo-button:hover {
  background: #ff6600; /* orange */
  color: #fff;         /* tetap putih */
}





/* QR block */
.wa-qr-block { text-align:center; }
.wa-qr { max-width:100%; height:auto; display:inline-block; border-radius:6px; background:#fff; padding:6px; border:1px solid #e6e6e6; }
.wa-qr-caption { margin-top:6px; font-weight:600; color:#1b5f2b; }

/* placeholders */
.wa-placeholder { background:#fff; color:#777; padding:16px; border-radius:8px; border:1px dashed #cfcfcf; text-align:center; }

/* grid placement hints (match image ordering) */
.wa-item-1 {}
.wa-item-2 {}
.wa-item-3 {}
.wa-item-4 {}
.wa-item-5 {}
.wa-item-6 {}


/* Style the admin toolbar buttons we inject */
.wa-shortcode-toolbar .button { background:#2e9e35; color:#fff; border-color:#2e9e35; }
.wa-shortcode-toolbar .button:hover { background:#23812b; border-color:#23812b; }