/* ===============================================
   PRODUK OLAHAN PAGE SPECIFIC STYLES
   =============================================== */

/* 1. Palet Warna Khas Pangan & Olahan (Tema Oranye Hangat) */
:root {
  --olahan-bg: #FFFBF5; /* Krem sangat terang */
  --olahan-bg-alt: #FDEFE2; /* Oranye pastel */
  --olahan-surface: var(--surface);
  --olahan-text: #4E443A; /* Coklat tua */
  --olahan-heading: #D35400; /* Oranye labu */
  --olahan-accent: #E67E22; /* Oranye wortel */
  --olahan-border: rgba(211, 84, 0, .15);
  --olahan-shadow: 0 15px 40px rgba(78, 68, 58, .12);
}

html[data-theme="dark"] {
  --olahan-bg: #2C251E;
  --olahan-bg-alt: #3E352C;
  --olahan-surface: var(--surface);
  --olahan-text: #FDF8F0;
  --olahan-heading: #F39C12; /* Oranye lebih cerah */
  --olahan-accent: #E67E22;
  --olahan-border: rgba(243, 156, 18, .2);
  --olahan-shadow: 0 15px 40px rgba(0, 0, 0, .25);
}


body {
  background-color: var(--olahan-bg);
  color: var(--olahan-text);
}

/* 2. Hero Section Kustom */
#produk-olahan-hero {
  background-image:
    linear-gradient(to top, var(--olahan-bg) 5%, transparent 50%),
    url('../images/Acar_kubis.jpg');
  background-color: var(--olahan-bg);
  background-blend-mode: multiply, normal;
  background-size: cover;
  background-position: center 40%;
  min-height: 60vh;
}

#produk-olahan-hero h1,
#produk-olahan-hero p,
#produk-olahan-hero .breadcrumb a,
#produk-olahan-hero .breadcrumb span {
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.7);
}

/* 3. Layout Kartu Produk Olahan */
.olahan-card {
    display: grid;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
}

@media (min-width: 992px) {
    .olahan-card {
        grid-template-columns: 1fr 1fr;
    }
    .olahan-card--rev .olahan-card__img {
        order: 2;
    }
}

.olahan-card__img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--olahan-shadow);
    aspect-ratio: 4 / 3;
}

.olahan-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.olahan-card:hover .olahan-card__img img {
    transform: scale(1.05);
}

.olahan-card__content h3 {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--olahan-heading);
    margin-top: 0;
    margin-bottom: 1rem;
}

.olahan-card__content p {
    color: var(--muted);
    line-height: 1.8;
}

.olahan-card__content .btn {
    margin-top: 1rem;
    --bg: var(--olahan-accent);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.3);
    color: #fff;
}
.olahan-card__content .btn:hover {
    background-color: var(--olahan-heading);
}

/* 4. Override Tombol & Footer */
.navbar .nav a.btn--smarthub {
    background: var(--olahan-heading);
    box-shadow: 0 4px 15px rgba(211, 84, 0, .25);
}
.navbar .nav a.btn--smarthub:hover {
    background: var(--olahan-accent);
}

footer {
    background: var(--olahan-bg-alt);
    color: var(--olahan-text);
}
footer b {
    color: var(--olahan-heading);
}
footer a:hover {
    color: var(--olahan-accent) !important;
}