/* app.css — fallback non-build. `npm run build` menimpa file ini. */

/* ====================================================================
   SIPTANI–MUTIARA — komponen kustom.
   Diambil persis dari blok <style> desain sumber (.dc.html) agar hasil
   identik secara visual. Jangan ubah nilai (CLAUDE.md §13).
   ==================================================================== */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    color: #1c3a24;
    background: #fff;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    margin: 0;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; }
}

.serif { font-family: 'Outfit', sans-serif; font-weight: 700; }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.7,.2,1), transform .7s cubic-bezier(.22,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-group] > * { opacity: 0; transition: opacity .6s ease; }
[data-reveal-group].is-in > * { opacity: 1; }
[data-reveal-group].is-in > *:nth-child(2){transition-delay:.07s}
[data-reveal-group].is-in > *:nth-child(3){transition-delay:.14s}
[data-reveal-group].is-in > *:nth-child(4){transition-delay:.21s}
[data-reveal-group].is-in > *:nth-child(5){transition-delay:.28s}
[data-reveal-group].is-in > *:nth-child(6){transition-delay:.35s}
[data-reveal-group].is-in > *:nth-child(7){transition-delay:.42s}
[data-reveal-group].is-in > *:nth-child(8){transition-delay:.49s}
[data-reveal-group].is-in > *:nth-child(9){transition-delay:.56s}
[data-reveal-group].is-in > *:nth-child(n+10){transition-delay:.6s}
@media (prefers-reduced-motion: reduce){ [data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important;transition:none!important} }

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes leafSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(2deg); } }
@keyframes spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ovlIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.a2 { animation: fadeUp .7s .2s ease both; }
.a3 { animation: fadeUp .7s .35s ease both; }
.a4 { animation: fadeUp .7s .5s ease both; }

/* Nav */
.siptani-nav { background: #fff; border-bottom: 1px solid #e6ede9; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.siptani-nav.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.siptani-nav.hero-top { background: transparent !important; border-bottom: none !important; }
.siptani-nav.hero-top .nav-lnk { color: rgba(255,255,255,.88) !important; }
.siptani-nav.hero-top .nav-lnk.active { color: #fff !important; }
.siptani-nav.hero-top .nav-lnk.active::after { background: rgba(255,255,255,.75); }
.siptani-nav.hero-top .nav-lnk:hover { color: #fff !important; }
.siptani-nav.hero-top .logo-name { color: #fff !important; }
.siptani-nav.hero-top .logo-sub { color: rgba(255,255,255,.6) !important; }
.siptani-nav.hero-top .nav-ham-bar { background: #fff !important; }
.nav-lnk { font-size: 14px; font-weight: 500; color: #4a6b55; padding: 6px 2px; position: relative; transition: color .2s; }
.nav-lnk:hover { color: #1a4d2e; }
.nav-lnk.active { font-weight: 700; color: #1a4d2e; }
.nav-lnk.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2.5px; background: #35a35c; border-radius: 2px; }
.nav-links-row { display: flex; align-items: center; gap: 28px; }
.nav-cta-wrap { display: flex; }
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.mobile-nav { display: none; flex-direction: column; }
.mobile-nav.is-open { display: flex; }

/* Product cards */
.prod-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s; cursor: pointer; }
.prod-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(10,31,17,.13) !important; border-color: #c8e6d0 !important; }
.prod-card:hover .prod-img { transform: scale(1.07); }
.prod-img { transition: transform .5s ease; }
.cat-tab { font-family: 'Outfit', sans-serif; background: #fff; color: #4a7a5a; border: 1.5px solid #c8e6d0; cursor: pointer; padding: 9px 22px; border-radius: 100px; font-size: 13px; font-weight: 600; transition: all .2s; }
.cat-tab:hover { background: #f0f9f4; border-color: #7ec89a; color: #1a4d2e; }
.cat-tab.cat-active { background: #1a4d2e !important; color: #fff !important; border-color: #1a4d2e !important; }
.kt-detail { transition: background .2s, color .2s, border-color .2s; }
.kt-detail:hover { background: #1a4d2e; color: #fff; border-color: #1a4d2e; }
.kt-wa { transition: filter .2s; }
.kt-wa:hover { filter: brightness(1.1); }
.kt-search:focus { outline: none; border-color: #35a35c; box-shadow: 0 0 0 4px rgba(53,163,92,.12); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tentang / feature cards */
.feat-card { transition: transform .25s, box-shadow .25s; }
.feat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.18); }
.ab-btn { transition: background .2s, transform .15s; }
.ab-btn:hover { background: #16401f; transform: translateY(-2px); }

/* General buttons */
.btn-green { transition: filter .2s, transform .15s; }
.btn-green:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-outline-white { transition: background .2s; }
.btn-outline-white:hover { background: rgba(255,255,255,.18) !important; }
.foot-lnk { transition: color .2s; }
.foot-lnk:hover { color: rgba(255,255,255,.9) !important; }
.float-wa { transition: transform .2s, box-shadow .2s; }
.float-wa:hover { transform: scale(1.12); box-shadow: 0 8px 28px rgba(37,211,102,.5) !important; }

/* Detail modal */
.dp-ovl { position: fixed; inset: 0; z-index: 1000; background: rgba(10,31,17,.6); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; animation: ovlIn .25s ease both; }
.dp-modal { background: #f4f9f5; border-radius: 22px; width: 100%; max-width: 940px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.4); animation: modalIn .32s cubic-bezier(.2,.8,.2,1) both; }
.dp-close { transition: background .2s, transform .2s; }
.dp-close:hover { background: #fff !important; transform: rotate(90deg); }
.dp-waBig { transition: filter .2s, transform .15s; }
.dp-waBig:hover { filter: brightness(1.08); transform: translateY(-2px); }
.rel-card { transition: transform .2s, box-shadow .2s; cursor: pointer; }
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10,31,17,.14); }

/* Layout grids */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.check2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; }
.kontak-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: stretch; }
.kontak-ref-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.kc-input { width: 100%; font-family: 'Outfit', sans-serif; font-size: 15px; color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); border-radius: 13px; padding: 14px 16px; outline: none; transition: border-color .18s, background .18s; }
.kc-input::placeholder { color: rgba(255,255,255,.4); }
.kc-input:focus { border-color: #6de898; background: rgba(255,255,255,.11); }
select.kc-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236de898' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 44px; }
select.kc-input option { color: #1c3a24; }
.kc-submit { transition: transform .18s, box-shadow .18s, filter .18s; }
.kc-submit:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(37,211,102,.4); }
.kc-contact-row { transition: transform .2s; }
.kc-contact-row:hover { transform: translateX(4px); }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dp-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .kontak-grid { grid-template-columns: 1fr; }
  .kontak-ref-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 880px) {
  .dp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .nav-links-row { display: none !important; }
  .nav-cta-wrap { display: none !important; }
  .hamburger-btn { display: flex; }
  .rel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feat-grid { grid-template-columns: 1fr; }
  .check2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-cards { flex-direction: column; }
}

/* ====================================================================
   PENYEMPURNAAN TAMPILAN MOBILE — rapih, jelas, ramah-sentuh.
   Override inline-style lewat attribute-selector (presisi & aman).
   ==================================================================== */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }            /* cegah scroll horizontal */
}
@media (max-width: 640px) {
  /* Hero: tinggi adaptif (memperhitungkan bilah browser) + padding ringkas */
  #beranda { min-height: 100svh; }
  #beranda > div[style*="padding: 100px 5% 80px"] { padding-top: 96px !important; padding-bottom: 56px !important; }

  /* Kurangi padding vertikal section besar → scroll lebih efisien */
  section[style*="padding: 88px 5% 80px"],
  section[style*="padding: 80px 5%"],
  section[style*="padding: 96px 5%"]        { padding-top: 54px !important; padding-bottom: 54px !important; }
  section[style*="padding: 80px 0 84px"]    { padding-top: 48px !important; padding-bottom: 56px !important; }
  section[style*="padding: 56px 0 84px"]    { padding-top: 34px !important; padding-bottom: 56px !important; }
  section[style*="padding: 132px 5% 92px"]  { padding-top: 100px !important; padding-bottom: 56px !important; }
  section[style*="padding: 0 5% 80px"]      { padding-bottom: 56px !important; }
  div[style*="padding: 64px 5%"]            { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Foto "arch" + badge berputar: proporsional di layar kecil */
  .arch-photos { gap: 10px !important; }
  .arch-photos img { height: 210px !important; }
  .arch-photos img:first-child { border-radius: 90px 90px 12px 12px !important; }
  .arch-photos img:last-child  { border-radius: 12px 12px 90px 90px !important; margin-top: 22px !important; }
  .arch-badge { width: 84px !important; height: 84px !important; }
  .arch-badge svg:first-child { width: 84px !important; height: 84px !important; }

  /* Kartu form kontak lebih ringkas */
  div[style*="padding: 36px 32px"] { padding: 26px 20px !important; }

  /* Modal detail: overlay & isi lebih rapat */
  .dp-ovl { padding: 16px 10px !important; }
  .dp-modal div[style*="padding: 32px 32px 28px"] { padding: 24px 20px !important; }
  .dp-modal div[style*="padding: 8px 32px 32px"]  { padding: 8px 20px 24px !important; }
  .dp-modal div[style*="min-height: 320px"]       { min-height: 220px !important; }

  /* Target sentuh nyaman (>=44px) */
  .cat-tab { padding: 11px 18px !important; }
}
@media (max-width: 420px) {
  .arch-photos img { height: 168px !important; }
  .arch-badge { width: 68px !important; height: 68px !important; }
  .arch-badge svg:first-child { width: 68px !important; height: 68px !important; }
  /* Tombol hero jadi full-width agar mudah ditekan */
  #beranda .a4 a { flex: 1 1 100%; justify-content: center; }
}

/* ====================================================================
   SLIDER PRODUK (khusus Beranda) + KEUNGGULAN 2×2 di mobile.
   ==================================================================== */
.products-slider {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto; overflow-y: hidden;
  gap: 20px;
  padding: 8px 2px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.products-slider > .prod-card { flex: 0 0 300px; scroll-snap-align: start; }
.products-slider::-webkit-scrollbar { height: 8px; }
.products-slider::-webkit-scrollbar-thumb { background: #c8e6d0; border-radius: 100px; }
.products-slider::-webkit-scrollbar-track { background: #e3eee7; border-radius: 100px; }

@media (max-width: 640px) {
  .products-slider { gap: 14px; }
  .products-slider > .prod-card { flex-basis: 80%; }
  /* Keunggulan: 2 atas, 2 bawah */
  .feat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .feat-grid > .feat-card[style*="padding: 28px 24px"] { padding: 18px 15px !important; }
  .feat-card img[style*="width: 54px"] { width: 46px !important; height: 46px !important; }
}
@media (max-width: 380px) {
  .feat-grid > .feat-card[style*="padding: 28px 24px"] { padding: 14px 12px !important; }
}

/* Hilangkan garis tipis (seam) di bawah gelombang hero Beranda:
   biarkan gelombang yang menjorok -2px benar-benar menumpuk ke section
   berikutnya (sebelumnya terpotong oleh overflow:hidden). */
#beranda { overflow: visible !important; }

/* ====================================================================
   FOOTER rapih di mobile + SEARCH BAR full-width.
   ==================================================================== */
@media (max-width: 768px) {
  /* Footer: brand & kontak full-width, Navigasi|Produk berdampingan */
  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  .footer-cols > div:first-child,
  .footer-cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .footer-cols { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* Search bar katalog & beranda: penuh kiri-kanan saat toolbar membungkus */
  div[style*="min-width: 240px"][style*="max-width: 320px"] {
    flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important;
  }
}