/* ================================================================================
   DUSUN DAWUNG KULON — style.css
   --------------------------------------------------------------------------------
   Dipisah dari <style> inline pada index.html supaya lebih mudah dirawat.
   Isinya SAMA PERSIS dengan versi asli — tidak ada perubahan desain/warna/ukuran.
   Catatan: konfigurasi warna & font kustom Tailwind (cream, hijau, terakota, dst.)
   tetap berada di index.html karena itu adalah konfigurasi Tailwind CDN (tailwind.config),
   bukan CSS biasa, dan harus dimuat sebelum Tailwind memproses kelas di halaman.
================================================================================= */

  html { scroll-behavior: smooth; }
  body { font-family:'Plus Jakarta Sans', sans-serif; background:#FAF6EF; color:#2C2620; }
  .font-display { font-family:'Fraunces', serif; }

  .motif-anyaman {
    background-image:
      repeating-linear-gradient(45deg, rgba(63,107,76,0.06) 0 6px, transparent 6px 16px),
      repeating-linear-gradient(-45deg, rgba(193,101,47,0.06) 0 6px, transparent 6px 16px);
  }
  .motif-anyaman-line {
    background-image: repeating-linear-gradient(45deg, #C1652F 0 8px, #3F6B4C 8px 16px);
    height: 5px; opacity: 0.6;
  }

  /* ===== CIRI KHAS SINGKONG/TELO — motif tekstur untuk area "produk unggulan" =====
     Beda arah garis dari motif-anyaman supaya kelihatan sebagai motif tersendiri,
     dipakai di banner Produk Unggulan & header halaman Hasil Bumi. */
  .motif-singkong {
    background-image: repeating-linear-gradient(115deg, rgba(193,101,47,0.07) 0 10px, transparent 10px 26px);
  }

  /* Ikon daun & umbi singkong (SVG <use>) ikut warna teks induknya lewat currentColor */
  .ikon-singkong { color: inherit; }

  .page-section { display:none; }
  .page-section.active { display:block; animation: fadeIn .35s ease; }
  @keyframes fadeIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  .bottom-nav-item.active .nav-icon-wrap { background:#3F6B4C; color:#FAF6EF; }
  .bottom-nav-item.active span { color:#3F6B4C; font-weight:700; }
  .top-nav-item.active { color:#C1652F; }
  .top-nav-item.active::after { content:''; display:block; height:2px; background:#C1652F; border-radius:2px; margin-top:2px; }

  .thin-scroll::-webkit-scrollbar { width:6px; }
  .thin-scroll::-webkit-scrollbar-thumb { background:#C9BFA8; border-radius:10px; }

  #toast-wrap { position:fixed; top:1rem; left:50%; transform:translateX(-50%); z-index:100; }
  .toast { background:#2C2620; color:#FAF6EF; padding:.65rem 1.1rem; border-radius:.8rem; font-size:.875rem; box-shadow:0 8px 24px rgba(0,0,0,.25); margin-bottom:.5rem; animation:toastIn .25s ease; }
  @keyframes toastIn { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;} }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid #C1652F; outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

  .modal-backdrop { background: rgba(44,38,32,0.55); backdrop-filter: blur(2px); }
  .skeleton { background: linear-gradient(90deg,#F2ECDF 25%,#EFE7D6 37%,#F2ECDF 63%); background-size:400% 100%; animation: shimmer 1.4s ease infinite; }
  @keyframes shimmer { 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }