/* Latar beranda: warna kebun, krem, dan aksen kopi yang lembut. */
.home #beranda {
  background-image:
    linear-gradient(90deg, #fff8e7e8 0%, #f4f1dca6 38%, #e0ead526 72%),
    url("assets/optimized/hero-desktop-1440.webp");
}

.home #produkkopi {
  background:
    radial-gradient(ellipse at 100% 0%, #d9e7c980, transparent 60%),
    linear-gradient(135deg, #fff9ed, #f3eedf);
}

.home #pelatihan {
  background:
    radial-gradient(ellipse at 100% 0%, #bed39a66, transparent 65%),
    linear-gradient(120deg, #e9efdf, #dae6ce);
}

.home #materidanedukasi {
  background:
    radial-gradient(ellipse at 0% 100%, #e9d3b459, transparent 60%),
    linear-gradient(135deg, #f5f8ec, #eaf0df);
}

.home #usaha {
  background:
    radial-gradient(ellipse at 100% 100%, #d5e3bc66, transparent 60%),
    linear-gradient(135deg, #faf4e7, #efe4d2);
}

.home #tentangkami {
  background:
    radial-gradient(ellipse at 0% 0%, #d9e5c980, transparent 65%),
    linear-gradient(135deg, #f2f3e5, #e8eddd);
}

.home #berita {
  background:
    radial-gradient(ellipse at 100% 0%, #eed0b459, transparent 60%),
    linear-gradient(135deg, #fff9ef, #f4eadc);
}

.home #kontak {
  background:
    radial-gradient(ellipse at 0% 100%, #d5e4bd80, transparent 65%),
    linear-gradient(135deg, #f1f5e8, #e5eddb);
}

/* Gaya kartu beranda yang selaras dengan berita dan kegiatan. */
.home #tentangkami {
  padding: 56px max(24px, 6vw);
}
.home #tentangkami .about-layout {
  width: min(100%, 1200px);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: stretch;
}
.home #tentangkami .about-copy {
  padding: 0;
  min-width: 0;
}
.home #tentangkami .about-copy > small {
  align-self: flex-start;
  padding: 0 0 10px;
  border-bottom: 2px solid #92aa76;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.home #tentangkami .about-copy h2 {
  margin: 20px 0 18px;
  font: 400 clamp(34px, 3.8vw, 52px)/1.12 Georgia, serif;
  letter-spacing: -1.2px;
}
.home #tentangkami .about-copy > p {
  margin: 0 0 24px;
  font: 400 16px/1.7 Arial, Helvetica, sans-serif;
  color: #435548;
}
.home #tentangkami .about-media {
  min-height: 0;
  margin: 0;
  border-radius: 20px;
  border-color: #d4ddca;
  background: var(--forest);
}
.home #tentangkami .about-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 65%;
}
.home #tentangkami .about-media-copy {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 54px 24px 24px;
  background: linear-gradient(transparent, #102b1ed9);
}
.home #tentangkami .about-values {
  gap: 12px;
  margin-top: 0;
}
.home #tentangkami .about-values article {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d8dfd0;
  border-radius: 14px;
}
.home #tentangkami .about-values b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #edf2e5;
  font: 700 16px/1 Arial, sans-serif;
}
.home #tentangkami .about-values h3 {
  margin: 0 0 7px;
  font-size: 18px;
}
.home #tentangkami .about-values p {
  margin: 0;
  font-size: 14px;
}
@media (max-width: 980px) {
  .home #tentangkami .about-layout { gap: 24px; }
  .home #tentangkami .about-values article { padding: 16px; }
}
@media (max-width: 700px) {
  .home #tentangkami { padding: 36px 18px; }
  .home #tentangkami .about-layout { grid-template-columns: 1fr; gap: 0; }
  .home #tentangkami .about-copy { display: contents; }
  .home #tentangkami .about-copy > small { justify-self: start; }
  .home #tentangkami .about-copy h2 { font-size: clamp(32px, 8vw, 42px); }
  .home #tentangkami .about-media { aspect-ratio: 4 / 3; margin-bottom: 22px; }
  .home #tentangkami .about-values { gap: 12px; }
}
.home .product-grid,
.home .education-grid,
.home .practical-guides { align-items: stretch; }
.home .product-card,
.home .education-card,
.home .practical-guides > article,
.home .about-values > article {
  min-width: 0;
  border: 1px solid #d8dfd0;
  border-radius: 18px;
  background: #fffdf7;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home .product-card:hover,
.home .education-card:hover,
.home .practical-guides > article:hover {
  border-color: #8aab77;
  box-shadow: 0 5px 14px #173f2b12;
}
.home .product-card { padding: 22px; overflow: hidden; }
.home .product-card .product-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  border-radius: 12px;
  object-fit: cover;
}
.home .education-visual { height: 205px; }
.home .education-content { padding: 22px; }
.home .product-card h3,
.home .education-content h3,
.home .practical-guides h3,
.home .about-values h3 {
  min-height: 0;
  margin: 12px 0;
  color: var(--forest);
  font: 700 clamp(20px, 1.7vw, 23px)/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: -.3px;
}
.home .product-card p,
.home .education-content p,
.home .practical-guides p,
.home .about-values p {
  min-height: 0;
  margin: 0 0 22px;
  color: #536158;
  font: 400 14px/1.65 Arial, sans-serif;
}
.home .product-card small { font-size: 10px; line-height: 1.5; letter-spacing: 1px; }
.home .product-card > strong { font-size: 12px; line-height: 1.5; margin-bottom: 18px; }
.home .product-card .product-button,
.home .education-content .education-button,
.home .practical-guides .detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 16px;
  border: 1px solid #ccd8c2;
  border-radius: 9px;
  background: #edf2e5;
  color: var(--forest);
  font: 700 12px/1.4 Arial, sans-serif;
}
.home .product-card .product-button:hover,
.home .education-content .education-button:hover,
.home .practical-guides .detail-button:hover {
  background: var(--forest);
  color: white;
  border-color: var(--forest);
}
.home .product-card .product-button:focus-visible,
.home .education-content .education-button:focus-visible,
.home .practical-guides .detail-button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.home .practical-guides > article { padding: 22px; }
.home .practical-guides .practical-guide-icon {
  width: 64px;
  height: 64px;
  padding: 12px;
  margin-bottom: 8px;
  background: #edf2e5;
  border: 1px solid #d8dfd0;
  border-radius: 16px;
  object-fit: contain;
}
.home .about-values > article { padding: 22px; border-top: 3px solid #8aa46f; }
.home .about-values b { color: var(--green); font: 700 20px/1.2 Arial, sans-serif; }
.home .contact-grid > * { border-radius: 14px; }
@media (max-width: 700px) {
  .home .product-card,
  .home .education-content,
  .home .practical-guides > article,
  .home .about-values > article { padding: 18px; }
  .home .education-visual { height: 190px; }
}
.home .education-grid { scrollbar-width: none; }
.home .education-grid::-webkit-scrollbar { display: none; }
.home :is(.product-controls, .education-controls, .news-controls) {
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.home :is(.product-control, .education-control, .news-control) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #cddac6;
  border-radius: 50%;
  background: #fffefb;
  color: #173e2b;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.home :is(.product-control, .education-control, .news-control) svg {
  width: 20px;
  height: 20px;
}
.home :is(.product-control, .education-control, .news-control):hover:not(:disabled) {
  background: #173e2b;
  border-color: #173e2b;
  color: #fff;
}
.home :is(.product-control, .education-control, .news-control):focus-visible {
  outline: 3px solid #9bac78;
  outline-offset: 3px;
}
.home :is(.product-control, .education-control, .news-control):disabled {
  opacity: .4;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .home :is(.product-control, .education-control, .news-control) { transition: none; }
  .home .product-card,
  .home .education-card,
  .home .practical-guides > article,
  .home .about-values > article { transition: none; }
}

/* Shared rhythm for original and newly supplied product cards. */
.home .product-card h3 { min-height: 2.6em; }
.home .product-card p { min-height: 4.95em; }
.home .product-card > strong {
  min-height: 1.5em;
  margin-top: auto;
  margin-bottom: 18px;
}
.home .product-card .product-button { margin-top: 0; }

.contact-dialog [hidden] { display: none !important; }

/* Compact homepage cards on phones; desktop sizing stays unchanged. */
@media (max-width: 700px) {
  .home #produkkopi .product-card,
  .home .education-grid .education-card,
  .home #newsCarousel .news-card {
    flex: 0 0 78%;
    max-width: 280px;
    min-height: 0;
    border-radius: 14px;
  }
  .home #produkkopi .product-card,
  .home .education-content,
  .home .practical-guides > article,
  .home .about-values > article,
  .home #newsCarousel .news-card { padding: 14px; }
  .home .product-card .product-image {
    aspect-ratio: 3 / 2;
    margin-bottom: 12px;
    border-radius: 9px;
  }
  .home .education-visual { height: 140px; }
  .home #newsCarousel .news-card-top {
    height: 140px;
    min-height: 140px;
    margin: -14px -14px 12px;
    padding: 12px;
  }
  .home .product-card h3,
  .home .education-content h3,
  .home .practical-guides h3,
  .home .about-values h3,
  .home #newsCarousel .news-card h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 8px 0;
  }
  .home .product-card p,
  .home .education-content p,
  .home .practical-guides p,
  .home .about-values p,
  .home #newsCarousel .news-card p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .home .product-card p { min-height: 4.5em; }
  .home .product-card > strong { font-size: 11px; margin-bottom: 12px; }
  .home .practical-guides .practical-guide-icon { width: 48px; height: 48px; padding: 9px; }
  .home .product-card .product-button,
  .home .education-content .education-button,
  .home .practical-guides .detail-button,
  .home #newsCarousel .news-button { min-height: 44px; padding: 8px 12px; }
}

@media (max-width: 700px) {
  .home .education-grid { grid-auto-columns: min(78%, 280px); gap: 14px; }
  .home .education-grid .education-card { max-width: none; }
}

@media (max-width: 700px) {
  .home .practical-guides > article {
    flex: 0 0 78%;
    min-width: 0;
    max-width: 280px;
    min-height: 0;
    height: auto;
    padding: 14px;
    border-radius: 14px;
  }
  .home .practical-guides .practical-guide-icon {
    width: 36px;
    height: 36px;
    padding: 7px;
    margin-bottom: 6px;
    border-radius: 10px;
  }
  .home .practical-guides h3 { font-size: 16px; margin: 6px 0 8px; }
  .home .practical-guides p { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
  .home .practical-guides .detail-button { min-height: 44px; margin-top: auto; }
}

/* Delivery variants only: preserve cover sizing and original center / 62% anchor. */
.home #beranda { background-image: linear-gradient(90deg, #fff8e7e8 0%, #f4f1dca6 38%, #e0ead526 72%), image-set(url("assets/optimized/hero-desktop-1440.webp") 1x, url("assets/optimized/hero-desktop-1672.webp") 2x); }
@media (min-width: 1441px) { .home #beranda { background-image: linear-gradient(90deg, #fff8e7e8 0%, #f4f1dca6 38%, #e0ead526 72%), url("assets/optimized/hero-desktop-1672.webp"); } }
@media (max-width: 700px) and (orientation: portrait) { .home #beranda { background-image: linear-gradient(90deg, #fff8e7e8 0%, #f4f1dca6 38%, #e0ead526 72%), url("assets/optimized/hero-mobile-941.webp"); } }