/* =====================================================================
   CIPTONING KOPI — Public Site Design System
   Redesain mengikuti INSTRUKSI_REDESAIN_CIPTONING.md §1
   ===================================================================== */
:root{
  /* Palet resmi redesain */
  --color-cream:#F4F1EB;
  --color-espresso:#2C1810;
  --color-gold:#C8A96E;
  --color-brown:#6F4E37;
  --color-text:#3A3A3A;
  --color-light:#FAF8F5;
  --color-white:#FFFFFF;

  /* Alias lama dipertahankan (dipakai luas di CSS ini) supaya konsisten
     dengan palet baru tanpa menulis ulang setiap selector. */
  --espresso-900:var(--color-espresso); --espresso-800:#3B2415; --espresso-700:var(--color-brown); --espresso-500:#9A6F3D;
  --cream:var(--color-cream);        --cream-soft:var(--color-light);
  --gold:var(--color-gold);
  --orange:#F94F06;
  --white:var(--color-white);        --black:#000000;
  --radius:14px;
  --shadow:0 2px 8px rgba(44,24,16,.08), 0 12px 32px rgba(44,24,16,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--color-light); color:var(--color-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.accent{font-family:'Pacifico',cursive}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; margin:0 0 .4em; color:var(--color-espresso)}

/* ---------- Header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; background:rgba(244,241,235,.7);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(44,24,16,.06);
  position:sticky; top:0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:var(--color-light);
  box-shadow:var(--shadow);
  border-bottom-color:rgba(44,24,16,.1);
}
.site-logo{display:flex; align-items:center}
.site-logo img{height:38px; width:auto; display:block}
.site-nav{display:flex; gap:28px; align-items:center}
.site-nav a{font-weight:500; font-size:15px; color:var(--color-brown)}
.site-nav a:hover{color:var(--color-espresso)}

/* ---------- Header: mobile (hamburger) ---------- */
.nav-toggle{
  display:none; background:none; border:0; padding:6px; cursor:pointer;
  flex-direction:column; gap:5px; z-index:110;
}
.nav-toggle span{width:24px; height:2px; background:var(--color-espresso); display:block; transition:transform .25s ease, opacity .25s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 640px){
  .nav-toggle{display:flex}
  .site-header{padding:14px 20px}
  .site-nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw,320px);
    background:var(--color-light); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:26px; padding:32px;
    transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-8px 0 24px rgba(44,24,16,.12);
  }
  .site-nav.is-open{transform:translateX(0)}
  .site-nav a{font-size:18px}
}

/* ---------- Hero full-bleed (dipakai Beranda & Lakon Kami) ---------- */
.story-hero-full, .hero-full{
  position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.story-hero-full__img, .hero-full__img{
  position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; z-index:0;
}
.story-hero-full::before, .hero-full::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(44,24,16,.5),rgba(44,24,16,.78));
}
.story-hero-full__content, .hero-full__content{position:relative; z-index:2; max-width:640px; padding:0 24px; color:var(--color-light)}
.story-hero-full__content h1, .hero-full__content h1{color:var(--color-light); font-size:clamp(32px,5vw,52px)}
.story-hero-full__content p, .hero-full__content p{color:rgba(244,241,235,.9); font-size:18px; margin:0}

/* ---------- Beranda: Siapa Kami ---------- */
.home-siapa{
  max-width:1040px; margin:0 auto; padding:96px 24px;
  display:flex; align-items:center; gap:56px;
}
.home-siapa__text{flex:1.1; max-width:520px}
.home-siapa__text p{color:var(--color-brown); font-size:18px; margin-bottom:24px}
.home-siapa__media{flex:1; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-width:0}
.home-siapa__media img{width:100%; height:100%; object-fit:cover; display:block}

@media (max-width: 760px){
  .home-siapa{flex-direction:column; padding:64px 24px; gap:28px}
  .home-siapa__media{width:100%}
}

/* ---------- Beranda: Jelajahi Dunia Kami ---------- */
.home-explore{background:var(--color-light); padding:96px 24px}
.home-explore__inner{max-width:1080px; margin:0 auto}
.home-explore h2{text-align:center; margin-bottom:48px}
.home-explore-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.explore-card{
  background:var(--color-white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.explore-card__img{aspect-ratio:1/1; overflow:hidden}
.explore-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.explore-card__body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.explore-card__body h3{margin:0; font-size:20px}
.explore-card__body p{color:var(--color-brown); font-size:14px; margin:0; flex:1}
.explore-card__link{font-weight:600; color:var(--color-gold); font-size:14px}

@media (min-width: 641px){
  .explore-card:hover{transform:scale(1.03); box-shadow:0 4px 14px rgba(44,24,16,.12), 0 20px 40px rgba(44,24,16,.1)}
}
@media (max-width: 760px){
  .home-explore{padding:64px 20px}
  .home-explore-grid{grid-template-columns:1fr; gap:20px}
}

/* ---------- Beranda: Dari Jurnal Kami ---------- */
.home-journal{max-width:1080px; margin:0 auto; padding:96px 24px}
.home-journal h2{text-align:center; margin-bottom:48px}
.home-journal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.mini-journal-card{color:inherit; display:block}
.mini-journal-card__img{aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:14px}
.mini-journal-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.mini-journal-card__date{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.mini-journal-card__title{margin:6px 0 8px; font-size:19px}
.mini-journal-card__excerpt{color:var(--color-brown); font-size:14px; margin:0}

@media (max-width: 760px){
  .home-journal{padding:64px 20px}
  .home-journal-grid{grid-template-columns:1fr; gap:28px}
}

/* ---------- Beranda: penutup (scroll-driven ke espresso) ---------- */
.home-closing{
  padding:120px 24px; text-align:center; background:var(--color-light);
}
.home-closing__inner{max-width:600px; margin:0 auto}
.home-closing p{color:var(--color-brown); font-size:18px; line-height:1.8; margin:0 0 28px}
.home-closing__ngopi{
  font-family:'Pacifico',cursive; color:var(--color-gold);
  font-size:clamp(30px,5vw,46px) !important; margin:0 !important;
}

/* ---------- Lakon Kami: 4 lapisan (alternating media/text) ---------- */
.story-layers{max-width:1080px; margin:0 auto; padding:0 24px}
.story-layer-row{display:flex; align-items:center; gap:56px; padding:88px 0}
.story-layer-row--reverse{flex-direction:row-reverse}
.story-layer-row__media{flex:1 1 0; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-width:0}
.story-layer-row__media img{width:100%; height:100%; object-fit:cover; display:block}
.story-layer-row__text{flex:1 1 0; min-width:0}
.story-layer__tag{
  display:inline-block; font-family:'Pacifico',cursive; color:var(--gold);
  font-size:20px; margin-bottom:8px;
}
.story-layer-row__text p{color:var(--color-brown); font-size:16px; margin:0}

@media (max-width: 760px){
  .story-layer-row, .story-layer-row--reverse{flex-direction:column; gap:24px; padding:56px 0}
  .story-layer-row__media{width:100%; aspect-ratio:16/10}
}

/* ---------- Lakon Kami: Cipta + Ning (dark) ---------- */
.story-cipta{background:var(--color-espresso); padding:96px 24px; text-align:center}
.story-cipta__inner{max-width:680px; margin:0 auto}
.story-cipta__inner p{color:rgba(244,241,235,.9); font-size:17px; line-height:1.8; margin:0 0 22px}
.story-cipta__ngopi{
  font-family:'Pacifico',cursive; color:var(--color-gold);
  font-size:clamp(28px,4.5vw,42px); margin-top:36px !important;
}

/* ---------- Lakon Kami: penutup ---------- */
.story-close{max-width:600px; margin:0 auto; padding:80px 24px 100px; text-align:center}
.story-close p{color:var(--color-brown); font-size:18px; margin-bottom:24px}

/* ---------- Kontak ---------- */
.contact{max-width:820px; margin:0 auto; padding:16px 24px 96px}
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.contact-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:32px 20px;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
}
.contact-card__icon{color:var(--color-gold)}
.contact-card__label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.contact-card__value{font-weight:600; font-size:17px; color:var(--espresso-900)}
.contact-card--static{cursor:default}

/* ---------- Halaman: intro sederhana (Koleksi Kopi, Jurnal Seduh, Kontak) ---------- */
.page-intro{max-width:700px; margin:0 auto; padding:88px 24px 16px; text-align:center}
.page-intro p{color:var(--color-brown); font-size:18px; margin:0}

/* ---------- Koleksi Kopi (catalog) ---------- */
.catalog{max-width:1040px; margin:0 auto; padding:0 24px 96px}
.catalog-empty{text-align:center; color:var(--espresso-700); padding:40px 0}
.catalog-section{max-width:1080px; margin:64px auto 0; padding:0 24px}
.catalog-section--tinted{background:var(--color-cream); padding:64px 24px; max-width:none; margin-top:80px}
.catalog-section--tinted .catalog-section__inner{max-width:1080px; margin:0 auto}
.catalog-section__title{font-size:28px; text-align:center; margin-bottom:6px}
.catalog-section__note{color:var(--espresso-700); font-size:15px; margin:0 auto 32px; text-align:center; max-width:560px}
.catalog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px;
}

/* ---------- Koleksi Kopi: Pandawa Series (showcase, belum ada checkout) ---------- */
.pandawa-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px}
.pandawa-card{
  background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.pandawa-card__img{aspect-ratio:1/1; overflow:hidden; background:var(--color-cream)}
.pandawa-card__img img{width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.3) saturate(1.15) brightness(.98)}
.pandawa-card__body{padding:20px; display:flex; flex-direction:column; gap:6px; flex:1}
.pandawa-card__tokoh{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-gold); font-weight:600}
.pandawa-card__name{margin:0; font-size:19px}
.pandawa-card__meta{font-size:13px; color:var(--color-brown); margin:0}
.pandawa-card__flavor{font-size:14px; color:var(--color-text); margin:4px 0 0}
.pandawa-card__cta{
  margin-top:14px; display:inline-block; text-align:center; font-weight:600; font-size:14px;
  color:var(--color-brown); border:1px solid rgba(111,78,55,.35); border-radius:8px; padding:9px;
}
.pandawa-card__cta:hover{background:var(--color-cream)}
.product-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.product-card__img{width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--cream); padding:14px}
.product-card__body{padding:18px; display:flex; flex-direction:column; gap:8px; flex:1}
.product-card__badge{
  display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--cream); color:var(--espresso-500); padding:3px 10px; border-radius:999px; width:fit-content;
}
.product-card__name{margin:0; font-size:17px}
.product-card__desc{color:var(--espresso-700); font-size:14px; margin:0}
.product-card__price{font-weight:700; font-size:17px; margin-top:auto; color:var(--espresso-900)}
.product-card__cta{
  display:block; text-align:center; background:var(--gold); color:var(--espresso-900);
  font-weight:600; padding:11px; border-radius:8px;
}
.product-card__cta:hover{background:#b28d4a; text-decoration:none}
.product-card__cta--wa{background:var(--espresso-900); color:var(--cream-soft)}
.product-card__cta--wa:hover{background:var(--espresso-800)}

/* ---------- Jurnal Seduh (list) ---------- */
.journal{max-width:860px; margin:0 auto; padding:16px 24px 96px}
.journal-list{display:flex; flex-direction:column; gap:0}
.journal-card{
  display:flex; align-items:center; gap:28px; padding:28px 0;
  border-top:1px solid rgba(44,24,16,.1); color:inherit;
}
.journal-card:hover{text-decoration:none}
.journal-card:last-child{border-bottom:1px solid rgba(44,24,16,.1)}
.journal-card__img{flex:0 0 220px; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.journal-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.journal-card__body{flex:1; min-width:0}
.journal-card__date{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.journal-card__title{margin:6px 0 8px; font-size:22px}
.journal-card__excerpt{color:var(--espresso-700); font-size:15px; margin:0 0 8px}
.journal-card__link{font-weight:600; color:var(--gold)}

@media (max-width: 640px){
  .journal-card{flex-direction:column; align-items:stretch; gap:16px}
  .journal-card__img{flex:none; width:100%}
}

/* ---------- Jurnal Seduh (artikel) ---------- */
.article{max-width:680px; margin:0 auto; padding:64px 24px 96px}
.article__date{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.article article h1{margin:8px 0 20px; font-size:clamp(28px,4vw,40px)}
.article__lede{font-size:18px; color:var(--espresso-700); margin-bottom:24px}
.article article p{font-size:16px; line-height:1.75; margin-bottom:20px; color:var(--espresso-900)}
.article__cta{
  text-align:center; margin:48px 0; padding:32px; background:var(--white);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.article__cta p{margin:0 0 14px; font-weight:600}
.article__cta .cta{
  display:inline-block; background:var(--espresso-900); color:var(--cream-soft);
  font-weight:600; padding:12px 26px; border-radius:999px;
}
.article__cta .cta:hover{background:var(--espresso-800); text-decoration:none}
.article__back{text-align:center; font-weight:600}

/* ---------- Halaman legal (Kebijakan Privasi, S&K, Pengembalian) ---------- */
.legal{max-width:800px; margin:0 auto; padding:16px 24px 96px}
.legal h2{font-size:22px; margin-top:40px}
.legal p, .legal li{color:var(--color-text); font-size:16px; line-height:1.75}
.legal ul{padding-left:22px; margin:0 0 20px}
.legal li{margin-bottom:8px}
.legal__updated{color:var(--espresso-500); font-size:13px; margin-bottom:8px}

/* ---------- Halaman produk Ciptoning POS ---------- */
.pos-hero{max-width:760px; margin:0 auto; padding:88px 24px 8px; text-align:center}
.pos-hero p{color:var(--color-brown); font-size:18px; margin:0 0 24px}
.pos-hero .hero-cta-link{margin-top:0}
.feature-grid{max-width:1080px; margin:56px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.feature-item{background:#fff; border-radius:14px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,.05)}
.feature-item__title{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:18px; color:var(--color-espresso); margin:0 0 6px}
.feature-item__desc{color:var(--espresso-700); font-size:14px; margin:0; line-height:1.6}
.pricing-grid{max-width:1080px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.pricing-card{background:#fff; border-radius:16px; padding:28px 24px; box-shadow:0 2px 10px rgba(0,0,0,.06); display:flex; flex-direction:column; text-align:center}
.pricing-card--featured{border:2px solid var(--gold); box-shadow:0 8px 24px rgba(201,152,47,.18)}
.pricing-card__badge{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); font-weight:700; margin-bottom:6px}
.pricing-card__nama{font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; margin:0}
.pricing-card__harga{font-size:28px; font-weight:700; color:var(--color-espresso); margin:10px 0 4px}
.pricing-card__harga span{font-size:13px; font-weight:400; color:var(--espresso-500)}
.pricing-card__list{list-style:none; padding:0; margin:18px 0; text-align:left; flex:1}
.pricing-card__list li{font-size:14px; color:var(--espresso-700); padding:6px 0; border-bottom:1px solid var(--color-light)}
.pricing-card__cta{
  display:block; text-align:center; background:var(--gold); color:var(--espresso-900);
  font-weight:600; padding:12px; border-radius:8px; margin-top:10px;
}
.pricing-card__cta:hover{opacity:.9; text-decoration:none}
.pos-faq{max-width:720px; margin:64px auto 0; padding:0 24px}
.pos-faq details{background:#fff; border-radius:10px; padding:14px 18px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,.04)}
.pos-faq summary{font-weight:600; cursor:pointer; color:var(--color-espresso)}
.pos-faq p{color:var(--espresso-700); font-size:14px; margin:10px 0 0}

/* ---------- Tombol CTA generik (dipakai di 404, dst) ---------- */
.hero-cta-link{
  display:inline-block; margin-top:16px; background:var(--espresso-900); color:var(--cream-soft);
  font-weight:600; padding:14px 30px; border-radius:999px;
}
.hero-cta-link:hover{background:var(--espresso-800); text-decoration:none}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-espresso); color:var(--color-light);
  padding:48px 24px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.site-footer__logo img{height:34px; width:auto; filter:brightness(0) invert(1); opacity:.92}
.site-footer__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:14px}
.site-footer__nav a{color:rgba(244,241,235,.8)}
.site-footer__nav a:hover{color:var(--color-gold)}
.site-footer__copy{font-size:12px; color:rgba(244,241,235,.55)}
.site-footer__copy a{color:rgba(244,241,235,.7)}
.site-footer__copy a:hover{color:var(--color-gold)}

/* =====================================================================
   Idle-Overlay Bermerek (NGOPI = Ngolah Pikir)
   ===================================================================== */
.idle-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--espresso-900);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease;
}
.idle-overlay.active{opacity:1; visibility:visible; pointer-events:auto}
.idle-overlay__inner{text-align:center; padding:0 24px; max-width:560px}
.idle-overlay__term{
  font-family:'Pacifico',cursive; color:var(--gold);
  font-size:clamp(36px,7vw,64px); margin:0 0 .3em;
}
.idle-overlay__meaning{
  font-family:'Cormorant Garamond',Georgia,serif; color:var(--cream-soft);
  font-size:clamp(16px,2.4vw,22px); font-style:italic; margin:0 0 2em;
}
.idle-overlay__hint{
  color:rgba(245,241,234,.55); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase;
}

/* =====================================================================
   Scroll-reveal utility (dianimasikan lewat GSAP di assets/js/site.js).
   Fallback tanpa JS/GSAP: tetap terlihat (progressive enhancement).
   ===================================================================== */
.reveal{opacity:1; transform:none}
.js-gsap .reveal{opacity:0; transform:translateY(24px)}